Toronto Cupcake

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

Desktop Prototype

. 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

Team

Role

Tools

Figma, Photoshop, Miro, Zoom

UX/UI Designer

Group of 4

3 Month- Part time

Problem

  • The shopping process for cupcakes is unclear.

  • The site lacks any effective design elements.

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

  • There are no clear navigation menus.

  • The content is poorly organized.

Solution

The main goals for redesign the Toronto Cupcake website include:

  • Easy customization of cupcakes.

  • Seamless shopping navigation.

  • Enhancing layout, design, and color contrast.

. DESIGN PROCESS

Approach

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

  1. The photos and text are misaligned, resulting in an unbalanced and aesthetically displeasing layout.

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

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

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.

  1. Users wanted to receive clear instructions on the Customisation Process, and have an overview of their completed actions.

Competetive 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

Persona

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

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 Occasions & Events have higher priority. Therefore, we included them in the navigation bar.

  1. Implemented breadcrumb to guide users through website navigation.

  2. Added option to upload photos during the Customization process.

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

UI KIT

Usability & Iterations

Solution 1

Problem 1

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

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

Problem 2

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

Users 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

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.

Solution 3

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

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

Solution 4

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

. DELIVER

High fidelity Prototypes

Desktop Prototype