Butternut AI
redesigning for simplicity, maximizing impact
TEAM
Butternut AI, Product Manager, 5 Product Designers
TOOLS & METHODS
Figma, Google Suite, Slack
DURATION
10 weeks
OVERVIEW_
What is Butternut AI?
Butternut AI is a generative AI platform that enables business owners to create their website with just a text prompt, establishing an online presence in 20 seconds.
In October, I joined a team of four Product Designers and a Product Manager to improve Butternut’s website editor, refining both the UX/UI and the visual quality of the websites it generates. While the original request was just to modernize the interface, we took the opportunity to pinpoint usability challenges and inconsistencies. This let us craft a clear, cohesive design approach that went beyond visuals to improve the overall experience.
How I added value
As Lead Product Designer, I restructured the landing page and the editor's interface to create a more intuitive, real-time editing experience by:
Created a cohesive design system from the ground up
Owned all prototyping and motion interactions across the product
Partnered with engineers to align on API decisions with the updated design
Advocated for features such as live design previews, which 80% of users highlighted as a favorite during A/B testing, and is now live on Butternut.
Figuring out the problem
Studied Butternut’s competitors
Conducted a usability audit and 15 user interviews
Gathered over 120 data points
Butternut had over 300,000 users who tried the product, but fewer than 15% of those users actually published their websites. Was it just that the websites were not modern enough? Or were there more factors preventing them from publishing?
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.
Our target users and goal
Butternut is designed for small business owners of any age who find the technical side of web development overwhelming.
Our goal was to simplify the process for everyday users unfamiliar with design terms like “border-radius,” creating a clear, approachable experience that stands out from the convoluted workflows of competitors like Squarespace and Wix.
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?
Butternut AI’s overly simplistic approach ended up limiting usability - users struggled to find basic editing tools and effectively use AI features. This led to confusion and frustration, resulting in a low user satisfaction score of 2.7 out of 5.
PROCESS_
Usability of AI
For initial website generation, Butternut went with a ChatGPT-style interface where users had a blank text box to type a singular prompt for their creation. This approach didn't work well, as creating a complete website requires structure and clear inputs, not just text. Users often didn’t know what to type, and the results usually missed the mark, leading to frustration and extra editing.
Users could easily imagine their dream website conceptually, but struggled to express it in technical terms. Although knowing web design jargon isn’t essential, providing a clearer visual preview of their prompt’s outcome would help bridge this gap. To address this, I explored various approaches for the initial website generation experience.
I added example sites to Butternut’s landing page to help users translate their vision into prompts the AI could understand. From there, users could either modify these example prompts or use them as reference points when creating their own site.
This accomplished two things:
It gave users a visual preview of the types of sites they could create with Butternut
…and clarified the kinds of prompts needed to achieve their desired results.
Another core feature at Butternut is AI Assist, a chatbot that lets users enter prompts to build and edit website sections. However, many users didn’t notice this feature, and those who did often found it confusing. Interactions felt one-sided, as AI Assist would reply “Changes Done” after users entered prompts without showing what had changed, leaving it unclear which edits were applied.
After multiple iterations, AI Assist now responds conversationally, giving real-time feedback and clear explanations of its actions. A library of prompt examples and live suggestions was also added, to guide users.
Discoverability of Tools
In the editor interface, there was a single top toolbar, but its actions changed depending on which part of the website was clicked. Other tools were scattered across the site and appeared as pop-up windows, covering the website during editing and making it hard for users to see what they were changing. This design came from the client’s desire for users to feel like they were editing directly on their website without zooming in and out of sections.
To address this, I introduced a clear separation between universal and contextual actions within the editor.
Universal tools refer to actions that affect the entire site, such as changing the theme, updating brand identity, or managing site navigation.
Contextual tools, on the other hand, are tied to specific elements like text, images, or sections. These tools will appear when a user interacts with a particular part of the site, allowing for direct, in-place editing.
The top bar was redesigned to handle site management and navigation, including accessing the home dashboard, switching projects, and publishing the site.
While we initially considered moving all editing tools to the left sidebar, the client wanted to preserve direct on-site editing. To support this, we redesigned Butternut’s on-object UIs to be draggable, enabling users to edit content in place without interrupting their workflow.
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.
