Case Study: A Bakery Website

A platform where people can order cakes from their favorite bakery with a few simple clicks.

Project Brief

Takes the Cake is a local bakery that wants to create a website to help their customers order cakes and their other products online. For this project, I decided to use a goal-directed design method, which focused on the user persona creation and goals.

My role

User research & Analysis
Persona creation
Wireframes
UI Design & Prototyping
Usability testing

Timeline

November 2022

January 2023

Tools

Adobe XD
Mural
Lucid

Design Process

Research

User interviews
Personas
User Journey Map
Affinity Diagram
Competitive Audit

Design

Wireframes
Lo-Fi Prototypes
Hi-Fi Prototypes
Usability Testing

Test

Usability Evaluation
Usability Testing

Deliver

Documentation
Q&A Feedback

Summary

In this 6 week long project for Takes the Cake Bakery, I took a goal-directed design approach. I primarily used qualitative research methods consisting of literature review, user interviews, competitive analysis, and persona construction. I started by asking myself a few initial questions.

Challenges

Create a product focused UI while keeping the design simple & clean
Design a logical interface for familiar and unfamiliar users
Provide a smooth & straight-forward process for purchasing

"What is the product and who is it for?"

"What do the primary users need most?"

"Who are the biggest competitors?"

"What challenges may be faced moving forward?"

Meet the Users

User Persona: Leah

Leah is a busy professional who needs an efficient way to place large orders so she can accurately provide dessert for office parties.

User Persona: Mason

Mason is a stay-at-home dad, who needs a way to customize his order so he can impress his kids with amazing and personalized cakes.

User Journey Map

Mapping Leah's user journey revealed how helpful it would be for our users to have a way to customize and place their orders directly through an app.

Competitive Audit

Our direct competitors are Milkbar and CityCakes, both are bakeries who serve cookies, cakes, and cupcakes. Milkbar has a clear brand identity and markets themselves well on social media but they don't connect to their local audience. CityCakes is a high end cake shop that specializes in custom, extravagant cakes, however, they lack a clear brand identity.

Our indirect competitors are What's the Kitch? and Deborah Miller Catering. Deborah Miller Catering provides service from elaborate candy bars to sophisticated dessert assortments to decadent plated desserts. What's the Kitch? focuses on gourmet catering primarily for companies and corporations. They cater to the same target audiences as our direct competitors.

Gaps our Competitors Have:

Competitor’s don’t offer an exclusive app
Competitor sites provide a limited amount of accessibility features
Competitor sites are not equipped for easy screen reader usage
Competitor sites lack a clear brand identity

Opportunity Areas:

Offer a mobile app that allows users to customize and place their orders directly
Integrate our app with voice assistive technology
Create a clear brand identity to attract users
Optimize design for screen reader usage

Preparing the Journey

I constructed a basic user flow of what a basic start to finish looks like when ordering a product. This helped me understand the ways users can interact with the product, while also letting me see the navigation through user goals.

Sketching

Wireflow

I had a list of screens to cover all scenarios so I started with sketching designs to detail out the user flows. After sketching these p&p wireframes and thinking through the initial user flow, I reviewed what areas needed improvement and what areas needed to be changed altogether. I then drafted a few iterations of each screen to ensure the wireframes addressed each pain point to meet the users needs before moving on to visuals.

Iteration

After creating a prototype from the low-fidelity wireframes, I conducted a moderated usability study with 5 participants. I asked them 5 questions that had them running through different scenarios in my prototype. I collected feedback from the participants to use for the next round of design iterations.

Findings

Homepage Complications - Users were frustrated that they couldn't complete the main flow of ordering a cake from the homepage. They were frustrated with the amount of time it took them to get to order a cake.
Unclear buttons - In the add to cart section for an item, users were unable to click elements that looked like buttons to customize their order. This issue should not be in any customization settings.
Pickup Options - Users were unclear on what times were available for picking up their order. They would have preferred to have access to what times were taken before selecting their choice.

During the usability studies, it became clear users were frustrated they could not access products directly from the homepage. They were annoyed with the amount of clicks it took them order a product. This issue was addressed in future iterations, as seen to the right.

After a few iterations, I settled on the final design of the homepage. From here, users can access each product the shop offers to reduce the amount of time they have to spend on the site.

The usability studies showed that users were overwhelmed with the customization options when adding a product to their cart. They had trouble clicking on their customizations. This glaring issue was addressed immediately. Users were also confused with how their final cake would look, which caused frustration.

After a few iterations, this was the final design for adding a product to the cart. I ensured clicking on the customization options functioned smoothly. I also chose to simplify the options to reduce confusion.

Users were confused when choosing a pick up time because they could not see in advance what times were unavailable. They were frustrated when they chose a pickup time that seemed to be available only to find out that it was not.

The final design puts the unavailable times in a light grey and crosses them out so it is clear to users what times are available for them to choose.

Style Guide

I chose to include neutral colors to connect with the overall feel of Takes the Cake Bakery. They are a family-owned shop that likes to use local and fresh ingredients in their products. They want their customers to feel warm and welcomed, which is the feel I tried to accomplish through these color choices.

Takeaways

Growing up in a sweet tooth family, I’ve loved bakeries from a young age. As an adult, I struggle to find the time to call individual bakeries to get the product I want. Takes the Cake Bakery solves this problem by allowing users to order products online and make customizations to their orders. I put users at the center of the design process and focused on understanding their needs and goals to make a more usable end product. I learned the importance of honing in on user personas to further the goals of the user and the business. This was an eye-opening experience and reminded me that designing exclusively towards the business goals will not succeed. I needed to keep the users at the forefront of my designs.