Website Redesign
What is Sweet Alchemy? 🍦
Sweet Alchemy is a local ice cream shop in Seattle area dedicated to producing small batch, organic, and locally sourced ice cream. On their website, customers can conveniently order from a diverse selection of ice creams, ice cream cakes, and baked goods. The shop distinguishes itself by regularly introducing new and seasonal ice cream flavors, making a total of over 200 unique flavors available to customers.
Team
Me (UX Designer & Front-end Engineer)
Alice Pan (Design System & UI)
Cheewen Jing (Researcher & UX/UI)
Joseph Carrillo (PM, Data Analysis)
Yitong Du (Researcher & UI)
Lois (Sweet Alchemy Owner)
My Role
UX Research, UX Design, UX Testing, Interaction Design
Time
Mar 2023 - Jun 2023
* Images of the current website
Problems 🧐
Sweet Alchemy customers faced online order challenges, especially with custom ice-cream cakes. This led to numerous phone inquiries and confusion related to pickup. Customers struggled to find the full store menu, and the website lacked detailed flavor and product information, with poor integration with the third-party order processing application.
Goals 🚩
The main goals of Sweet Alchemy were increase online orders, reduce confused call inquires for custom cake orders, increase foot traffic, and provide a better integration between website and third-party ordering application.
Outcomes and Results ✨
01
Decrease in cake ordering confusion
03
50% reduction in number of clicks to product information
02
Increase in product information findability
04
Improved ordering process and smoother integration between main website and ordering platform
The process we followed...
Our Objective 🎯
How can we can help improve the website for Sweet Alchemy to better drive growth while also remaining true to their local, organic, and small-batch values?
Firstly, Research 🔬
But why?
01
To understand customer preferences, pain points, expectations, and usability of current website.
03
To identify areas of improvement in the online ordering process and website usability.
02
To understand the challenges and opportunities within the in-store operations.
04
Lastly, to analyze website traffic, user behavior, and customer trends.
How did we do it?
Interviews (10 customers + 2 store employees + 1 store owner)
Contextual Inquiry (1)
Google Analytics (1 year)
Surveys (18)
Comparative Analysis (3)
Usability Testing (2)
Task Matrix
* Usability test of current website
What we found?
01
Devices for accessing the website: 72% through laptop, 28% through mobile.
* Google Analytics
02
Participants had trouble finding a full store menu. The website provides limited information on flavor availability and the variety of products they sell (ie baked items or gift sets).
03
Participants were confused about how many store locations existed. Only the U-District address is listed on the homepage.
04
Guidance for the cake order process and disclaimers for cake insulation and other cake ordering tips are easily missed.
05
Participants wanted easy navigation, photos of ice cream by flavor, visual appeal (UI), and menu items/descriptions.
06
Call-to-actions are not visually clear on the current website’s homepage, user needs to rely the main navigation to find clear calls to action.
But what was Sweet Alchemy's biggest challenge?
Sweet Alchemy website
-
Could not integrate order processing in main website because Square third-party platform was used in all their stores.
-
Implementing a new order processing system on the main website had technical limitations and would necessitate a complete overhaul of the system across all stores.
Square website used for ordering
-
The web development through Square encountered limitations regarding the layout for presenting menus and product details.
-
Necessitated the use of pre-existing templates to show information.
Personas:
We synthesized our findings and arrived at three primary personas.
How might we 🤔
Make online ordering (cakes and ice cream), browsing flavors, and making inquiries a better experience for users?
Ideation💡
Card Sort & Information Architecture:
The customers' primary complaint was the inadequate information and disorganized content on the website. They faced difficulties finding details about ice creams, ice cream cakes, and other products. As a top priority, we aimed to address this issue by redesigning the website's information architecture by conducting the card sort activity.
Card sort conducted with 33 participants
Card sort analysis
Information Architecture
Click for detailed view.
Paper Sketches:
Our team came up with paper sketches as part of ideation. We conducted a design critique session amongst the team and with few designers to get feedback on each of the designs. We also showed our designs to our client to get their feedback in the initial stages of design.
Quick glimpse of our paper sketches
Design through Iterations ✏️
We went through a process of refining our designs, starting with paper sketches and progressing through mid-fidelity prototypes before arriving at high-fidelity prototypes. Based on critique session and feedback from our client we moved to mid-fidelity prototyping.
Usability testing was carried out on the mid-fidelity prototypes, and the insights gained from these tests, along with feedback from our client, were used to enhance and create the high-fidelity prototypes.
Iterations of Home Page:
We progressed from the initial sketches to mid-fidelity of the home page by creating a sequence of wireframes that underwent internal critique sessions.
Mid-fidelity used for usability testing
What design decisions did we make?
01
Show the list of locations above to fold so that users can find nearest location in a quick glimpse.
02
Maintain visual hierarchy - Headline > CTA > Products and a clear and concise navigation.
03
Call-to-action's throughout the page to navigate to products page or place orders.
BEFORE
Current home page
AFTER
Our high-fidelity
Iterations of Ice Cream Scoops Page:
We created two versions for this page and conducted A/B testing with users.
Version A - Ice cream scoops page with categories, location filters, and order call-to-action
Mid-fidelity used for usability testing
✅ What worked :
-
Scoop flavor images were liked by users
-
Categories and location filters made it easy to find and order flavors
-
Call-to-action's to instantly place an order
-
Preferred by users
❌ What did not work - for client :
-
Development was tedious
-
Updating stocks for flavors at various locations was time consuming
Version B - Ice cream scoops page with static menu of flavors
Mid-fidelity used for usability testing
✅ What worked :
-
Clean design
-
Easy to develop
-
No maintenance required (for client)
-
Preferred by client
❌ What did not work :
-
Users had to expand to see flavor image and information
-
No Order call-to-action, so user has to navigate to square and again spend time to find flavor and place order
Challenge: How to connect main website to Square site (that processes the orders)?
One of the biggest challenge we faced was how to connect the ORDERING from the main website to the Square site order processing?
In my role as a front-end engineer within the team, I performed a technical assessment of the Square site.
What did we find?
Each flavor at each location
🍦
Unique URL
🔗
What design decisions did we make?
01
Link each "ORDER" call-to-action to its unique URL and prompt users to select a location if they haven't already done so using the filter.
02
Modify Version B (static menu) to match Version A except the location filter and Order call-to-action, to align with user preferences.
03
Handover both versions to the client for their consideration, allowing them to choose the implementation based on the technical feasibility during the development phase.
BEFORE
Ordering process on current website
AFTER
Our high-fidelity (with Location filters and Order CTA)
Iterations of Ice Cream Cake Page:
The existing website posed a difficulty in conveying instructions for custom cake orders. These instructions were often overlooked, and many customers preferred not to invest time in reading through them. As a result, a significant number of customers resorted to directly contacting the store via phone.
Customize cake ordering instructions on current website
To address this issue, we decided to create an easy to follow illustration with the instructions.
✅ What worked :
-
100% of the participants read the instructions
❌ What did not work :
-
The illustration was confusing for most participants
-
Text was small
-
Layout was not easy to follow
What design decisions did we make?
01
Keep the format of illustration to communicate the instructions.
02
Create an easy-to-follow layout for the illustration.
03
Create visual hierarchy and increase font size.
BEFORE
Custom cake ordering on current website
AFTER
Our high-fidelity for custom cake ordering
Illustration for custom cake ordering instructions
Usability Testing Results 🏆
Decrease in custom cake ordering confusion.
50% reduction in number of clicks to access product information
Participants highlighted improved ordering process and improved integration between main website and Square site.
Team Sweet Ice after a successful project presentation
Me with Sweet Alchemy owner
Lastly, Reflections and Learnings ✍🏼
01
The constraints posed by Sweet Alchemy's order processing platform, specifically the Square Site taught adaptability and creative problem-solving within limitations.
03
Atomic design principles in conjunction with the client's branding enabled us to establish a cohesive and consistent design system for Sweet Alchemy, enhancing the brand's visual identity and user experience.
02
Critique sessions, soliciting feedback from the client, and conducting usability testing were instrumental in refining our designs. Iterative process allowed us to align with business requirements, user preferences, and technical limitations.
04
Striving to incorporate a broader range of diverse test participants in next usability testing sessions will lead to more accurate outcome figures.