Butternut.AI
Designing Transparent, Intuitive AI Interactions for AI-Generated Website Creation
Users struggled with communication, consistency, and control with AI tools in Butternut’s editor
Communication gap: Users didn’t know how to talk to the AI, leading to frustration and confusion about how to phrase prompts
Inconsistent AI tools: Different tools in the editor expected different inputs with no clear guidance and had misleading labels
Limited control: Users couldn’t manually edit sections generated by the AI Assist feature, leaving them feeling like they were no longer in control and unsure about how to customize their designs fully.
Unified, consistent AI tools that function as a design collaborator
1.0 Final designs
Lower barrier prompting
Users now have sample prompts to guide their interactions, reducing confusion and making the AI more approachable.
Consistent prompt interactions
Clear, consistent labeling and interactions helped users feel more comfortable and confident when using the AI tools.
Specific tools for common actions
Action-specific buttons streamlined workflows by reducing decision fatigue and speeding up the editing process.
Tools and terms need to be clear for users to know how to interact with them
Through a UX audit of the product and moderated usability tests with 12 small business owners, I discovered the following pain points.
Initial Generation
Users were unsure about the level of detail to include in their prompts. The product landing page lacked example websites and clear input guidance, making it difficult for users to envision what their final website would look like.
2.0 Users had different expectations when writing their first prompt to generate their site
Regenerate
Multiple features include a "regenerate" button, but it's unclear what changes this actually makes to the output. Users often find that regenerated content is nearly identical to the original, creating confusion about the button's purpose.
2.1 Regenerate button's function is unclear
Regenerate with ________
Other features ask for additional input but are inconsistently labelled despite functioning identically. Some labels also misrepresent what the technology actually does. Combined, this leads to false expectations and confusion.
2.2 Many features with "Regenerate with _____" function the same way but have different labels
Add section with AI Assist (Butternut’s flagship AI feature)
The chatbot merely said “done” without offering explanations or feedback on the task completed. Users were also frustrated that they couldn't edit these sections manually and instead had to make all changes through the chatbot interface.
2.3 AI Assist chatbot didn't communicate with the user
Users expect consistent AI behavior and clear input steps to feel confident in editing their site.
Competitors have already successfully integrated AI to generate and edit websites…
However, most of them target technical users, while Butternut focuses on non-technical small business owners who need AI-driven simplicity and high-quality design.
3.0 Competitor matrix
The challenge lies in balancing automation with customization—users won’t benefit from a tool that generates low-quality results. For Butternut to replace designers and developers, it must act as a partner that helps users achieve their desired outcomes, not just a generator.
These insights led to my problem statement:
How might we create consistent AI tools that users can easily understand and use as partners in their design process?
To address these issues, I focused on the following design goals:
Help users understand how to interact with the AI and set clear expectations for what the AI could do.
Create consistency across tools so users could predict outcomes and feel more confident in using the system.
Give users more control and co-creation opportunities while respecting the AI’s efficiency.
Reduce user anxiety when starting with prompts.
Grouping tools by type of input helped me design consistent solutions
I categorized tools into long-form prompts (initial website generation), short-form prompts (editing tools), and conversational AI (AI Assist) to design tailored solutions for each interaction.
4.0 Long-form prompt features
4.1 Short-form prompt features
4.2 Conversational prompt feature
Exploring Solutions
After establishing this, I began exploring and designing solutions for each group. Some required more visual solutions, other solutions relied heavily on copywriting.
4.3 Wireframe flow of initial website generation: Bringing AI Assist into the process from the beginning
4.4 Wireframe of image editing tool: simplifying the options to accurately convey it's functionality
4.5 Wireframe of text editing tool: making common actions just 1 click away
Addressing certain pain points would require heavy tech lifts that exceed our project timeline
Through conversing with the CEO through some of these initial design options, I received the following feedback and learned about some key technical constraints:
Initial Generation
She emphasized maintaining the value proposition of generating a website in 20 seconds, as users highly valued this quick turnaround. My initial wireframes would have extended this timeline significantly. I returned to the drawing board to develop an approach that preserved the speed of the original flow while addressing usability concerns.
5.0 Feedback on initial generation flow
Image Editing
The CEO said she did not want to implement many changes to the image feature because they said they plan to create their own native AI image generator eventually. I ended up keeping the options mostly the same but revised the visual design to match the rest of the new editor UI we were working on.
5.0 Feedback on image editing
AI Assist
AI Assist was built using different technology than the rest of the product, making manual editing impossible in the current version. All sections generated through this feature must be edited using the chatbot.
Through our user research, the CEO became aware of these pain points and wanted us to continue designing improvements as a future goal. Our findings convinced her to make addressing this technical constraint a top priority on their upcoming roadmap.
1️⃣ Initial Generation: Prompt and Visual Examples
Introduced visual prompt examples to guide users in phrasing requests, reducing confusion and increasing engagement.
During user testing, users saw the examples and surprisingly preferred to start their process with the blank form. Instead of previously being unsure about how much detail to put, users now preferred this option and felt comfortable entering a prompt.
6.0 Final design of landing page
6.1 Landing page before/after
2️⃣ Conversational, Consistent AI Tools & Ask AI Feature
I framed actions that required input from the user under “✨Ask AI” and added questions as placeholders so that users just needed to answer the question to input their requests for both text and image tasks.
Users now felt confident interacting with the AI tools, knowing that each action would have consistent results. The conversational tone helped demystify the AI, positioning it as a design ally rather than an automated tool.
6.2 AI Assist before/after
3️⃣ Replacing Generic Language with Clear Actions
Replaced vague terms like 'Regenerate' with specific actions ('Rearrange layout,' 'Swap image') to better represent what “regenerate” was doing in that specific context. This ensured users understood what each action would do and what tools are available to them.
Users no longer expressed confusion about what tools were available to them, which demonstrated that clear labelling was successful in differentiating actions.
6.3 Labels before/after
✅ what improved
The redesign improved usability and users reported improved confidence in using these tools in our final usability test with 6 new users. However, more thorough and extensive testing, especially with Butternut’s current users, would be needed to measure the impact of these new designs. If I were able to, specific metrics I would track are:
usage frequency, NPS, qualitative feedback on AI tools and satisfaction of output, and user dropoff rate during website editing
⚠️ remaining challenges
Some users still felt frustrated by the lack of manual control over AI-generated sections.
The new initial generation flow also caused mixed reactions, as some users wanted to be able to give more input on the design of the site before generating. Users felt that there’s too much information to cover in the small prompt window they are given, and that since the generation was so easy, more of their work begins after the initial generation.
🤔 takeaways
This project showed me that effective AI design should empower users by being transparent, consistent, and collaborative. By focusing on transparency through language, consistent design patterns, we were able to create an AI tool that felt more like a collaborative partner than a mysterious black box. This approach helped users feel more confident in using the AI, making it an easier, more enjoyable experience overall.
See more work
I worked on multiple areas for this project over the course of the 10 weeks , so you can find those stories below.
