Company
Durable
Role
Senior Product Designer
Project type
Design System
Timeline
3 Months
Live version
https://durable.co
The challenge
Create a global system for the AI website builder. When the user generates a website using Durable, they provide a couple of pieces of information that allow us to compile a prompt and create a summary for them. Based on this summary, we chose a template related to their business type, photos and colour palette.
After the website has been generated, we allow the users to swap sections, add sections, and customize their website to fit their business needs.
Our biggest challenge was to create a system of sections where every single section could match well with the others without look "off".
My role in this project was to understand our current system, expand, add scalability and create a global design system.
Discovery & Insights
As a UX Designer dedicated to creating seamless and user-friendly interfaces, I began by carefully identifying all potential breakpoints during the initial phase of our responsive design process. While many projects tend to focus primarily on the major breakpoints, my approach emphasizes thoroughness to ensure that the section layout remains visually consistent and functionally effective across every screen size, from large desktop monitors to small mobile devices.
Following this, I proceeded to rigorously test container sizes at each identified breakpoint, observing how the content and components adapt to different dimensions. To enhance the overall user experience, I applied varying padding strategies at each stage, deliberately increasing white space where needed to improve readability and reduce clutter.
This meticulous process helps ensure that users have a smooth, engaging experience regardless of how they access the site, and it aligns with our goal of delivering intuitive, accessible designs that meet diverse needs.
Before diving into design, we decided to visit our competitors to see how they structure their sections and what types of sections they include. We researched Squarespace, Wix, 10Web, and a few other tools. We selected tools that both use and do not use AI to generate websites. At that time, AI was not our primary focus.
Additionally, we gathered the team for a workshop to discuss what they would like to see in our customers' websites, what questions customers were asking, and what their needs were.
As a UX designer, I initiated a collaborative exercise with the team to gather valuable insights for our user experience development process. I asked the team to review and favorite a select few references that I had pre-curated, ensuring that these examples align with our project goals.
Additionally, I encouraged them to contribute other sections or examples they find appealing or inspiring from various sources on the internet. The primary objective of this exercise was to gain a deeper understanding of their perspectives on design structure, visual appeal, and overall user engagement. By analyzing their feedback, I aimed to identify visual and structural elements that resonate with our target audience, particularly from the standpoint of our Customer Service (CS) team.
This collaborative approach helps us ensure that our design enhancements are aligned with both user expectations and stakeholder insights, ultimately aiming to improve our product’s usability and appeal.
Moving to Design
I started by designing the banners first because they are the most impactful element on the website. Since they are usually the first thing visitors see when the site is generated for the customer, I focused on them. I created 10 new banner designs with over 30 variations. The main challenge was ensuring these new banners aligned with the existing system and blended well with other sections. We had to test their appearance alongside the other parts of the website builder to ensure that if an existing user wanted to update their hero image to the new design, it would look natural.
Customization System
To support a flexible and scalable design system across the site builder, we introduced a layered customization model for sections, especially banners. This visual showcases how each section can adapt with or without imagery, while maintaining consistent hierarchy and readability.
The image breaks down the visual stack of a section into individual layers:
Background image (optional)
Color overlay, which matches the section background from the chosen color palette
Fade to ensure text legibility and smooth transition to foreground elements
Foreground elements like headlines, text, and buttons
Text color and accent color dynamically applied based on theme settings
This system allows users to easily swap backgrounds, change colors, or remove images entirely without compromising on clarity or visual consistency. It also ensures accessibility by maintaining sufficient contrast in all states.
By modularizing these elements, we gave users creative freedom without sacrificing structure a key principle in building durable and intuitive design experiences.
Illustrations
When users add a new section to their site, they are presented with a grid of visual thumbnails representing different types of content such as banners, testimonials, contact forms, and feature lists. These illustrations serve as a quick preview to help users choose the right layout for their needs.
In the early stages, the initial illustrations worked well since the number of sections was limited. However, as we expanded the library and introduced more variations, users began to experience friction. It became harder to distinguish between similar layouts, leading to back and forth swapping and unnecessary exploration.
To solve this, we redesigned the thumbnails with a higher level of fidelity. Instead of abstract shapes, we introduced more representative visual cues that reflect the structure and purpose of each section. The goal was to help users identify the right layout at a glance, reduce cognitive load, and streamline the creation flow.
This small improvement had a big impact on usability, making the growing section library easier to navigate while still feeling cohesive and consistent with the rest of the product.
Design system documentation
To ensure consistency and scalability across the site builder, I defined a simple and flexible design foundation. I chose clean typography, a neutral and indigo color palette, and clear UI elements that can be reused across different sections. These decisions made it easier to create new layouts without starting from scratch each time.
When a website is generated, it applies a custom theme with different fonts, colors, and button styles. However, the core structure stays the same. Spacing, sizing, and hierarchy are preserved to keep everything visually aligned and easy to maintain.
The type system is based on Inter, chosen for its clarity and versatility across screen sizes. The color palette is built on neutral and indigo tones, offering enough contrast while maintaining a modern and approachable look. Button components follow a consistent structure, with support for text, icons, and different visual states depending on the use case.
By keeping the system simple and adaptable, it became much easier to scale the product while offering creative flexibility to users.
Spacing system
To maintain rhythm and visual consistency across the site builder, I established a responsive spacing system based on a scalable set of values. These values are used for gaps between elements as well as top and bottom padding within key sections like headers and banners.
The gap system follows a numeric scale inspired by Tailwind's spacing tokens, ranging from 0 to 96 pixels. These values are implemented in both the codebase and Figma as variables, making it easy for designers and developers to stay aligned.
For vertical spacing, header and banner sections use defined presets (small, medium, and large) that adapt across breakpoints. This ensures that content always breathes properly on both mobile and desktop views, while giving us enough flexibility to adjust based on layout needs.
All spacing values are synced with Figma variables, which allowed the team to prototype and hand off components without guesswork or custom overrides. This setup gave us structure without limiting creativity, and helped keep all sections aligned no matter how they were configured.
Variables
I have meticulously developed all sections to be fully customizable through the integration of Figma variables. This approach streamlines the process of adjusting colours, typography, and spacing, enabling designers and developers to effortlessly tailor the design for both mobile and desktop environments. By implementing this level of flexibility, we facilitate a more efficient workflow, making it easier for the team to preview and evaluate the visual and functional aspects of the interface across different devices and modes. This not only enhances collaboration among team members but also significantly reduces potential issues related to accessibility, ensuring that our design solutions are inclusive and user-friendly for a diverse audience.
