top of page

Sweet by Holly

Role

UX Researcher, UI Designer

Duration

1.5 weeks

Team

Solo Project

Tools

Figma, Zoom, Google Suites

Screen Shot 2022-10-05 at 1.09.35 PM.png

OVERVIEW: Redesign a contemporary bakery's  e-commerce site

WHAT ARE THE CHALLENGES?

Screen Shot 2022-03-27 at 5.05.01 PM.png

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.

Screen Shot 2022-03-27 at 5.05.32 PM.png

Problem #2

Primary navigation was difficult to understand. Users would get lost trying to find products.

Solution #2

Restructure the site's information architecture

Screen Shot 2022-03-27 at 5.06.10 PM.png

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

Screen Shot 2022-03-27 at 6.15.46 PM.png

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?

Screen Shot 2022-03-27 at 7.58.17 PM.png

8/8 Users
(100%)

Screen Shot 2022-03-27 at 7.59.10 PM.png

7/8 Users
(87.5%)

Screen Shot 2022-03-27 at 7.59.41 PM.png

6/8 Users
(75%)

Screen Shot 2022-03-27 at 8.10.13 PM.png

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:

Screen Shot 2022-03-27 at 9.41.53 PM.png

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.

Screen Shot 2022-03-27 at 11.26.04 PM.png

While doing the feature inventory, I noticed common categories used by competitors to filter products by holidays and occasions:

Screen Shot 2022-03-27 at 11.54.52 PM.png

Wedding & Special Occasion

Screen Shot 2022-03-27 at 11.54.52 PM.png

Birthday & Celebration

Screen Shot 2022-03-27 at 11.54.52 PM.png

Special Edition

Screen Shot 2022-03-27 at 11.54.52 PM.png

Graduation

Screen Shot 2022-03-27 at 11.54.52 PM.png

Theme Cakes

Screen Shot 2022-03-27 at 11.54.52 PM.png

Baby Event

Screen Shot 2022-03-27 at 11.54.52 PM.png

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?

Screen Shot 2022-03-28 at 12.05.41 AM.png

The site attempts to use trendy terms that are often misleading.

Screen Shot 2022-03-28 at 12.05.50 AM.png

Several buttons on the site were not clickable.

Screen Shot 2022-03-28 at 12.05.27 AM.png

Users found the primary navigation overwhelming.

Screen Shot 2022-03-28 at 12.21.46 AM.png

Several buttons on the site were 

not clickable. 

Lack of consistency

Screen Shot 2022-03-28 at 12.51.11 AM.png

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.

Screen Shot 2022-03-28 at 2.31.52 AM.png

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.

Screen Shot 2022-03-28 at 2.56.05 AM.png

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.

Screen Shot 2022-03-28 at 3.21.31 AM.png
Screen Shot 2022-03-28 at 3.31.18 AM.png

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

Screen Shot 2022-03-28 at 5.09.40 AM.png

Assorted Boxes Page

Product detail

Screen Shot 2022-03-28 at 5.10.10 AM.png
Screen Shot 2022-03-28 at 5.09.59 AM.png

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

Screen Shot 2022-03-28 at 5.38.39 AM.png

AFTER

Screen Shot 2022-03-28 at 5.35.25 AM.png

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.

Screen Shot 2022-03-28 at 5.47.42 AM.png

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

Screen Shot 2022-03-28 at 5.54.12 AM.png

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

Screen Shot 2022-03-28 at 5.57.07 AM.png

AFTER

Screen Shot 2022-03-28 at 5.57.33 AM.png

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

bottom of page