Butternut
AI Website Builder for Non-Technical Users
TL;DR What did I do?
Transformed a vague "make it modern" brief into systematic UX improvements that increased user satisfaction by 32% through research-driven design strategy. A strategic redesign that turned AI website building from frustrating to intuitive by addressing fundamental usability challenges through experimental design approaches. → Systematic user research & competitive analysis → AI usability experimentation & testing → Tool organization framework development → Comprehensive design system creation
Background
Butternut had created an incredible AI-powered website builder that could generate complete websites in 20 seconds from a single prompt. The technology was impressive with AI-generated text, images, and design all delivered incredibly fast. But there was a problem: users weren't publishing their websites.
The client approached me with a broad brief: "Can you make our product feel more modern?" That was literally it. No specific problems, no user complaints, no business metrics, just a vague feeling that something needed to change.
The Real Challenge
Rather than jumping straight into visual updates, I knew we needed to understand what was actually preventing users from publishing their websites.
I proposed starting with research to identify the real problems: "Before we make anything more modern, let's understand what specific challenges users are facing and turn this into actionable design improvements."
Diving Into Research
Instead of jumping straight to solutions, we went directly to users. The research strategy included analyzing 7 competitors, conducting 12 user interviews, performing a complete usability audit, and synthesizing over 120 data points to understand what was happening.
The central question became: "What is stopping users from achieving their dream website?"
What I Discovered
The research revealed three critical problems that had nothing to do with visual modernization:
AI Usability Crisis Users couldn't communicate effectively with AI tools due to inconsistent input requirements and lack of guidance. They'd say "put them in one line" when they meant "arrange in single row."
Tool Discoverability Breakdown Editing tools were scattered and unlabeled, creating an "Easter egg hunt" experience that frustrated users trying to customize their websites.
Design Output Dissatisfaction Limited customization options led to repetitive, generic-feeling websites that users weren't proud to publish.
"I don't know how much information I'm supposed to put in there versus how much I'm not supposed to put in there" User feedback on AI prompts
Reframing the Challenge
From a business perspective, the real goal became clear: improve user satisfaction with their final websites so more people actually publish them. Published websites equal paying customers.
This reframed the challenge: "How might we improve the website editor experience and AI usability to help non-technical business owners effortlessly design a website they're proud to publish?"
The Experimental Approach
AI Usability Solutions
Three different approaches were tested for AI interaction:
Quiz approach: Structured questions guiding users step by step
Chatbot approach: Conversational AI with follow-up questions
Templated prompts: Example-driven learning with pre-built prompts
Testing showed templated prompts had the highest success rate for website satisfaction, even though it required more user engagement upfront.
Show Image
Tool Organization Framework
A crawl-walk-run testing methodology was developed:
Crawl: Simple toolbar reorganization (safe, minimal impact)
Walk: New sidebar with contextual tools (moderate improvement)
Run: Universal/contextual framework (optimal user experience)
The data clearly showed the "run" approach created the most intuitive experience, making it the right choice despite being a bigger change.
Universal tools handle website-wide editing like themes and branding, moved to a dedicated left sidebar.
Contextual tools handle specific elements like text and images, redesigned as draggable interfaces that appear when selecting elements.
Show Image
Design System Creation
The theme structure was completely rebuilt using scalable design principles. This included curated theme collections with professional color and font pairings that users could browse as cards, while maintaining customization flexibility for power users.
Strategic Impact
The systematic, user-centered approach delivered measurable transformation:
User satisfaction improved by 32% (from 54% to 86%)
Created first comprehensive design system providing sustainable foundation
Established experimental frameworks that continue guiding product development
But beyond metrics, several strategic frameworks emerged that transformed how Butternut approaches UX:
The Experimental AI Framework became their methodology for evaluating new AI features through systematic testing and data-driven selection.
The Universal/Contextual Tool Organization provided a scalable structure for adding features without overwhelming users.
The Strategic Design System solved design quality problems while maintaining accessibility for non-technical users.
Takeaways
This project shifted my approach to design challenges. The most valuable contribution wasn't just executing requirements but using systematic experimentation to guide strategic decisions.
What started as a "make it modern" request became an opportunity to demonstrate how user research can transform business outcomes. The frameworks built during this project continue to guide Butternut's development, showing that thoughtful design strategy extends beyond individual deliverables.
