Butternut.AI

Butternut.AI

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.

Timeline

3 Months
2024

Team

1 Design Lead
1 Stakeholder (CEO)
5 Product Designers

Role

Product designer, UXR, Prototyping

Timeline

3 Months
2024

Team

1 Design Lead
1 Stakeholder (CEO)
5 Product Designers

Role

Product designer, UXR, Prototyping

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.

1.0 Switching Themes

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

thanks for visiting!

thanks for visiting!