Toronto Cupcake Website Re-Design
Responsive Website Redesign for a Local Canadian Bakery
Toronto Cupcake, a local establishment in Toronto, Canada, specializes in gourmet cupcakes with the added feature of customization. However, the existing website is notably outdated and lacks essential information. The primary concern lies in its lack of user-centricity, leading to challenges in the ordering process. This difficulty dissuades new customers from making purchases through the company's website.
Business Goals
Boost Sales Conversion
Optimize the presentation of custom cupcake orders to encourage more online purchases.
1
Implement Customization Feature
Introduce a user-friendly customization feature to cater to customers seeking personalized cupcake orders.
2
Convey the quality and uniqueness of the cupcakes through an improved and professional website design.
Build Trust in Quality
3
Discovery Stage
Problem
The website doesn't effectively showcase custom cupcake orders, raising doubts about the business's quality. It lacks crucial info, has issues with layout, color contrast, responsiveness, and navigation. Plus, there's no customization feature for users seeking personalized cupcake orders.
Define
Discover
Develop
Deliver
Double diamond
Design Framework
Heuristic Evaluation
Following a heuristic evaluation, we identified concerns related to a cluttered layout, non-functional links, and a lack of organization on the website.
Competitive Analysis
Most competitor sites include features like Filtering and user profile. Five out of seven competitors offer customization option. Additionally, four out of seven competitors provide information on product ingredients and allergy restrictions on their websites.
Define
Discover
Develop
Deliver
Double diamond
Design Framework
Definition Stage
User research
In our project, we dug deep into what Toronto Cupcake customers truly want. We interviewed them to understand their thoughts on testimonials, customization, dietary needs, trust, and ingredients. Through these insights, we pinpointed three main issues: the importance of trust signals, hurdles in customization, and the need for clear dietary information.
Main Users’ Challenges
Challenges with Customization
Users encounter difficulties in customizing their cupcake orders on the website.
1
2
Incomplete Information on Dietary Preferences and Allergens
Users struggle to find comprehensive information regarding dietary preferences and allergens.
3
Lack of Trust Signals
Users might face issues with trusting the quality and service of Toronto Cupcake due to a potential lack of trust signals on the website
Persona
User research
The valuable user input form interviews, formed the basis for creating a persona that embodies the traits and behaviors of our target audience. This persona guides our redesign efforts, ensuring they align perfectly with what Toronto Cupcake customers are looking for.
Asal Arja
Occupation
Event Planner
Location
Toronto
Age
40
Asal is a professional event planner with a passion for creating memorable experiences for her clients. She is organized, detail-oriented, and has an eye for aesthetics.
She is comfortable using technology and enjoys browsing websites for inspiration.
Frustrations
Limited customization options
Lack of Real Photos
Slow Response: Asal is time-sensitive and dislikes websites that have a clunky ordering process
Time Efficiency
Find a Reliable Partner: Asal wants a cupcake website that can handle big customized orders with ease
Personalization: She values personalization and needs a website that offers a wide variety of flavors, toppings, and decorations to match the theme of her events
Goals
Story Board
She receives the notification of the successful order
On the day of the events, the cupcakes are shipped from Toronto Cupcake to the event venue.
Everyone is enjoying the cupcake and Asal had a convenient experience ordering the cupcakes.
Booking.com is celebrating its 10th anniversary.
Asal is the event planner and has decided to look for some cupcake towers which showcase their visual identity, which are gluten free as well
Asal opens the Toronto Cupcake website, she customized her order in the Toronto cupcake website and places her order.
Persona: Asal
User story: An event planner, Asal, needs to order a large stack of cupcakes for the Booking.com event
I utilized storyboards to motivate stakeholders into providing transparency, and created a collective focus on customer scenarios they would concentrate on for the upcoming period.
Development Stage
Define
Discover
Develop
Deliver
Double diamond
Design Framework
Designing things right
Based on the user problems and business goals, we started to develop the design ideas. In every stage, we did usability tests to make sure we are designing things right .To improve the Information Architecture, we conducted open card sorting with 10 participants.
Open Card Sorting Using Figjam Platform
Users engaged in an open card sorting activity using the Figjam platform, where they were prompted to organize cards into groups that made the most sense to them. This interactive exercise provided valuable insights into user mental models, preferences, and the natural associations they make when categorizing information.
Site Map
We analyze card sorting data to identify popular categories, helping us make informed decisions about information layout and content hierarchy for the Information Architecture.
Sketches
Usability Test Result
Following the design process, we created prototypes based on our final wireframes and conducted a usability test involving five participants. Users remotely completed three tasks, offering valuable data on click paths, task completion rates, and noteworthy observations. For a comprehensive overview of the findings, you can access the full report [HERE]
“Kindly visit the Toronto Cupcake Website and proceed to order a customized cupcake tower featuring a combination of chocolate and vanilla flavors. Customize a set of 24 cupcakes with a chocolate sponge, red velvet frosting, and raspberry topping. Additionally, upload the provided logo file to be included on these cupcakes. Conclude the process by completing the checkout to confirm your order. Please be aware that this task is designed for feedback collection to enhance our website and is not an evaluation of your abilities.”
Delivery Stage
Making sure that the final product works well
In the Delivery stage of the Toronto Cupcake website redesign, the crafted design concepts have come to life. Through the implementation of high-fidelity prototypes and development efforts, the new website is now a tangible reality. We continued to do usability tests, iterated and refined as needed.
Define
Discover
Develop
Deliver
Double diamond
Design Framework
Interactive prototype
Click around to use the prototype
Icon are from icons8.com. Mix & Mach library from Lucian popovici.