Projects
Project Overview
Sweet Alchemy is a local ice cream shop with locations here in the U-District, Ballard, Capitol Hill, and another location opening soon for Bellevue in June 2023. We focused our work on the desktop website experience and partnered directly with Sweet Alchemy's owner (Lois) throughout the user-centered design process.
Project Type
HCDE 537 course project with real clients,
website and brand redesign
Team
Yitong Du, Alice Pan, Vaishnavi Gaikwad,
Cheewen Jing,
Joseph Carrillo
Responsibility
User Research,
UI & UX Design, Persona & Information Architecture, Prototyping, Usability testing
Duration
Mar 2023 - May 2023
Operation Issues & Design Opportunities
Learn about pinpoints from the operation team
• Lois and her staff expressed some concern about the
“Cake Order” process, as they were continuing to see some confusion from customers.
• 12 user interviews conducted during the initial stages indicated people wanted to see more details and real photos of the ice cream flavors and ice cream cakes.
• The website has an encouragingly large number of unique visitors per year (48K+), but the funnel of users visiting other pages on the website had a very steep drop-off.
• Screenshot of the current Sweet Alchemy find us page
• Screenshot of the current Sweet Alchemy cake order page
Issues &
Opportunities:
Lois and her staff expressed some concern about the “Cake Order” process, as they were continuing to see some confusion from customers.
User interviews conducted during the initial stages indicated people wanted to see more pictures of the ice cream flavors and ice cream cakes.
The website has an encouragingly large number of unique visitors per year (48K+), but the funnel of users visiting other pages on the website had a very steep drop-off.
Objectives & Goals Defining
Based on the research findings, we created the three key personas to visualize
what we learned from the interviews:
Aligned Personas
Persona 1:
Ice Cream Ordering
Persona 2:
Website Cake Ordering
Persona 3:
Event Managing / Catering Order
Card Sorting
Completed with Optimal Sort App
33 participants (14 completed, 19 didn't complete the full sort).
Affinity diagram
Similarity matrix (from Optimal Sort)
Dendrogram (from Optimal Sort)
3D Cluster View (from Optimal Sort)
Information Architecture
Clear IA for easy navigation
Enough information before sending personas off to online shopfront
Establish brand awareness
Sketching Iteration
Brainstorming Sketches
The main features included - Clear nav bar, CTA’s on the home page and order page,
and filters on product pages.
Web Writing and Design System
Improved accessibility, lower cognitive load, and easy navigation were key to improving the website.
Design Results
Compare before & after key screens and highlight final design solutions.
List of final deliverables that would hand off to the client.
Reflection & Next Steps
Reflection
Card Sorting
We used labels in question-based format, which resulted in many participants categorizing questions into the FAQs group.
Next Time
Use categories derived directly from the website, labeling with different types of languages and phrases.
More Testings
Usability testing with 6 participants during mid-fi to high-fi.
Next Time
Multiple usability testings throughout the process: main navigation system; A/B testing using different UIs.
Next Steps
Design Hand-off
Final Deliverables to the client:
Hi-fidelity Figma Prototype
Key Screens
Pop-up notice and form screens
Web Design System
User Research Report and Other Design Process Documents
The design team continue providing design support and communication with the development team to make sure final launch and tracking the viewing and sales data to measure the design impacts to the business.