My Role
UX & UI Designer
Main Role : Information architecture, ideation and prototyping
Team
4 people - Self Directed
Figma, Miro, Adobe photoshop, Maze
Deliverable
High-fidelity prototype for mobile and desktop
Toronto Cupcake is a local business based in Toronto, Canada specializing in gourmet cupcakes with the option of customization. The current website is very outdated and doesn’t offer much information. The main issue of the website is a lack of user-centricity. Because of the difficult ordering process, new customers are reluctant to make purchases through the company's website.
About
Project Overview
Make Your Own Box
Customize a cupcake
Fast Checkout
Problem
Goals
1- It lacks brand identity and professional look.
2- Complex Navigation and time consuming checkout process.
3- Customize order is only possible through contacting seller directly
1- The information architecture should be modified to allow users to find the information easily and complete a task in the fastest possible way.
2- Enhancing visual elements and altering the current website layout to improve navigation
3- Adding customization features to the website.
1 Empathize
Heuristic Evaluation
Based on the heuristic evaluation, we observed issues with cluttered layout, non-functional links, and lack of organization on the website. You can read more Here.
Survey
10 Questions | 27 Participants
Interviews
5 of the participants.
Website user-friendliness evaluation
All of the users found the website difficult to navigate and not user-friendly.
Task completion rate
Misunderstanding business type
Task retrying behaviour
User preference for ordering
Of users were not able to complete a simple task with the website.
It was found that only 1/4 of users were willing to retry tasks after reading positive Google reviews.
Due to the website's poor layout, 80% of users have expressed a preference for contacting the company by phone to place their orders.
The majority of users who visited the site mistook it for a retail business for a box selling firm.
Competitive Analysis
-
Five out of seven competitors offer user accounts, enabling users to like products and access their order history.
-
Four out of seven competitors provide information on product ingredients and allergy restrictions.
2 Define
Affinity Diagram
Website contents should completely be modified to provide a clear pathway for user to navigate.
Persona
Lily Jones | 32
Human Recourse
Lily Jones, a 32-year-old corporate banker at the National Bank of Montreal, is excited about her company's upcoming 200th-anniversary celebration. She's exploring catering options in Toronto and is drawn to Toronto Cupcakes for their customization and delivery services.
Goals
-
Find a reliable and efficient catering service for her company event.
-
Customize cupcakes with her company's logo to impress colleagues and superiors.
-
Have the cupcakes delivered directly to her office, saving time and effort.
Needs
-
Easy and user-friendly customization options for cupcakes.
-
Timely and reliable delivery service.
-
A seamless and stress-free ordering process with clear communication and confirmation.
Storyboard
1- The National Bank of Montreal (BMO) is going to have a 200 years anniversary in a few weeks.
2- Lily who works in a human resource department is responsible for planning a ceremony for this event.
3- She decides to look for some cupcakes that could be customized with the business logo.
4- She customized her order in the Toronto cupcake website and places her order.
5- She receives notification that her order is successfully placed and is getting processed .
6- On the day of the events, the cupcakes are shipped from Toronto Cupcake to the BMO company.
7- Everyone is enjoying the cupcake and Lily had a stressless experience ordering the cupcakes.
8- People are asking Lily where she got the cupcakes from. She shares her experience about Toronto cupcake with others.
3 Develop
To improve the Information Architecture, we conducted open card sorting with 10 participants.
Card Sorting
Site Map
Task Flow
Task : Ordering Cupcake
Browse the website
Customize the cupcake
Customize a box
Place an order
Receive the product
Ideation Sketches
Designing the Homepage
Our team redesigned the homepage, focused on highlighting crucial information and enhancing user navigation.
Designing the Custom Order Page
We designed a user-friendly customization page with a step-by-step process. Users can choose cupcake base, frosting, toppings, packaging, and add their logo.
Designing the Product Page
This page is featuring high-quality images and detailed descriptions about ingredients .
Style Guide
4 Test
Usability Test
Users completed three tasks remotely, providing data on click paths, and task completion rates. HERE you can read the full report.
Methodology
Unmoderated usability test
No. Participants
5 participants
No. Tasks
3 Tasks
Software
Maze
Google docs
"Please navigate to the Toronto Cupcake Website and place an order for a custom box of 6 cupcakes, consisting of a mix of chocolate and vanilla flavours. Then, place another order for a fully customized dozen cupcakes with a chocolate sponge, red velvet frosting, and raspberry topping, and add the logo file that provided to these cupcakes. Finally, complete the checkout process to finalize your order. Please note that this task is not meant to evaluate you, but rather to gather feedback to improve our website."
Iteration Decision
Cupcake customization is now on a single page, simplifying the process, and users can preview their order before finalizing it.
To accommodate customers who enjoy sampling multiple cupcake flavours, an additional customization feature can be incorporated, enabling users to personalize their cupcake box by choosing from a variety of flavours.
The lengthy checkout process should be simplified with less steps.
Design Iterations
Homepage
5 Design
Interactive Prototype
Click around to use the prototype
Home Page
Navigating just got a whole lot simpler!
Hero Image
About Us
Customize Cupcake
Customize a cupcake in 4 easy steps.
Make Your Own Box
Buy a box containing your selected flavours.
Choosing Box Size
Selecting Flavours
Easy Checkout
Fast & easy checkout process.
In Summary
Task
Our team was tasked with redesigning the bakery website to create a pleasant shopping experience that would benefit both the customers & the business owner.
Approach
By conducting user interviews, affinity mapping, task analysis, we were able to gather insights and understand our users' needs .
Product
A functional website prototype was designed to enhance the shopping experience of users by allowing them to fully customize their order.
