PROJECT OVERVIEW

Problem

The shopping process for cupcakes is unclear; it's difficult to determine where customization options are available and how many cupcakes can be added to the basket .

The website is severely lacking in displaying photos, organizing content, providing clear navigation menus, and lacks any effective design elements.

Solution

The main goals for redesign the Toronto Cupcake website include:

• Easy customization of cupcakes.
  
  

• Enhancing layout, design, and color contrast.
  

• Seamless shopping navigation.
  

I joined a group of three other UX designers to collaborate on redesigning the customization task. My entire focus revolves around the customization and information architecture processes.

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

THE PROCESS

Throughout our project, our team of four embraced the Double Diamond Design approach rooted in the Design Thinking Methodology. Rather than following a strictly linear path, we found ourselves moving fluidly between stages as the project evolved.

DISCOVER

With our research, we aimed to better understand the needs of users and utilize this information to enhance the redesign of the original website.

We conducted three types of research:

1. Heuristic evaluation.

2. Interviews.

3. Competitive analysis.

Heuristic Evaluation

1. Complex navigation: The navigation menu, crucial for representing information architecture, is poorly organized.

2. The photos and text are misaligned and poorly balanced.

3. The custome section displays only photos with no option to customize cupcakes. Users must refer to the FAQs to discover that customization requires contacting via mail or phone 48 hours in advance.

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

Interview

We conducted interviews with 15 individuals using open-ended questions to understand their preferences when ordering cupcakes online.

1. Flavor is one of the most critical elements of a cupcake.

2. Providing options for dietary preferences is important to users.

3. Users needed to customize the details of a cupcake on the website in a quick way.

Competetive Analysis

These are some of our potential competitors and various websites we dug into for inspiration.

We derived the following key takeaways:

• Overall, it helped us with some visual design ideas.
  
  

• Inspired us with filtering options for flavors and allergens.

The major takeaways from this research are:

DEFINE

Persona

The website will be redesigned based on the Persona's needs and preferences.

Cart Sorting

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 a sample of one of the card sorting.​

The results from our analysis of the card sorting activity led to the redesign of the information architecture and site map.

Site Map

User Flow

User flow was developed accordingly:

DEVELOP

Wire-framing

To start, we first put our ideas on paper by sketching.

Next, we designed our mid-fi wireframes based on our sketches.

Here are some of our solutions presented in our Mid-Fidelity wireframes:

1.Efficient navigation menu based on research findings, prioritizing all cupcakes base on flavors and custom cupcakes.

2.Implemented breadcrumb navigation to guide users through website navigation.

3.Added option to upload photos during the order process.

4.Included maintenance and allergen details, addressing common user inquiries.

5.Designed clear, brief custom cupcake visuals presented through an overlay .

DELIVER

UI Design

Problem 1

Solution 1

Usability & Iteration

UI Kit

Custom cupcake CTA should be displayed directly on the hero section.

Users had to scroll down to see the custom cupcake CTA, which was not ideally positioned.

Problem 2

Solution 2

Eventually, adding it to the navigation menu and giving it a different color proved to be much more successful in catching users' eyes.

Thanksgiving, being an upcoming occasion, was often overlooked by users when placed in the scroll-down section of the homepage.

Problem 3

Solution 3

So, it was replaced by a progress tracker where users can see all steps and previously chosen elements accurately.

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

Problem 5

Solution 5

In the customization process, placing allergen selection as the last step could lead to issues because some allergens should deactivate certain products, but being the last to choose, they couldn't deactivate them.

Therefore, it was integrated as a step in our progress tracker before actually customizing the cupcake.

Problem 4

Solution 4

The initial design of the progress tracker did not include options for displaying previously chosen selections and did not feature any color changes during the flow.

After iterations, we designed the final version, incorporating colors and including previously chosen categories to enhance user experience.