Reimagining Butternut AI’s website generation experience
Reimagining Butternut AI’s website generation experience
Reimagining Butternut AI’s website generation experience
Reimagining Butternut AI’s website generation experience
From blank page to homepage - effortless website creation
From blank page to homepage - effortless website creation
From blank page to homepage - effortless website creation
From blank page to homepage - effortless website creation
UX Design
UX Design
UX Design
Wireframes
Wireframes
Wireframes
AI website generation UX
AI website generation UX
AI website generation UX
Image generation UX
Image generation UX
Image generation UX
Design System
Design System
Design System
RAKSHA HUNGUND.
RAKSHA HUNGUND.
Role
Role
Role
Context
Context
Context
Impact
Impact
Impact
4 months
Team of 5
Lead UX Researcher and UX Designer
3 months, team of 5
4 months
Team of 5
Client: Butternut AI
Contract, worked with the CEO and a UX manager
Client: Butternut AI
Contract, worked with the CEO and a UX manager
Client: Butternut AI
Contract, worked with the CEO and a UX manager
Increased website generation and editing satisfaction
Projected 50% increase in adoption rates to publish websites
Increased website generation and editing satisfaction Projected 50% increase in adoption rates to publish websites
Background
Background
Background
Background
Background
Overwhelmed about building a website? Meet Butternut AI
Overwhelmed about building a website? Meet Butternut AI
Overwhelmed about building a website? Meet Butternut AI
Overwhelmed about building a website? Meet Butternut AI
Overwhelmed about building a website? Meet Butternut AI
Butternut AI is a generative AI platform that enables small business owners to create a website in under 20 seconds - just by using prompts. As a team of five, guided by a design lead, we collaborated closely with the CEO to conduct a usability audit and enhance both the prompt input and editor experiences
Butternut AI is a generative AI platform that enables small business owners to create a website in under 20 seconds - just by using prompts. As a team of five, guided by a design lead, we collaborated closely with the CEO to conduct a usability audit and enhance both the prompt input and editor experiences
Butternut AI is a generative AI platform that enables small business owners to create a website in under 20 seconds - just by using prompts. As a team of five, guided by a design lead, we collaborated closely with the CEO to conduct a usability audit and enhance both the prompt input and editor experiences
Butternut AI is a generative AI platform that enables small business owners to create a website in under 20 seconds - just by using prompts. As a team of five, guided by a design lead, we collaborated closely with the CEO to conduct a usability audit and enhance both the prompt input and editor experiences
Butternut AI is a generative AI platform that enables small business owners to create a website in under 20 seconds - just by using prompts. As a team of five, guided by a design lead, we collaborated closely with the CEO to conduct a usability audit and enhance both the prompt input and editor experiences
Problem
Problem
Problem
Problem
Problem
"I like the website generated, but it's not exactly what I'm looking for."
"I like the website generated, but it's not exactly what I'm looking for."
"I like the website generated, but it's not exactly what I'm looking for."
How might we enhance the Butternut AI website editor experience and usability of AI features to help business owners easily create and publish a site they love?
Opportunity
Opportunity
Opportunity
Opportunity
Opportunity
Quick website generation
Quick website generation
Users appreciated Butternut AI's speed in generating websites and valued its time-saving approach to website creation
Users appreciated Butternut AI's speed in generating websites and valued its time-saving approach to website creation
Users appreciated Butternut AI's speed in generating websites and valued its time-saving approach to website creation
Unmet website design output expectations
Unmet website design output expectations
The website generated did not entirely meet users' expectations and they blamed themselves for not crafting the "right" prompt
The website generated did not entirely meet users' expectations and they blamed themselves for not crafting the "right" prompt
The website generated did not entirely meet users' expectations and they blamed themselves for not crafting the "right" prompt
Discoverability of editor features
Discoverability of editor features
A steep learning curve in the editor made quick edits difficult.
A steep learning curve in the editor made quick edits difficult.
A steep learning curve in the editor made quick edits difficult.
who are our users?
who are our users?
who are our users?
who are our users?
who are our users?
Meet Jack, an independent electrician
Meet Jack, an independent electrician
Meet Jack, an independent electrician
"I’m not tech-savvy, but I need a website for my business to showcase my services and get more clients!"
"I’m not tech-savvy, but I need a website for my business to showcase my services and get more clients!"
"I’m not tech-savvy, but I need a website for my business to showcase my services and get more clients!"
"I’m not tech-savvy, but I need a website for my business to showcase my services and get more clients!"
Meet Luna, a freelance pianist and composer
Meet Luna, a freelance pianist and composer
Meet Luna, a freelance pianist and composer
"I want my website to reflect my unique artistic style and also showcase the many services I offer."
"I want my website to reflect my unique artistic style and also showcase the many services I offer."
"I want my website to reflect my unique artistic style and also showcase the many services I offer."
"I want my website to reflect my unique artistic style and also showcase the many services I offer."
end goal
Improve user satisfaction in final website = More websites published
Improve user satisfaction in final website = More websites published
Improve user satisfaction in final website = More websites published
Sneak Peek
Sneak Peek
Sneak Peek
Sneak Peek
Sneak Peek
Feature #1
Feature #1
Feature #1
Feature #1
Feature #1
Guiding users to their expected website with parameters & example prompts
Guiding users to their expected website with parameters & example prompts
Guiding users to their expected website with parameters & example prompts
Guiding users to their expected website with parameters & example prompts
Guiding users to their expected website with parameters & example prompts
In usability tests, 8/11 participants found their prompts too vague and felt pressured to get them right on the first try. To address this, we introduced parameters such as industry type and website language, allowing the AI to make logical adjustments. Additionally, we added opening questions and example prompts to reduce blank canvas syndrome and boost user confidence in crafting their prompts.
In usability tests, 8/11 participants found their prompts too vague and felt pressured to get them right on the first try. To address this, we introduced parameters such as industry type and website language, allowing the AI to make logical adjustments. Additionally, we added opening questions and example prompts to reduce blank canvas syndrome and boost user confidence in crafting their prompts.
In usability tests, 8/11 participants found their prompts too vague and felt pressured to get them right on the first try. To address this, we introduced parameters such as industry type and website language, allowing the AI to make logical adjustments. Additionally, we added opening questions and example prompts to reduce blank canvas syndrome and boost user confidence in crafting their prompts.
In usability tests, 8/11 participants found their prompts too vague and felt pressured to get them right on the first try. To address this, we introduced parameters such as industry type and website language, allowing the AI to make logical adjustments. Additionally, we added opening questions and example prompts to reduce blank canvas syndrome and boost user confidence in crafting their prompts.
In usability tests, 8/11 participants found their prompts too vague and felt pressured to get them right on the first try. To address this, we introduced parameters such as industry type and website language, allowing the AI to make logical adjustments.
Additionally, we added opening questions and example prompts to reduce blank canvas syndrome and boost user confidence in crafting their prompts.
Feature #2
Feature #2
Feature #2
Feature #2
Feature #2
Redesigning the editor interface into scalable universal and contextual actions
Redesigning the editor interface into scalable universal and contextual actions
Redesigning the editor interface into scalable universal and contextual actions
Redesigning the editor interface into scalable universal and contextual actions
Redesigning the editor interface into scalable universal and contextual actions
7/11 usability test participants faced a steep learning curve navigating the editor after their website was generated. They struggled with tasks like editing text, regenerating sections, and finding tools for adding social links or changing themes.
To improve this, we restructured the editor tools into a sidebar for universal actions affecting the entire site, while contextual actions, like regenerating images or sections, were placed as object-specific UI menus.
7/11 usability test participants faced a steep learning curve navigating the editor after their website was generated. They struggled with tasks like editing text, regenerating sections, and finding tools for adding social links or changing themes.
To improve this, we restructured the editor tools into a sidebar for universal actions affecting the entire site, while contextual actions, like regenerating images or sections, were placed as object-specific UI menus.
7/11 usability test participants faced a steep learning curve navigating the editor after their website was generated. They struggled with tasks like editing text, regenerating sections, and finding tools for adding social links or changing themes.
To improve this, we restructured the editor tools into a sidebar for universal actions affecting the entire site, while contextual actions, like regenerating images or sections, were placed as object-specific UI menus.
after
after
after
The redesigned editor prioritizes user workflow, first allowing broad edits like theme changes and page management via a sidebar, then refining details with on-object UI menus for text and image edits.
The redesigned editor prioritizes user workflow, first allowing broad edits like theme changes and page management via a sidebar, then refining details with on-object UI menus for text and image edits.
The redesigned editor prioritizes user workflow, first allowing broad edits like theme changes and page management via a sidebar, then refining details with on-object UI menus for text and image edits.
The redesigned editor prioritizes user workflow, first allowing broad edits like theme changes and page management via a sidebar, then refining details with on-object UI menus for text and image edits.
The redesigned editor prioritizes user workflow, first allowing broad edits like theme changes and page management via a sidebar, then refining details with on-object UI menus for text and image edits.
Before
Before
Before
The editor has a steep learning curve, with no clear indication of feature capabilities at first glance—users must hover over each option to understand its function.
Continuous throbber icon does not show status of file upload
Feature #3
Feature #3
Feature #3
Feature #3
Feature #3
Adding inline prompts in the editor to regenerate images
Adding inline prompts in the editor to regenerate images
Adding inline prompts in the editor to regenerate images
Adding inline prompts in the editor to regenerate images
Adding inline prompts in the editor to regenerate images
The varying prompt styles for specific actions, such as text and image editing, confused participants. To address this, we analyzed these interactions and introduced tone-of-text cues and inline prompts that follow a consistent UI and interaction pattern, enhancing clarity and coherence.
The varying prompt styles for specific actions, such as text and image editing, confused participants. To address this, we analyzed these interactions and introduced tone-of-text cues and inline prompts that follow a consistent UI and interaction pattern, enhancing clarity and coherence.
The varying prompt styles for specific actions, such as text and image editing, confused participants. To address this, we analyzed these interactions and introduced tone-of-text cues and inline prompts that follow a consistent UI and interaction pattern, enhancing clarity and coherence.
The varying prompt styles for specific actions, such as text and image editing, confused participants. To address this, we analyzed these interactions and introduced tone-of-text cues and inline prompts that follow a consistent UI and interaction pattern, enhancing clarity and coherence.
Feature #3.1 | regenerate background image
Feature #3.1 | regenerate background image
Feature #3.1 | regenerate background image
Feature #3.1 | regenerate background image
Feature #3.1 | regenerate background image
Feature #3.1 | regenerate text
Feature #3.1 | regenerate text
Feature #3.1 | regenerate text
Feature #3.1 | regenerate text
Feature #3.1 | regenerate text
Feature #4
Feature #4
Feature #4
Feature #4
Feature #4
Enhancing the editor's AI assist interface with conversational prompts to enhance collaboration in website editing
Enhancing the editor's AI assist interface with conversational prompts to enhance collaboration in website editing
Enhancing the editor's AI assist interface with conversational prompts to enhance collaboration in website editing
Enhancing the editor's AI assist interface with conversational prompts to enhance collaboration in website editing
Enhancing the editor's AI assist interface with conversational prompts to enhance collaboration in website editing
UX Research Process
UX Research Process
UX Research Process
UX Research Process
Usability testing with 11 testers identified issues in editor feature discoverability, inconsistencies in the editor's AI features, and design output satisfaction
Usability testing with 11 testers identified issues in editor feature discoverability, inconsistencies in the editor's AI features, and design output satisfaction
Usability testing with 11 testers identified issues in editor feature discoverability, inconsistencies in the editor's AI features, and design output satisfaction
Usability testing with 11 testers identified issues in editor feature discoverability, inconsistencies in the editor's AI features, and design output satisfaction
UX Design Process
UX Design Process
UX Design Process
UX Design Process
UX Design Process
To improve the editor and AI features, we created personas to understand user goals and redesigned the editor’s information architecture
To improve the editor and AI features, we created personas to understand user goals and redesigned the editor’s information architecture
To improve the editor and AI features, we created personas to understand user goals and redesigned the editor’s information architecture
To improve the editor and AI features, we created personas to understand user goals and redesigned the editor’s information architecture
We developed a jobs-to-be-done framework for website creation and editing, then used it to guide wireframe iterations and identify a relevant MVP editor redesign
We developed a jobs-to-be-done framework for website creation and editing, then used it to guide wireframe iterations and identify a relevant MVP editor redesign
We developed a jobs-to-be-done framework for website creation and editing, then used it to guide wireframe iterations and identify a relevant MVP editor redesign
We developed a jobs-to-be-done framework for website creation and editing, then used it to guide wireframe iterations and identify a relevant MVP editor redesign
We developed a jobs-to-be-done framework for website creation and editing, then used it to guide wireframe iterations and identify a relevant MVP editor redesign
Website generation
Change Theme
Regenerate website
Website generation
Change Theme
Regenerate website
Website generation
Change Theme
Regenerate website
Website generation
Change Theme
Regenerate website
Website generation
Change Theme
Regenerate website
Since there was no design system, we built one to resolve inconsistencies and provide a single reference for developers
Since there was no design system, we built one to resolve inconsistencies and provide a single reference for developers
Since there was no design system, we built one to resolve inconsistencies and provide a single reference for developers
Since there was no design system, we built one to resolve inconsistencies and provide a single reference for developers
Since there was no design system, we built one to resolve inconsistencies and provide a single reference for developers
Foundation
Basic Controls
Components
Foundation
Basic Controls
Components
Foundation
Basic Controls
Components
Foundation
Basic Controls
Components
Foundation
Basic Controls
Components
Design Recommendations
Design Recommendations
Design Recommendations
Design Recommendations
Design Recommendations
AI FEATURE INCONSISTENCIES
AI FEATURE INCONSISTENCIES
AI FEATURE INCONSISTENCIES
AI FEATURE INCONSISTENCIES
AI FEATURE INCONSISTENCIES
8/11 usability testing participants found the entry prompt vague with no clear guidance on input, so we added parameters and example prompts for clarity
8/11 usability testing participants found the entry prompt vague with no clear guidance on input, so we added parameters and example prompts for clarity
8/11 usability testing participants found the entry prompt vague with no clear guidance on input, so we added parameters and example prompts for clarity
8/11 usability testing participants found the entry prompt vague with no clear guidance on input, so we added parameters and example prompts for clarity
8/11 usability testing participants found the entry prompt vague with no clear guidance on input, so we added parameters and example prompts for clarity
What should I type for the prompt?
What should I type for the prompt?
What should I type for the prompt?
The examples help me understand what information I need to provide
The examples help me understand what information I need to provide
The examples help me understand what information I need to provide
editor feature discoverability
editor feature discoverability
editor feature discoverability
editor feature discoverability
editor feature discoverability
Features on the editor were hard to find, so we restructured the UI with a sidebar for universal editing and contextual on-object menus
Features on the editor were hard to find, so we restructured the UI with a sidebar for universal editing and contextual on-object menus
Features on the editor were hard to find, so we restructured the UI with a sidebar for universal editing and contextual on-object menus
Features on the editor were hard to find, so we restructured the UI with a sidebar for universal editing and contextual on-object menus
Features on the editor were hard to find, so we restructured the UI with a sidebar for universal editing and contextual on-object menus
There is a lot happening here, what do I begin editing?
I can use the sidebar options to make quick edits for the entire website
Bonus: Hovering over sections, images, and text reveals editing options
DESIGN OUTPUT SATISFACTION
DESIGN OUTPUT SATISFACTION
DESIGN OUTPUT SATISFACTION
DESIGN OUTPUT SATISFACTION
DESIGN OUTPUT SATISFACTION
Enhancing theme selection and design satisfaction with a sophisticated theme development and AI assist
Enhancing theme selection and design satisfaction with a sophisticated theme development and AI assist
Enhancing theme selection and design satisfaction with a sophisticated theme development and AI assist
Enhancing theme selection and design satisfaction with a sophisticated theme development and AI assist
Enhancing theme selection and design satisfaction with a sophisticated theme development and AI assist
I like the website, but I want to experiment with other colors
I like the website, but I want to experiment with other colors
Netflix manager: 10/50 files are .mp3; resubmit all as .mp4
The sidebar theme option lets me easily pick a style: formal, friendly, etc.
The sidebar theme option lets me easily pick a style: formal, friendly, etc.
Impact
Impact
Impact
Impact
Impact
50%
50%
50%
50%
adoption rate
adoption rate
adoption rate
adoption rate
With a projected 50% increase in adoption rates, approximately 300k of Butternut AI users and eventually 3.16 million small business owners in the U.S. could start publishing websites using Butternut AI.
With a projected 50% increase in adoption rates, approximately 300k of Butternut AI users and eventually 3.16 million small business owners in the U.S. could start publishing websites using Butternut AI.
60%
60%
60%
60%
editor design satisfaction
editor design satisfaction
editor design satisfaction
editor design satisfaction
We conducted another usability test with 6 participants, and the redesign's overall rating improved from 2.7/5 to 4.3/5. Key features received high satisfaction scores: initial website generation (4.1/5), sidebar with universal actions (4.8/5), and image and text generation (4.5/5).
We conducted another usability test with 6 participants, and the redesign's overall rating improved from 2.7/5 to 4.3/5. Key features received high satisfaction scores: initial website generation (4.1/5), sidebar with universal actions (4.8/5), and image and text generation (4.5/5).
We conducted another usability test with 6 participants, and the redesign's overall rating improved from 2.7/5 to 4.3/5. Key features received high satisfaction scores: initial website generation (4.1/5), sidebar with universal actions (4.8/5), and image and text generation (4.5/5).
We conducted another usability test with 6 participants, and the redesign's overall rating improved from 2.7/5 to 4.3/5. Key features received high satisfaction scores: initial website generation (4.1/5), sidebar with universal actions (4.8/5), and image and text generation (4.5/5).
Reflection
Reflection
Reflection
Reflection
Reflection
UX principles for AI features
UX principles for AI features
UX principles for AI features
UX principles for AI features
Uncovering the role of UX in enterprise applications
This project deepened my understanding of pattern analysis and AI feature design. Exploring declarative controls and mapping user-AI assist flows enabled me to visualize concepts and translate them into wireframes.
This project deepened my understanding of pattern analysis and AI feature design. Exploring declarative controls and mapping user-AI assist flows enabled me to visualize concepts and translate them into wireframes.
This project deepened my understanding of pattern analysis and AI feature design. Exploring declarative controls and mapping user-AI assist flows enabled me to visualize concepts and translate them into wireframes.
This project deepened my understanding of pattern analysis and AI feature design. Exploring declarative controls and mapping user-AI assist flows enabled me to visualize concepts and translate them into wireframes.
Balancing user and stakeholder needs
Balancing user and stakeholder needs
Balancing user and stakeholder needs
Balancing user and stakeholder needs
Balancing user and stakeholder needs
Collaborating with the client provided insights into balancing user and stakeholder needs. Applying JTBD frameworks, crawl-walk-run approaches, and MVP vs. North Star strategies helped me consider both feasibility and usability in design decisions
Collaborating with the client provided insights into balancing user and stakeholder needs. Applying JTBD frameworks, crawl-walk-run approaches, and MVP vs. North Star strategies helped me consider both feasibility and usability in design decisions
Collaborating with the client provided insights into balancing user and stakeholder needs. Applying JTBD frameworks, crawl-walk-run approaches, and MVP vs. North Star strategies helped me consider both feasibility and usability in design decisions
Collaborating with the client provided insights into balancing user and stakeholder needs. Applying JTBD frameworks, crawl-walk-run approaches, and MVP vs. North Star strategies helped me consider both feasibility and usability in design decisions
Next steps
Next steps
Next steps
Next steps
Next steps
Feedback from the second round of usability testing and the CEO was encouraging, with the CEO looking forward to launching the redesign updates in 2025. With more time, we would have also focused on enhancing the visual design of both the editor and the website.
Feedback from the second round of usability testing and the CEO was encouraging, with the CEO looking forward to launching the redesign updates in 2025. With more time, we would have also focused on enhancing the visual design of both the editor and the website.
Feedback from the second round of usability testing and the CEO was encouraging, with the CEO looking forward to launching the redesign updates in 2025. With more time, we would have also focused on enhancing the visual design of both the editor and the website.
Feedback from the second round of usability testing and the CEO was encouraging, with the CEO looking forward to launching the redesign updates in 2025. With more time, we would have also focused on enhancing the visual design of both the editor and the website.
