E-commerce Checkout Optimisation
Reducing Friction in High-Customisation Ordering Flows
Toronto Cupcake is a local e-commerce bakery. This project focuses on improving the online ordering experience, making it easier for users to browse products, customize orders, and complete purchases with minimal friction.
Business Goals
Boost Sales Conversion
More users complete purchases
1
Implement Customization Feature
Introduce a user-friendly customization feature to cater to customers seeking personalized cupcake orders.
2
Fewer drop-offs in ordering flow
Reduce friction
3
Discovery Stage
Audit & Problem Framing
Reviewed the existing experience to identify friction points in browsing, customization, and checkout.
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 Behavior
Customers typically want to place orders quickly, often on mobile and under time constraints.
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.
Business Impact
Friction in the ordering journey directly impacts conversion and order completion.
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.
Flow Simplification
Restructured the ordering journey to reduce unnecessary steps and improve clarity.
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
Solution
Simplified Product Browsing
Clear layout and hierarchy for faster discovery
Guided Customization Flow
Step-by-step experience reducing confusion
Streamlined Checkout
Fewer steps and clearer inputs
Mobile-Optimized Experience
Improved usability on smaller screens
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
Measurement Strategy
Success was evaluated through task completion, flow friction, and drop-off points across the ordering journey.
Interactive prototype
Click around to use the prototype
Icon are from icons8.com. Mix & Mach library from Lucian popovici.