Project Overview

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.

Duration

10 weeks

Team

Group of 4

Role

UXUI Designer

Tools

Figma, Zoom, Photoshop

• The shopping process for cupcakes is unclear.

Problem

• It's difficult to determine where customization options are available.

• The site lacks any effective design elements.

• The content is poorly organized.

• There are no clear navigation menus.

Solution

The main goals for redesign the Toronto Cupcake website include:

• Easy customization of cupcakes.

• Enhancing layout, design, and color contrast.

• Seamless shopping navigation.

Design 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.

Approach

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- The navigation menu is poorly

organized, as it is hidden in a hamburger

menu on the left, requiring users to click

to find important items.

2- The photos and text are misaligned,

resulting in an unbalanced and

aesthetically displeasing layout.

3- The custom 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

4- The shopping basket lacked visual

representation of selected items and

any editing options for adding or

modifying items.. And generally the

shopping process is unclear .

Interview

During the interview process, I spoke with several users about customization. Two important insights emerged:

1- Users want the ability to filter out allergen items during the customization.

2- Users wanted to receive clear instructions on the Customization Process, and have an overview of their completed actions.

Competitve Analysis

Having identified issues with Toronto Cupcake in areas such as Information Architecture, Customization, Filtering, Shopping Process, and Visual Aspect, we examined these four websites and gained valuable insights from them, which we have implemented on our redesign Process.

Define

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

Persona

Site Map

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 and here are some of our solutions presented in our Mid-Fidelity wireframes:


1- According to our research, we concluded that the items All Cupcakes, Best Sellers, Custom Cupcakes, and Occasional Events have higher priority. Therefore, we included them in the navigation bar.

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

3- Added the option to upload photos during the customization process.

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

UI Kit

Usability & Iteration

Problem 1

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

Solution 1

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

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 2

Valentine, as an upcoming occasion, was often overlooked by users because it was positioned on the homepage beneath the hero, necessitating scrolling down to notice.

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.

Problem 3

So, it was replaced by a progress tracker

where users can see all steps and previously chosen elements accurately.

Solution 3

Solution 4

Problem 4

Placing allergen selection as the final step in the customization process could lead to issues because some allergens should not be combined with certain products, but as the last choice, they couldn't prevent their selection.

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

Deliver

High Fidelity Prototype