OVERVIEW: Redesign a contemporary bakery's e-commerce site
WHAT ARE THE CHALLENGES?
Problem #1
Complicated steps to purchase a product were leading users not to complete purchases.
Solution #1
Minimize the steps and time of executing tasks.
Problem #2
Primary navigation was difficult to understand. Users would get lost trying to find products.
Solution #2
Restructure the site's information architecture
Problem #3
The current site aesthetic is outdated and does not keep up with current trends.
Solution #3
Visual makeover
DESIGN PROCESS
Gathering Data
Our Users' Needs
Stimulate UX
Research
Empathize
Define
Ideate
Prototype
Testing
Understand Our Users
Brainstorm Solutions
Validate with Users
RESEARCH
Before creating any ideations, I needed to gather data on what is currently wrong with the existing site and how it compares to the competitors. Find out who the target demographic buying baked goods are? What are their needs and frustrations?
SURVEY RESULTS: What is important when buying cakes?
8/8 Users
(100%)
7/8 Users
(87.5%)
6/8 Users
(75%)
6/8 Users
(75%)
Takeaway: Four primary factors influence a user's decision when buying cakes. This information needs to be easy to access for the user to have a positive experience.
CARD SORT
I asked users to organize products from Sweets by Holly into categories in an open card sort. I utilized this technique to figure out which categories I should include in the information architecture to suit my user’s needs.
Common categories created by users include:
CONTEXTUAL INQUIRY
5/5 users found the primary navigation difficult to understand and read. Users then avoided the primary navigations.
Form to place a custom order.
Products available within 24 hrs. Did not include products ready for same-day pick-up.
Mini cupcake flavors for custom boxes. It does not include assorted boxes or full-sized cupcakes.
4/5 of users wanted a visual representation of what the cake would look like before purchasing.
​
​
​
​
No matter which color option the user chooses, the product picture will stay the same.
Users enjoyed creating their box of custom cupcakes. The page did not include cupcake descriptions, and users had to choose solely from visuals. Users were also unaware that this feature is for mini cupcakes only and not full-sized cupcakes.
Other insights during task analysis
-
3/5 of users gave up exploring different product options and chose the first product to fulfill the task. In real life, users said they would have left the site due to poor navigation.
-
Every user navigated through the site differently. Some prefer to start with primary navigation while others scrolled throught the page for images. Users often overlook text that contained key information/ buttons needed to navigate the site.
By watching five users during a task analysis, I was able to identify frequent errors, misinterpretations, and frustrations a user would have with the existing site.
COMPETITIVE ANALYSIS
Users liked having a progress bar and changing product pictures when customizing their cake. This way, the user sees how many steps are still needed and has a more realistic visual of their product.
Other findings:
-
5/5 users were able to complete the task within half the time they needed on Sweet by Holly.
-
3/5 users enjoyed using the site and continued to explore other products even after they completed the task.
I also analyzed what other features competitors offered that Sweet by Holly can include to improve the user experience.
While doing the feature inventory, I noticed common categories used by competitors to filter products by holidays and occasions:
Wedding & Special Occasion
Birthday & Celebration
Special Edition
Graduation
Theme Cakes
Baby Event
Custom
Task analysis: I also conducted a usability test of a competitor, Sprinkles, for 5 users with the same scenario. Comparing the users' experience to that of Sweet by Holly, what can be improved?
HEURISTIC EVALUATION
What components of usability needed improvement according to Nielsen’s Ten Usability Heuristics?
The site attempts to use trendy terms that are often misleading.
Several buttons on the site were not clickable.
Users found the primary navigation overwhelming.
Several buttons on the site were
not clickable.
Lack of consistency
Users found the navigation overwhelming. The "Shop Now" dropdown was difficult to read and understand for users.
Not minimalistic
& aesthetic
The site attempts to use trendy terms that are misleading.
Users thought “Blackout cake” to be a black cake used in gender reveals and were surprised that it was actually a chocolate cake.
Doesn't match real world
I conducted a Heuristic Evaluation to understand why the users did not find Sweet by Holly to be user-friendly.
SYNTHESIS
Following the research phase, I synthesized the information to guide me in decisions for interactions, navigation, product features, and visual design. I looked for themes and trends within the data to make informed designs.
PERSONA: A representation of the hypothetical archetype of actual users.
Problem:
Midori wants to order baked goods online because she doesn't have time to go to the bakery.
How Might We...
expedite the ordering process on Sweet by Holly?
USER FLOW: What decisions do my users make to buy a cake?
I created a user flow to identify the screens and components I needed to include in my design.
Original Navigation
The original secondary navigation would bring users directly to product details. Users found it difficult to understand and time-consuming; they would then avoid the primary navigation as much as possible.
Updated Navigation
For the updated navigation, I simplified it to not include specific products. Instead, users will be brought to specific pages and utilize ambiguous organization structures to narrow their search.
SITE MAP
I created an original and updated site map to look for ways to improve the site’s navigation. By doing so, I avoid eliminating critical parts of a website's architecture.
DESIGN & IDEATIONS
With an understanding of users' behaviors, needs, and frustrations. I started drafting a possible solution to solve the existing problems identified as well as better highlight the site's strengths.
SKETCH
I started ideation or forming concepts of how I would redesign the site with sketches. Incorporating key features and solutions to the information problems identified during the research.
Home Page
Express Cake Page
Updates to the information architecture include:
-
Ambiguous organization structures within the IA so users can shop by occasion. (ex. birthday, wedding, graduation, etc.)
-
Multiple pathways to products in order to accommodate different navigation preferences.
Wireframes
Next, I created the necessary wireframes to represent each screen a user would need to navigate through.
All Cakes Page
Home Page
Product in 24hrs Page
Assorted Boxes Page
Product detail
Mid-fi Wireflow
Afterward, I created the necessary wire flow to represent each screen a user would need to navigate through.
Style Guide
The original colors utilized in the existing site were outdated and straining on the eyes of some users. To make the site more user-friendly and assessable, I chose a new set of colors inspired by Sweet by Holly's Logo: yellow, orange, and pink. I minimized the use of red on the site and wanted to create a fun and playful aesthetic.
REDESIGN
BEFORE
AFTER
LET'S ORDER A CAKE
For the updated navigation, I simplified it to not include specific products. Instead, users will be brought to specific pages and utilize ambiguous organization structures to narrow their search.
LET'S ORDER A CUSTOM DOZEN
For the updated navigation, I simplified it to not include specific products. Instead, users will be brought to specific pages and utilize ambiguous organization structures to narrow their search.
Hi-fi Prototype
Afterward, I created the necessary wire flow to represent each screen a user would need to navigate through.
USABILITY TESTING
After creating a functioning prototype. I asked 5 users to complete a series of tasks to validate my findings and changes.
UPDATING DESIGNS
BEFORE
AFTER
ADDED TO CART
Users were uncertain if their order was placed and did not notice the "thank you for your order" text that appeared once they clicked add to cart. I then redesign the frame as a pop-up informing the user their product is added to the cart.
BEFORE
AFTER
HOW MANY?
3/5 users sought clarification on how many cupcakes were in a quantity of 1. Taking this insight, I then added clarification within the frame, stating that there are 12 cupcakes in each box.
NEXT STEPS
-
Expand on the "Filter" feature, and show different interactions it can provide
-
Continue usability testing to validate changes made to the prototype
-
Make the process of exploring the site enjoyable with animated interactions