Abyard — Strong UI Design with Easing Animations

In designing the website for ABYARD, the priority was a clear structure that guides the user through the modular-home offering. A clean interface and dynamic elements deliver a smooth experience, while highlighting the unique features of the solutions the company provides.

Goals and assumptions for building the website

Target audience:

The target audience of the ABYARD website consists of individuals and companies interested in building modern modular homes — looking for fast, functional and aesthetic solutions. These are clients who value innovation, ecology and flexibility in construction — both private investors and developers seeking scalable building solutions.

Persona 1: Private investor

• Profile: Private individuals, aged 30-50, well-earning, who dream of a fast and modern home built in modular technology.
• Motivations: Time savings, minimalism, modern solutions, eco-friendly materials.
• Problems: Traditional construction is time-consuming, requires heavy involvement and can be costly. The client is looking for an alternative combining speed of construction with high build quality.
• Expectations: A finished product delivered "turnkey" with minimal client involvement, maintaining the highest quality and modern design.

Persona 2: Real estate developer

• Profile: Development companies that want to bring to market housing estates composed of modular homes and are looking for scalable, fast-to-build construction solutions.
• Motivations: Speed of investment delivery, low production and installation costs, scalability, and flexibility to adapt the project to investor needs.
• Problems: The traditional construction process is lengthy, which increases costs, while clients expect modern solutions.
• Expectations: Comprehensive, flexible modular solutions that can be deployed at scale, while optimizing costs and maintaining high quality.

Persona 3: Architect

• Profile: Architects looking for innovative building technologies who want to offer clients modern, eco-friendly solutions that are easy to deliver.
• Motivations: Adding modern, prefabricated modular homes to the portfolio — enabling unique, sustainable projects for clients.
• Problems: The architect encounters limitations of traditional construction methods, which can delay projects and increase their costs.
• Expectations: Ready-made modular solutions that can be easily adapted to the architectural vision — offering flexibility and high aesthetic quality.

Our role

Our role in the ABYARD project was comprehensive planning and delivery of a website that reflects the modern character of the modular-home offering. We started with UX workshops to thoroughly understand user needs and the key business goals. We then moved to wireframe design, taking into account optimal information structure and intuitive user paths.

Design process

Our collaboration with ABYARD involved the full design process — from initial analysis and UX workshops, through to final interface (UI) delivery. Every stage was carefully planned to deliver a product that not only meets the client's expectations but also ensures excellent user experience.

Stage 1: UX workshops

We started our work with UX workshops, during which — together with the client — we analyzed business goals, user needs and key site functionality. Based on this analysis we defined target groups, developed personas and created user journeys. This stage allowed us to fully understand ABYARD's expectations and the challenges to be solved.

Stage 2: Wireframes and site structure

The next step was building wireframes and the site's structure. We created low-fidelity prototypes that showed the basic layout of elements on the site, enabling verification of functionality and user paths. We worked closely with the client to ensure the site structure meets all requirements and supports intuitive navigation.

Stage 3: UI design

After wireframe approval we moved to final interface design, focused on creating an aesthetic that reflects ABYARD's prestige and technological sophistication. The design is based on clean lines and thoughtful element placement that subtly emphasize the elegance and exclusivity of the offering. Every detail — from typography to interactive elements — was carefully refined to attract attention while preserving a harmonious, balanced character.

UI design

The interface was designed so users feel guided through the site in a natural and intuitive way, without unnecessary distractions. A muted color palette and subtle animations add depth without overwhelming the key message. The result is a balanced blend of modern simplicity and refined detail, creating an impression of high quality and professionalism that perfectly reflects the premium character of the client.