Butternut AI
Team
Tools
Role
Duration
redesigning simplicity, achieving impact without compromise
What is Butternut AI?
Butternut AI is a generative AI platform that brings a website to life in 20 seconds — with just a text prompt. Small business owners can now quickly and easily establish an online presence.
Client's request
The client wanted us to bring a more polished, modern feel to Butternut’s editor and the websites it generates. This request was quite general, so my team and I defined the problem in more specific terms.
Understanding the user perspective
Butternut had over 300,000 users who tried the product, but fewer than 15% of those users actually published their websites. Is it just that the websites are not modern enough? Or are there more factors preventing them from publishing?
We conducted a usability audit, gathered over 120 data points, studied Butternut’s competitors, and talked to 15 users to find out what was stopping them from achieving their dream website.
It was quickly identified that Butternut's editing interface had poor feature discoverability, with users struggling to locate the tools they needed. Additionally, many editing tools had inconsistent behaviors, with some functioning as popups that obstructed the view and interaction with the editor.
Another significant roadblock users faced was Butternut's AI capabilities. We found that some prompts required full sentences, while others needed keywords or comments, with no clear guidance on what type of input was needed. This inconsistency led users to rethink how to write their prompts each time they switched between tools. Additionally, the AI's performance was unpredictable, and the required prompts for certain actions were unclear.
Reframing the problem — How Might We…
improve the website editor experience and usability of AI to help non-technical business owners effortlessly and confidently design a website that they're proud to publish?
PROCESS _
Usability of AI
Regardless of an AI tool’s capabilities, a poorly written prompt will lead to poor results. Through several one-hour usability testing interviews on Google Meet, I found that users struggled with web design terminology and knowing how much detail to include in their prompts to effectively guide the AI.
One specific example of this was the initial site generation.
While they could easily imagine their dream website in conceptual terms, they found it challenging to express it using technical language. Words like 'cards,' 'columns,' and 'border-radius' didn’t come naturally to them. Instead, they would ask questions like, "Can you put these in one line?" or "Can you make the corners a little rounder?" While it's not essential for users to know these web design terms, providing a clearer visual preview of their prompt's outcome would be helpful.
To improve clarity, we added example sites to Butternut’s landing page. From there, users can either modify these example prompts or use them as reference points to help create their site.
Doing this accomplished 2 things: it gave users a visual preview of what sites are possible to create with Butternut and what kind of prompts are needed to get their desired end output.
Another one of Butternut’s core features is AI Assist, a chatbot where users can enter prompts to build and edit sections for their website. Previously it felt like a one-sided conversation - for example, after every prompt execution, AI Assist would respond back with “Done.”
After multiple iterations, we designed AI Assist to respond conversationally, giving real-time feedback and clear explanations of its actions. We also added a library of prompt examples and live suggestions, so that users don’t always have to know the right thing to say.
OUTCOME _
How did we measure up?
Many of the changes we made are still in development so we don’t have specific metrics to share currently. However, as mentioned before, the usability tests we ran on the new designs indicated positive results.
The final rating of our designs was 4.3 out of 5, which is a good improvement from 2.7 from our first user test.
Beyond the product itself, my team and I are most excited about the impact on small business owners. One study in 2023 said that 23.5% of small business owners don’t have a website but they want one. We hope that Butternut can be the perfect tool for them to get a site up quickly, save money, and bring in more revenue.
Another way we made an impact on the Butternut team was by creating and refining their design system from the ground up. At the start of the project, we realized that no formal design system existed—it was all stored in one designer’s mind.
To address this, we identified inconsistencies across the product’s UI, streamlined where possible, and meticulously documented everything. This can now serve as the single source of truth for both engineers and designers on the team in the long term.
Next steps and closing thoughts
Looking ahead, my team and I would like to explore new ways to expand AI Assist capabilities and introduce features that would further streamline the editing process for users. Our goal was to enhance both efficiency and intuitiveness, making AI-driven assistance feel more seamless and responsive. Throughout the project, we focused on refining the designs of core editing tools—updating them to align with the new design system we created, while improving usability. By creating a more cohesive and user-friendly experience, we aimed to empower users to work more efficiently and creatively within the platform.
OTHER WORK _
