Case Study:
Sweeties Bakery Website Design
Project Overview
The Problem
The available online website was just limited to a menu. Also, the only way to order was to call and pay in person.
The Goal
Design a cake shop website to be user-friendly by providing clear navigation and offering online payment options for pick-up or delivery.
The Benefits
The current Sweeties location has parking for 6 cars. Having a website for customers to order from the comfort of their homes will ensure that Sweeties serves all its customers and not miss someone who couldn't find parking. By ordering online, customers can pay online and pick up their cake with ease. This way Sweeties won't have to worry about unpaid finished cakes going to waste because they didn't get picked up.
The Product
Sweeties Bakery is a small business cake shop in South Bay California. The typical customer is between 19-65+, and most users have families or celebrate often. Sweeties’ goal is to have a checkout process that is smooth and easy for all ages.
My Role
UX designer designing a website for a cake shop from conception to delivery.
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs and responsive designs.
Project duration
October 2021 - November 2021
Understanding the user
I conducted interviews and created empathy maps to understand the users I'm designing for and their needs. A primary user group identified through research were people who are typically tasked to get the cake for events, so they order ahead and are ready to just pick up their order.
This user group confirmed initial assumptions about the cake shop visitors, but research also revealed that the ordering process was not the only factor limiting users from ordering a cake. Other user problems included parking space, payment options, or challenges that make it difficult to place an order and receive the cake.
          User pain points
1. Experience
Online ordering was non-existing for this cake shop.
2. Payment Options
The only way to pay was in-person. If an order was placed over the phone, in order to pick it up, the customer would have to wait in line to pay.
3. Menu
The menu online was never up to date to the menu inside the shop when placing an order over the phone or in-person
Persona & problem statement
Nadia is a librarian who needs intuitive website navigation and listed ingredients for each cake because they want online cake ordering to be quick and easy.
User journey map
To assist identify potential pain areas and improvement possibilities, I produced a user journey map of Nadia's experience using the cake store website.
Starting the design
Users' main complaint was the absence of a website, therefore I utilized that information to develop a sitemap.
The goal of this work was for me to make strategic and effective system decisions, which included website navigation. The framework I picked was created with the goal of making things simple and straightforward.
           Paper wireframes
Following that, I created paper wireframes for each screen on my website, taking into consideration the user's concerns regarding payment options, checkout flow, and an updated menu.
Screen size variations
Because the Cake Shop customers use a variety of devices to visit the site, I began working on designs for extra screen sizes to ensure that the site would be fully responsive.
Digital wireframes

It was easy to see how the redesign could help solve user pain points and improve the user experience by moving from paper to digital wireframes.

A key part of my plan was prioritizing the placement of useful buttons and aesthetic elements on the homepage.
Screen size variations
Usability Study Findings
I developed a low-fidelity prototype to begin testing the concepts, which you can see here. This prototype was tested with 5 people in an unmoderated usability study. The following are the key conclusions of the usability study: 
1. Account
During the checkout process, there wasn’t a clear way for users to log in to their account to pre-fill previous billing and shipping info.
2. Delivery or Pick-up
While in the shopping cart, there wasn’t a way to pick a date for pick-up or delivery option.
Refining the design
Based on the insights from the usability study, I made changes to improve the site's cart function. One of the changes I made was adding a section to insert the date for delivery. This allowed users the flexibility to have the same date if they wanted to switch to the “pick-up” option instead.
          Accessibility considerations
1. Headings
I used headings with different-sized text for a clear visual hierarchy.
2. Landmarks
I utilized landmarks to aid users, particularly those who use assistive technology, navigating the site.
3. Screen Readers
I built the site with alt text on every page for easy screen reader navigation.
Screen size variations
Based on my earlier wireframes, I included considerations for other screen sizes in my mockups. Because consumers purchase on a range of devices, I thought it was essential to optimize the browsing experience for a variety of device sizes, such as mobile and tablet, to ensure that users have the best possible experience.
High-fidelity prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype and featured design improvements made following the usability study, as well as suggestions from my team.

View the Cake Shop high-fidelity prototype
Going forward
Our target users said the design was easy to browse, the photographs were more engaging, and the information about the cakes was clear.
What I learned:
I learned that even minor design changes can have a significant impact on user experience. The most significant takeaway for me is to always keep the user's real needs in mind while developing design concepts and solutions.
          Next steps
1.  Testing
Perform a second round of usability testing on the redesigned website.
2. Ideation
Identify any more areas of need and come up with new features to fill them.

You may also like

Back to Top