Small business owners using Butternut's AI website builder found the design output too generic and the customization tools too overwhelming.
Online research shows that 38% of users abandon poorly designed websites (Zippia, 2023), which means these problems could cause users to lose potential customers.
Our users faced 2 key problems:
Low satisfaction with AI-generated design output, which felt generic and impersonal because they all looked about the same
2.0 Problem 1: Low satisfaction with design output
Lack of guidance in making design decisions, especially within the Change Theme feature
2.1 Problem 2: Lack of guidance making design decisions—unclear customization options
2.2 Problem 2: Lack of guidance making design decisions—disconnected editing tools
Curated themes for easy website design and tools for more granular editing.
1.0 Before and after comparison of the Change Theme feature in the editing menu
I tested the new design of the ‘Change Theme’ feature with 6 users, in collaboration with other designers. While we didn’t collect quantitative metrics, user feedback pointed to 3 key improvements in perception and ease of use:
User ratings for the feature increased from 2.5 to 4.5 (out of 5)
Users found the new theme presets less overwhelming
The company adopted the new theme system
Their internal designer immediately began using the system to create new themes
With 4 other designers, I conducted 12 user interviews and visual analysis of websites across 5 industries.
2.3 User Testing: Examples users gave of sites they liked
Users rated the Change Theme feature and the design output a 2.5/5.
How might we help non-designers confidently customize their websites through guided, easy-to-use design systems?
Goals
Make website customization effortless for non-designers
Avoid visual repetition across generated sites
Balance ease-of-use with deeper customization
Save time while increasing user confidence
With only 10 weeks and no engineering support, I focused on systematic improvements that were lower effort but high impact:
1: Audit Existing Themes
I generated 10 AI websites to understand why outputs looked repetitive and analyzed designs to reveal the underlying system.
3.0 Analyzing the underlying system beneath Butternut's AI-generated websites
2: Expand Themes
I added 2 new color variables to add visual variety and created preset guidelines for elements that users might not really care about defining, like type size, line height and neutral colors.
3.1 Expanding and defining theme design elements, design tokens and variables
3: Creating Curated Themes
Through the visual research we did, I came up with 3 brand personalities that capture a wide range of companies: friendly, bold, and formal. This also allowed me to identify fonts and color patterns in the different types of industries.
Then I used color palette generators to speed up my process of coming up with color palettes and edited them to fit the new variables. I combined typography pairings, color palettes, and button styles according to brand personality and tested them for accessibility.
3.2 Visual research of websites across 5 industries
3.3 Observations of common layouts and font and color patterns
4: Restructure existing change theme feature
When it came to designing the feature itself, I aimed to break down parts of the theme design to make editing easier and reduce overwhelm while supporting both quick-start and design-savvy users.
3.5 Wireframes of what the new feature can look like in the editor
Honestly, the fastest solution to visual repetition might have been to create more website section layouts for AI to use to build websites, but that would not have solved the user’s experience of customizing their site. I chose to focus on creating a scalable system and letting Butternut’s in-house UI designer take care of building new layout designs.
1️⃣ Curated Themes
Allowing users to browse through visual presets categorized by brand lets them get 70% there in designing their website without customization.
4.0 New theme presets with color and font pairings
4.1 Translating themes into a theme card component to display to the user
2️⃣ Layered Customization
Most users want quick, good-looking results. But for those who want to customize their designs, the tools are available when they need it. This reduces initial overwhelm for both types of users and matches their mental models.
Non-designer: "Just give me something that looks good' -> pick theme preset
Design-savvy user: "I want to tweak the font or color of this theme" -> expand customization
4.2 New design of the Change Theme menu in the editor
3️⃣ Systematized Design Variables
Behind the scenes, typography, color, and spacing are structured into semantic variables. This ensures AI-generated sites stay consistent and easy to update without requiring user input on every detail.
4.3 New theme system
4.4 Sample of variables applied to website
4.5 How tokens are used across variables
I created a small mini design system breakdown for engineers and the in-house designer to reference when creating new layouts or themes in the future.
4.7 Design system per theme . Variables stay the same, but colors, fonts, and button styles change
4️⃣ Maintaining Visual Consistency
Styles cascade across tools—ensuring consistency without extra effort.
4.9 Theme elements resurfaced in other editing menus
4.10 Before and after of editing tools—from disconnected to unified and consistent
⚠️ remaining challenges
If I had continued on this project, I would have measured long-term adoption through analytics and continued usability testing with more existing users. Extended testing and research would inform if users need more customization features, for example, being able to adjust text sizes or adding more text styles. In its current state, the system has been adopted company-wide and became the foundation for future visual improvements.
🤔 takeaways
Curation beats customization. More choices aren’t better—users need the right level of control at the right moment. It’s the designer’s job to structure those decisions.
Design is emotional, not technical. Understanding how users feel about design helped me frame the interface around clarity and confidence.
Listen to what users show you, not just what they say. The most revealing insights came from examples and reactions, not just feedback.
See more work
If you haven't already, check out some of the other work I've done for Butternut and other projects.
