Systematized Website Themes, Less Design Stress
Empowering small business owners with designer-curated themes to create beautiful websites
I redesigned Butternut's theme system to provide curated presets that remove decision paralysis while offering deeper control for those who want it.
As a result, users reported feeling more confident in their choices and that this would save lots of time, and the company now has a scalable system for generating more themes.
1.0 Switching Themes
PROBLEM
Small business owners found their AI-generated websites "boring," but became overwhelmed when trying to customize designs themselves
Most weren't equipped to make effective design decisions.. This led to excessive time spent on minor design decisions, websites they weren't proud of, or abandonment before publishing.
Research shows 38% of people will stop interacting with a poorly designed site (Zippia, 2023), making this a business-critical issue for our users.
Highlights
1.1 Themes Showcase
1.2 Theme Customization and Presets
Client Solution
"More Typrography and Color Options, Please"
The client asked our team to make more color and typography combos, but I pushed back because this wouldn't solve the core problem users were experiencing.
Research insights
Users Can't Fully Articulate What They Want
1.3 User Research | Quotes
User feedback revealed that users don't have the design vocabulary to describe what they like.
Their examples of "clean and modern" were surprisingly different from what I expected and revealed their standards weren't actually that high, but they like having a unified brand identity, and more motion or complex section layouts
1.4 User Research | Websites Users Liked
GOALS
What We Want to Achieve
Create a system
that makes website customization effortless for non-designers
Ensure quality design
output for users every time they generate a website
Balance guided choices
with flexibility for those wanting deeper customization
Save users time
while increasing confidence in their design decisions
OPPORTUNITY
HMW help small business owners feel confident in their design decisions and be satisfied with the visual quality of their websites?
diving deep
Breaking Down & Reconstructing Themes
I first needed to understand Butternut's existing theme creation process. Without direct answers from the client, I generated multiple sites and reverse-engineered their theme system to understand what variables they were using and how those variables were being applied to the design.
1.5 Butternut Websites
1.6 Analyzing Butternut's Theme System
I systematized their approach, documenting variables and usage that could enable more design flexibility.
The priority wasn’t just to expand the system, but to clearly define the system and how it was being applied to ensure each variable had a specific purpose.
Key changes made:
Added secondary color and bg-strong variable
Defined text styles clearly
Defined a system for deriving primary-light color
Created a stylesheet for light mode and dark mode themes
1.7 Theme System Combo Exploration
1.8 New Theme System Breakdown
1.9 Theme Variables, Annotated
MEaningful Themes
Creating Curated Theme Options
The key insight that non-designers don't know what they want visually but do understand their business persona guided my solution. I created theme presets with designer-curated font pairings and color palettes tied to business personalities.
These presets eliminated decision paralysis and gave users confidence their choices would look professional and match the tone they're going for.
2.0 Theme Presets Based off Tone
I put these presets into theme cards to provide a preview of how these colors and fonts might be used on a website, so that it’s easier for users to pick.
2.1 Theme Components, Annotated
Finding balance
Enabling Detailed Customization
For users wanting more control, I designed a second layer of customization built on the preset foundation.
These advanced options remained hidden in secondary menus to avoid overwhelming others who don’t want to sweat about finer design details.
This approach also positioned the product for future expansion into the designer market, a user group that wants a lot more customization.
3.2 Theme Customization
3.3 Wireframes of Change Theme Feature
3.4 Before/After Comparison of Change Theme Feature
Tying it to the rest of the product
Helping Users Maintain Design Consistency
I also extended the new theme structure to contextual editing tools, reducing choice overload and preventing users from making inconsistent design decisions.
This ensures users only see relevant options to their brand and thus improves the overall visual quality of their site.
3.5 Current Editing Tools that Leave Room for Design Mistakes
3.6 Updated Editing Tools
Results
Increase in Confidence, Saved Time
User testing showed significant improvements in satisfaction. Users reported:
Greater confidence in their design choices
Substantial time savings in the website creation process
Appreciation for guided options that still felt personalized
The client embraced this systematized approach and immediately began building additional themes on the framework.
3.7 Themes
Learnings
Unlimited Choice isn't Always the Best
This project reinforced that effective design systems provide structured choices rather than unlimited options. For non-designer users, curation is more helpful than unguided, unlimited, customization.
Understanding how users think about design (in terms of feeling rather than technical elements) transformed my approach to the interface. Sometimes the most valuable design insights come from what users can't articulate directly.
Continue
Dive Deeper
If you're interested in learning what else I worked on in this project, continue reading part 1 or check out another project.
Simplifying Website Creation with AI
Rethinking Riffs: Smoother, Engaging Conversations
timothea shi