toronto
cupcake
Timeline:
4 weeks Duration
Role:
Product Designer
Tools:
Figma Photoshop Illustrator Miro
Overview:
I've chosen to redesign Toronto Cupcakes because the current user experience and interface lack the needed quality and measurable elements for this project.
This case study explores design solutions of redesigning cupcakes website detail pages to provide key information to current and potential buyers.
Take a look at the promotional video and enhance it.
I used a 5-stage Design Thinking model proposed by the Hasso Plattner Institute of Design at Standford (the “d. school”). The stages of the Design Thinking process are as follows:
Empathize:
01/06
The Problem:
The website has several issues. Apart from its unappealing visual design, the cupcakes' detail page overwhelms and confuses users, lacking clear categories. The absence of a header and footer makes it unclear where to find information. Not having a contact or online order page is problematic, especially for corporate and individual orders. To address this, I've added a "Place Order" section on the right end side.
02/06
The Solution:
The website now has a simpler menu with a cupcake icon for easy access to the shop, cart, and search, along with a clear prompt for users to shop and a tidy footer displaying working hours and location.
03/06
The Goals:
User Goals:
0.1
Quickly find and read product information with user friendly navigation.
0.2
Easily refine products searches through effective filtering options.
Business Goals:
0.1
Enhance user retention and convert visitors into customers.
04/06
Target Audience:
I initiated this case study by researching the market and target audience of Toronto Cupcakes. I conducted user research to identify ideal users and gain insights into the tasks they might engage in while visiting the site.
05/06
User Persona:
To better understand the users of this website, I created a personas to explore their needs and expectations.
Define:
06/06
Journey Map:
To connect with the ideal user, I crafted a journey map that visually tells the story of a specific task process. This provided valuable insights into the user's actions, emotions, and mindset throughout the experience.
Ideate:
07/06
Style Guide:
Site Map:
I made the site easier to read by simplifying the navigation and breaking down content into smaller sections. Following Miller's law, I reduced clutter and improved user understanding. I also added faceted search for an effortless browsing experience, letting users filter products based on their interests and needs.
Flowchart:
I designed a flowchart to illustrate the purchasing process, providing a visual guide to decision points and steps in the user flow.
08/06
Prototype:
Using Figma, I crafted simple wireframes to plan the initial version of the prototype for testing the purchase process. I experimented with various layouts to find the one that best reflects the brand and presents the content effectively.
To access the details, please click “View Process” button below.
I also generated high-fidelity mockups and developed prototypes to visually showcase the purchase process. Through testing with real users using the prototype, I gathered valuable feedback, enabling me to refine the design and flow.
09/06
Validate:
I performed user tests on the prototypes using both InVision and Figma to collect feedback. Subsequent iterations included updates to the font and checkout section based on the received feedback.
10/06
Final Takeaways:
Users liked the changes, especially the improved readability and look. If the project moves ahead, more testing and refinements will be done before launching.
To check the impact of these changes, I will closely watch metrics like conversion rates, shopping cart abandonment, average order value, and gross profit margin.
11/06
Final Design:
