Toronto cupcake is an online cupcake store available 24/7, with a primary focus on customizing for corporate events and special occasions.

Duration

6 weeks

Role

UX/UI, Research

Group of 2

Team

Tools

Figma, Photoshop

• Unclear shopping process and a homepage cluttered with disorganized, low-quality photos.

• Limited customization options requiring direct contact with the seller.

• Complex and confusing navigation.

• Lengthy and time-consuming checkout process.

Problem

Solution

• Streamlining shopping process by using a clear, intuitive flow.

• Implementing interactive customization tools and templates.

• Ensuring consistency in layout and navigation elements. Using clearly labeled categories in navigation bar.

Discover

Define

Develop

Deliver

Heuristic evaluation

Interview

Competitive analysis

Persona

Cart sorting

Site map

User flow

Sketches

Wireframing

Usability & Iterations

Design elements

Final wireframes

Usability & Iterations

Final prototype

Heuristic Evaluation

The custom section displays photos with no option to customize cupcakes. Customization is only possible through direct contact.

The navigation menu is hidden in a hamburger menu on the top left corner, creating friction due to extra clicks.

The photos and text are misaligned and poorly balanced causing cluttered appearance, lack of visual hierarchy and eye strain.

The shopping basket lacked visual representation of selected items and any editing options for adding or modifying items. Generally, the shopping process is unclear.

Interview

We conducted interviews with 15 individuals using open-ended questions to understand their preferences when ordering cupcakes online. This helped us gain insights into their likes, dislikes, and needs.
Our questionnaire focused on:

What needs and expectations users have for customizing a cupcake

What were their bad/good experiences with online cake and cupcake stores

What makes ordering cupcakes online hard

How to encourage them to order online

The findings from our research were then organized on an affinity map to better understand their relationship to each other. Then, 8 of these groups helped us determine priorities moving forward in the process.

Findings

In order to make more informed decisions, we evaluated some well-known websites from various perspectives which helped us with:

Competitive Analysis

Strengths the competitors share:

Visual appeal and high quality images
Consistent branding
Effective filtering options

Limited custimzation tools
Complex navigation

Weaknesses the competitors share:

In order to establish tasks for our design, and to communicate information about the users that we collected during research, we developed a persona.

Persona

Site Map

To learn how to organize the different sections of the website for more intuitive navigation, we conducted remote sessions of open card sorting with potential website users. They were able to create their own categories.
The following is the site map after our analysis of the card sorting.

User flow

In order to establish tasks for our design, and to communicate information about the users that we collected during research, we developed a persona.

Skeches

Based on the conducted research, we started sketching which are shown below.

Mid-fidility Wireframes

Based on the conducted research, we started sketching which are shown below.

Homepage

Customize Page

Checkout Page

Design Elements

• ‘Customize now’ button was moved to here section for better visibility.

• The secondary ‘Shop all’ button was added to highlight customization as the primary focus while also streamlining the purchase of standard cupcakes.

Usability & Iterations

• The upcoming occasion was added to the navigation menu with a bold color for quick access, avoiding the need to scroll down.

• The breadcrumb wasn't clear enough in our customization flow, as users couldn't see how many steps they still needed to complete.

• It was replaced by a progress tracker where users can see all steps and previously chosen elements accurately.

• Colors and previously chosen elements were added to the progress tracker to enhance the user experience during the flow.

Hi-fidility Wireframes

Homepage

Customize Page

Checkout Page

Why not take a look at my other projects?

App

UX / UI Design, Research

FinGuru ∣

Website

UX / UI Design, Research

FinGuru ∣