PROJECT: The Bakery

ROLE: UI/UX Designer

TIMELINE: 2 months

Project vision

The Bakery is a local patisserie that offers custom cakes and other homemade desserts to locals. As most of the businesses, The Bakery had to adjust its business model during the pandemic. As a result, they decided to create an e-commerce website where customers could quickly order desserts and get them delivered or picked up in-sore on a preferred date.

Challenges

Allow users to order a custom cake online quickly and easily, which would save customers time.

Offer users the possibility to receive a price estimate in real time based on their selections.

Allow users to preview in real time the custom cake based on the choices they make.

Offer users the possibility to filter cakes that can be delivered on the same day.

Kickoff

As more and more businesses moved online during the Covid-19 pandemic, our goal was to create a solution for The Bakery to sell their cakes and other desserts online. For this purpose, we had to create a flawless ordering process with users’ needs in mind.

Thus, in order to identify the users’ needs and pain points, we have conducted a qualitative research, which proved to be very valuable. During user interviews, we have gained a lot of important information about users’ needs and frustrations, which helped us to come up with the most optimal solution.

“What is the product and who is it for?”

What do our users need the most in a service like this?

“Who are our biggest competitors?”

“How can we make it stand from other websites?”

“Who is our primary audience?”

“What are the challenges we will face moving forward?”

Preliminary ideation

We used affinity mapping to identify not only the general scope of The Bakery, but to decide which direction we wanted to take the product. This was a form of brainstorming during our kickoff period that proved to be very helpful in setting up the foundation for the rest of our process.

Research Insights

We conducted user interviews to identify the needs and pain points of those who order online cakes for different occasions. An important aspect we kept in mind was the custom cake ordering. Here below is a summary of the findings and feedback we have obtained from the interviews and which were the basis of our design process.

Meet the Users

Jennifer Anderson is a busy mother and wife. She works an accountant and likes to host parties at home. Whenever she is hosting one, Jennifer orders food and a cake for guests. She likes to order cakes from bakeries that allow her to customize the cake as she is passionate about theme parties.

Linda Adams is a mother of 3 children and a grandmother to 2 grandchildren. She enjoys having her family over for dinners or for specials occasions. Every time her children and grandchildren come over, Linda buys a cake. She likes seasonal flavors as it makes her enjoy more the season.

Craig Scott is a young professional who is always in charge to organize parties at work. Whenever there is an occasion and the office decides to celebrates he is the one who needs to order food and desserts. Everyone likes Craig because he is punctual and responsible.

Meet the Users

PRIMARY USER

NAME: Jennifer Anderson
AGE: 35 y/o
EDUCATION: Master’s Degree
OCCUPATION: Accountant
HOMETOWN: Arlington, VA
FAMILY: Married, 1 child

SECONDARY USER

NAME: Linda Adams
AGE: 55 y/o
EDUCATION: Master’s Degree
OCCUPATION: Teacher
HOMETOWN: Vienna, VA
FAMILY: Married, 3 children

COMPLEMENTARY USER

NAME: Craig Scott
AGE: 26 y/o
EDUCATION: Bachelor’s Degree
OCCUPATION: Sales Manager
HOMETOWN: Potomac, MD
FAMILY: Single

Competitive Analysis

The competitive analysis is a critical part of the research process. It provides strategic insights into the features, functions, flows, and feelings evoked by the design solutions of competitors. We have identified direct and indirect competitors of our client to better understand how to design a superior experience. Here are some findings:

Easy to navigate vs Cluttered pages
Custom cakes vs Non-custom cakes option
Delivery vs Pick up
Product preview vs No preview feature
Price estimate in real time vs Price estimate at checkout

Preparing the Journey

We constructed a user flow of what a basic start to finish journey looks like while scheduling an appointment. This helps us in understanding ways users can interact with the product, as well as allowing us to see navigation through user goals.

Wireflow

After sketching out some wireframes and thinking through the preliminary flow, we reviewed what was necessary, unnecessary , and what areas needed improvement. We poured a lot of our time into this step to make sure we had the finishing touches on the underlying UX before moving onto the visuals.

Iteration

After creating our prototype from low fidelity wireframes, we conducted an unmoderated usability study. We asked different participants to order a custom cake in our prototype in hopes of garnering enough feedback to use for our next set of design iterations.

Before

After

Before

After

Before

After

Before

After

CHALLENGE 01

The main objective of The Bakery is to allow users to order online custom cakes quickly and easily without the need to go to the shop. A clear and simple interface is critical for achieving a great user experience. Every detail needs to be logical and users should be guided through every step seamlessly.

CHALLENGE 02

To avoid exceeding the budget, The Bakery offers users the possibility to view in real time the price estimate for the custom cakes. This way, users can make appropriate changes to the selections to stay within the budget. It also provides more comfort to people to make changes to their selections rather than saying the cake exceeds the budget to a real person in the shop. This is especially beneficial to corporate orders when most of the time there is a limited budget for this purpose.

CHALLENGE 03

The research has shown that users prefer to see a preview of the cake as they make their selections. Thus, we have decided to add this feature to allow users to visualize in real time the cake and have realistic expectations.

CHALLENGE 04

Convenience is all users want, including when it’s about having their orders delivered. Some users stated during the research that they prefer same-day delivery option, even if they would have to pay more for that service. Thus, for certain cakes and based on the availability, users can choose same-day delivery.

Style Guide

The first and foremost consideration to make while designing a bakery is the of only a few colors. We decided to use for our project eye-catching and warm colors, such as shades of appetizing pinks, lip-smacking browns, and fresh mints. The selected colors helped convey the feeling of urgency to try the products and trigger the appetite. The main typeface of choice for the website is Acumin Pro. We wanted to select a sans-serif typeface that is bold, clear and full of a personality script typeface.

Takeaways

Working on The Bakery was incredibly rewarding, I got to experiment with some new Adobe XD features, and narrow down my design process. It was quite challenging to create an ordering process for a product that allows customization. First, it was because of the limited knowledge I had about the baking industry and second, I had to keep in mind both the needs of users and of the business. Too much customization can be troublesome for the bakery, while very satisfying for the users.

Be sure to check out the process for The Bakery’s creation below!