top of page
Project overview
The product:
Sweet cake is a cake ordering website that offers affordable pricing options. The users are in between 18-60 years old, and most users are college students and parents. Sweet cake goal is to make it easier for users to order cake.
Project Duration:
December 2021 to January 2022
The Problem:
Available online cake delivery websites have confusing design and checkout process.
The Goal:
Design a sweet cake website by providing a clear navigation and checkout process.
My Role:
UX designer leading the sweet cake website.
Resbonsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
Software:
Adobe XD
User Research:
Summary:
I Conducted user interview to better understand the target audience and their needs. I discovered that many target users treat online cake websites to order cakes on special events or occasions like birthday parties/anniversary. However many cake ordering websites are overwhelming and confusing to navigate which frustrated many target users.
Pain Points:
Navigation:
Interaction:
Experience:
Online cake delivery website designs are often busy, which results in confusing navigation.
Small buttons on cake delivery websites make item selection difficult, which sometimes leads users to make mistakes.
Online cake delivery websites don’t provide an engaging browsing experience.
Persona:
Problem Statement:
Mamta is a busy school teacher who needs intuitive website navigation and medium size text and buttons which can be easily see through the naked eyes.
User Journey Map:
I created a user journey map of Mamta's experience using the site to help identify possible pain points and improvement opportunities.
Paper Wireframes:
Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and checkout flow in mind. The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.
Paper Wireframes Screen Size Variations:
I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Desktop Size
Mobile Size
Digital Wireframes:
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
Desktop Size
Mobile Size
Low-Fidelity Prototype:
Link to prototype
Usability Study:
Findings
1) Cart:
Users couldn’t add items to cart due to not having a page for add to cart.
2) Checkout:
Users weren’t able to understand the checkout process and find it confusing.
3) Customization:
Users find it annoying to scroll down to see the items and wanted a more customized way to view items easily and users were also confused with website logo design , search bar placement.
Mockups:
1) Based on the insight from the usability study, I added a page for add to cart button so that the users can order Items latter whenever they wants to and It also provides a better user experience.
2) To make the checkout flow even easier for users, I added checkout details such as “sign in” “shipping and payment” and “place order” to make sure the checkout flow has been completed.
3) Users find it annoying to scroll down so, I customized all the product information into one row to make it easy for users to find what they need. Users were also confused with logo design, search bar placement so I customized them in a single row as well to make the user experience more innovative and user-friendly.
High-Fidelity Prototype:
Link to prototype
Mobile screen size:
Style Guide:
Takeaways:
1) Impact:
Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
2) What I learned:
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
bottom of page