Duration
4 Months
Team
Solo
My Role
User Research
Competitive Audit
Wireframing
Prototyping
Usability Testing
Visual Design
Creating Design System
Software
Figma
Paper & Pencil
Zoom
Target Device
Desktop
Project Overview
Ordering custom cakes over the phone can be challenging due to time constraints and environmental factors. Communicating intricate design details verbally may lead to misunderstandings, especially in noisy environments like busy bakeries. Time constraints during phone orders can result in rushed decision-making, impacting order clarity. In contrast, online ordering platforms provide a visual interface, allowing customers to carefully customize their orders at their own pace, minimizing errors and ensuring a smoother experience. Online ordering allows customers to place orders 24/7, overcoming the limitations of time constraints for phone calls. This flexibility empowers customers to make decisions at their convenience, enhancing the overall customer experience
Peeling Back the Curtain: What's the Stakeholder's Wishlist?
Unveiling the Business Goals and Must-Have Requirements
Business Goal
The goal was to improve the ordering process and communication.
We introduced an online system for easy communication and approval emails, a clear policy section on our website, and streamlined custom cake ordering through a quote system, as well as an easy step by step, clear customization process.
Business Requirements
-
Bakery owner to have the capability to interact with clients and authorize tailored baking requests
​
-
Customers have the option of uploading pictures for their customized cake orders, and they can also send specific instructions to further personalize their orders
​
-
List of ingredients and allergens is provided to the user
​
-
Simplify the customization process: Make it as easy as possible for customers to customize their cakes by streamlining the process. This could involve breaking down the customization into small steps, providing clear instructions, and minimizing the number of clicks required to make a selection​
​
-
Provide a clear checkout process: Make it easy for customers to complete their purchase by providing a clear and simple checkout process. This could involve minimizing the number of steps required to checkout, providing a progress indicator, and ensuring that the checkout page is easy to navigate
​
-
Incorporate social proof: People are more likely to purchase a product if they see that others have had positive experiences with it. Incorporate customer reviews and ratings into the site to help build trust and credibility
​
-
Offer multiple payment options: Providing multiple payment options can help improve the user experience by accommodating a range of customer preferences. Offer options such as credit card, PayPal, and Apple Pay to make the checkout process as seamless as possible.
User Pain points
The most critical and essential objectives that were required to ensure user satisfaction were identified through the collection of data from user surveys, interviews, and competitive analysis.
The most essential objectives were:
-
Easy site navigation and check out process
-
Organized information and uncluttered look
-
Clear list of ingredients
-
Customer reviews
-
Reorder option
-
Option to save a product and also be able to share it with someone
-
Good quality images
Understanding User Pain Points
​
User surveys and interviews were conducted to identify user needs and wants, while a competitive analysis was performed to determine best practices and areas for improvement.
​
Research
​
Over 25 user surveys were conducted and analyzed, in addition to 5 user interviews, to identify user pain points and tailor the design accordingly through data analysis and interpretation.
Competitive Analysis
.jpg)
Main Findings from User Research
Weakness and Frustrations
​​
-
The website was disorganized and cluttered, making it difficult to navigate
-
No save or share feature available
-
No list of ingredients or allergens provided for the item
-
Price not included
Strengths
​
-
Easy to follow step by step instructions
-
Clear prices and customizable options
-
Re order option for faster and easier order placement
Opportunities Found
-
Clear flow and good organization
-
Customizable features
-
Provide user with list of ingredients and allergens
-
Nice images and appealing UI
After Unveiling Research Insights,
let's step into the Design Playground: Ideation and Wireframing Take Flight!
Initial Wireframing
The low-fidelity wireframes were created by referencing the user flow and site map in order to efficiently establish visual hierarchy and map out important screens. The wireframes were produced using Figma, and underwent multiple rounds of iteration before the final design was achieved. Throughout the process, the wireframes were presented to potential users for testing and feedback, with the ultimate goal of improving the design for the user.
Design Approach and User Testing
Perfecting the Experience: A Design Odyssey
Fueled by the Rhythm of Frequent User Testing.
Usability Testing
.png)
The initial sketch for custom cake page would offer all the selection including, size, flavor, filling, frosting, and decor on one page. the results after the first usability testing showed:
​
-
Users didn't like the long scroll
-
Wished to receive some sort of confirmation on option selected to be present while selecting other options
-
They wanted to see the price adjustment as they select options to be able to make a better decision
-
They preferred to see a progress bar or some similar feature to track the steps done and steps unfinished
​
Next iteration
​
-
Conducted tests to determine which placement of the action button users prefer the most
​
-
Made sure that all the ingredient and allergen information is easily accessible to the users as they make their selection
​
The custom cake page design was modified based on user feedback from the initial usability test to better suit their requirements
​
-
Created a step-by-step process design and incorporated a progress bar, so users can easily navigate through the process without getting confused or losing their way
​
​
​
​
​
​
​
​
​
​
​
-
A section for price updates was added to reflect the user's
selected options, and the price was adjusted accordingly
​
​
​
​
​
​
​​
​
.png)
New design modifications were implemented after conducting additional usability testing:
​
-
The steps for choosing size, flavor, filling, and frosting were consolidated onto a single page, but the tab was designed to remain closed until the user decides to open it.
-
Provided clear feedback to the user upon selecting an option and updating the price accordingly.
​
.png)
​
-
The action button will remain inactive until a selection has been made, after which it will become activated
​
​
-
Provided instant feedback to the user by highlighting the selected option with a color and simultaneously updating the subtotal
​
​
-
Once the user clicks on the save button, the next dropdown menu appears promptly, allowing the user to make their next selection.
​
From Idea to Pixel: Infusing High-Fed Flair into Polished Designs.
High-Fidelity Design
.png)
Design System
Future Improvements
Things that could be added to the design in the future to make it more user friendly would be
​
-
Provide visual aids: Use images and graphics to help customers visualize their cake designs. This could include showing different cake shapes, frosting colors, and decorations, and providing a 3D preview of the final product
​
-
Offer suggestions: Many customers may not know what they want in terms of cake customization, so provide suggestions or recommendations based on the occasion, recipient, or theme
-
Ensure mobile optimization: Given that more and more customers are using their mobile devices to browse and shop online, it's important to optimize the ecommerce bakery site for mobile devices. This could involve creating a mobile-responsive design that adapts to different screen sizes, simplifying the interface, and ensuring fast load times.