butternut. ai / genai co-creation
butternut. ai / genai co-creation
butternut. ai / genai co-creation
butternut. ai / genai co-creation
butternut. ai / genai co-creation
TIMELINE
TIMELINE
4 months
Team of 5
4 months, team of 5
4 months
Team of 5
4 months
Team of 5
TEAM
TEAM
Client: Butternut AI
Contract, worked with the CEO, a UX manager, 4 UX Designers
Client: Butternut AI
Contract, worked with the CEO, a UX manager, 4 UX Designers
Client: Butternut AI
Contract, worked with the CEO, a UX manager, 4 UX Designers
Client: Butternut AI
Contract, worked with the CEO, a UX manager, 4 UX Designers
Impact
Impact
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
Increased website generation and editing satisfaction
Projected 50% increase in adoption rates to publish websites
PAINPOINT
PAINPOINT
PAINPOINT
Butternut AI generated websites in minutes, but 100K+ users dropped off
Butternut AI generated websites in minutes, but 100K+ users dropped off
Butternut AI generated websites in minutes, but 100K+ users dropped off
A critical usability gap: users could create sites quickly but lacked the clarity, confidence, and control needed to complete the final publish site. Redesigning an AI-powered website editor to help 300k+ small business owners publish customizable websites with ease.
A critical usability gap: users could create sites quickly but lacked the clarity, confidence, and control needed to complete the final publish site. Redesigning an AI-powered website editor to help 300k+ small business owners publish customizable websites with ease.
A critical usability gap: users could create sites quickly but lacked the clarity, confidence, and control needed to complete the final publish site. Redesigning an AI-powered website editor to help 300k+ small business owners publish customizable websites with ease.
why? (Usability testing + Insights)
why? (Usability testing + Insights)
why? (Usability testing + Insights)
"I love generating the website but it's overwhelming"
"I love generating the website but it's overwhelming"
"I love generating the website but it's overwhelming"
Butternut AI needed
Butternut AI needed
Butternut AI needed
In collaboration with product and dev teams, we prioritized on designing workflows and features to help SMBs discover the GenAI tools available on Butternut AI's editor, streamline editor features and build a scalable design system.
In collaboration with product and dev teams, we prioritized on designing workflows and features to help SMBs discover the GenAI tools available on Butternut AI's editor, streamline editor features and build a scalable design system.
In collaboration with product and dev teams, we prioritized on designing workflows and features to help SMBs discover the GenAI tools available on Butternut AI's editor, streamline editor features and build a scalable design system.
how we did it
how we did it
how we did it
Prototyping - test - repeat (with SMBs and Butternut AI team)
Prototyping - test - repeat (with SMBs and Butternut AI team)
Prototyping - test - repeat (with SMBs and Butternut AI team)
where we landed
where we landed
where we landed
Clear entry points for editing (text, images, colors, layouts)
Clear entry points for editing (text, images, colors, layouts)
Clear entry points for editing (text, images, colors, layouts)
Nudges and examples to give SMBs an idea about what to expect
Nudges and examples to give SMBs an idea about what to expect
Nudges and examples to give SMBs an idea about what to expect
BEFORE
BEFORE
AFTER
AFTER
A “quick-publish” path ensuring sites look professional even with minimal edits.
A “quick-publish” path ensuring sites look professional even with minimal edits.
A “quick-publish” path ensuring sites look professional even with minimal edits.
design system
design system
design system
Inconsistent components, patterns, and typography made the editor difficult to navigate. During the redesign, we simultaneously built a design system to establish visual and interaction consistency.
Inconsistent components, patterns, and typography made the editor difficult to navigate. During the redesign, we simultaneously built a design system to establish visual and interaction consistency.
Inconsistent components, patterns, and typography made the editor difficult to navigate. During the redesign, we simultaneously built a design system to establish visual and interaction consistency.
design decisions
design decisions
design decisions
What you prompt may not be exactly what you get
What you prompt may not be exactly what you get
What you prompt may not be exactly what you get
Unlike WYSIWYG interfaces, a single prompt in GenAI interfaces cannot always generate an output that meets 100% of user's expectations. This meant the next step, in editing required clear scaffolding to help users make quick edits and move to publishing stage.
Unlike WYSIWYG interfaces, a single prompt in GenAI interfaces cannot always generate an output that meets 100% of user's expectations. This meant the next step, in editing required clear scaffolding to help users make quick edits and move to publishing stage.
Unlike WYSIWYG interfaces, a single prompt in GenAI interfaces cannot always generate an output that meets 100% of user's expectations. This meant the next step, in editing required clear scaffolding to help users make quick edits and move to publishing stage.
…but we can add theme presets to help users decide quickly while editing
…but we can add theme presets to help users decide quickly while editing
…but we can add theme presets to help users decide quickly while editing
How do we offer a range of editing options without increasing cognitive load?
How do we offer a range of editing options without increasing cognitive load?
How do we offer a range of editing options without increasing cognitive load?
Introduced a hierarchy of editing tools with universal actions (editing tools everyone uses) and contextual actions (for editing the details)
Introduced a hierarchy of editing tools with universal actions (editing tools everyone uses) and contextual actions (for editing the details)
Introduced a hierarchy of editing tools with universal actions (editing tools everyone uses) and contextual actions (for editing the details)
impact
impact
impact
Post-redesign usability testing showed a 59% increase in user satisfaction
Post-redesign usability testing showed a 59% increase in user satisfaction
Post-redesign usability testing showed a 59% increase in user 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).
