Order your cake and eat it too

Streamlining the emotive ordering process of baked goods

TL;DR

I wanted to remake the IA and e-commerce for a local bakery that has a beautiful product but a cumbersome purchasing process. I interviewed users to better understand their motivations and what they expect (or don’t expect) from a bakery’s e-commerce site. Through discovering pain points that some repeat users had come to know as “just the way it is”, my goal was to create a streamlined, comfortable process for users that was familiar enough but thoroughly improved.

Play with the prototype to see how a user would move through the main functions of the new website. And keep reading below to see how I came to find these solutions.

*Disclaimer: I do not work for Vanilla Bake Shop and the views in this case study are strictly my own. Ideally, I’d be working along side the bakery to learn their business goals and see their insights as well.

Context

Objectives: 

• Identify users pain points in ordering from a local bakery and solve the problem(s)

• Streamline the ordering experience through conducting research and synthesizing data to actionable items

• Create iterations of a desktop prototype based on usability testing and feedback

Constraints and limitations:

• Wireframes and Prototypes were created using Sketch & InVision at first and then moved to Figma for high-fidelity mockups

• Usability testing was moderated and conducted over Zoom

The Process

Research

I started with usability tests of the current site. Although users were able to figure out how to accomplish all of the given tasks, there lots of questions. “Am I supposed to click here? What do I do next? I’m just going to try clicking here.” The SUS score for their current site was 73 which left me looking for users' pain points along the way. Through affinity mapping, I found that users:

• Didn’t know the bakery have an actually storefront location and thought it was a bakery geared towards catering

• And because of that, they didn’t think they could order online

• When they did find that they could order online, they didn’t realize until the checkout flow that they would have to wait 3 days for the cake

I conducted user interviews, and I was able to learn about their previous e-commerce experiences with baked goods by asking the users:

1. How do you celebrate a special occasion?

2. What prompted you to order treats the last time?

3. How did you pick that place?

4. Tell me about that experience from beginning to end in as much detail as you can.

5. What was the highlight of your experience?

6. Any pain points? And how did you deal with them?

7. What was your greater goal in ordering?

Synthesis

Surprise!

I was surprised to learn that the act of buying a cake is not as straightforward as it sounds. For my users, it was an emotional and tender experience that they believed connected them with those they shared the dessert with. It’s a way to show you listen and you care. And their bakery purchasing experience was something more to “get through” to achieve this rather than an expectation to be seamless. With some compassion and attention, I can design an experience that will help them achieve this goal and match the sweetness in their intentions.

Additionally, there were two distinct types of people - the plan ahead person and the last minute person. But both of these types of people shared things in common. They all wanted an easy checkout process, they all wanted to know their options for pickup/deliver to see what works best for their schedule, and they all felt that buying treats makes occasions feel extra special.

What does all this mean?

1. While users are familiar with a cumbersome ordering experience with bakeries and other specialized treat e-commerce, they put up with it because the experience of sharing a cake with their friends and loved ones is more special to them than the process is inconvenient.

2. While there are two types of users (last minute and plan ahead) all customers share a sense of creating a connection over the treats they are bringing to the table.

3. People need an easy way early on in their shopping experience to know what is available and what isn’t available to them based on their food and timing needs.

4. An easy checkout process is highly sought after and needs to look clean, modern, and simple while having all the information they need.

5. Ordering and sharing treats is an emotional and specific experience that cannot be compared to other e-commerce activity and therefore needs to pay special attention to what our specific users goals and desires are.

Personas

Plan ahead Polly is an Office Manager who know’s everyone’s birthdays and cake preferences. She needs to be able to order cakes early and have them ready for pick up in advance. Since she’s in the office while ordering, she doesn’t have a lot of time to spend on this process and wants it to be easy.

The secondary persona is Larry. Last Minute Larry is a super busy Business Consultant and loves to share a good meal with friends when he has the time and isn’t traveling for work. His get-togethers are always thrown together last minute and he wants to be able to pick up treats on the same day he orders them.

Journey Maps:

After creating two personas, I was able to map their current journeys with the highs and lows of their experience to inform and direct me to their main concerns and pain points as a user of this product from beginning to end.

Problem Statements

After seeing their journey map, I was able to craft their problem statements.

Problem Statement for Polly:

Polly needs a more efficient way to search for and purchase cakes that meet her needs so she can plan ahead for her office.

Problem Statement for Larry:

Larry needs a way to easily find out if the bakery has options to purchase and pickup goods on the same day because he doesn’t have time to play ahead.

How Might We (solve these problems)?

Now that I have their problems’ in mind, I need to find their solution. So I went through a HMW (asking myself “how might we” solve this problem?) exercise to brainstorm how to solve their problems.

Solution Statments

After discovering their problems and asking “How Might We” solve their problems, we could find their solutions.

Solution statement for Polly:

By redesigning Vanilla Bake Shop’s website, we will make Polly’s search and purchase of cakes easier by adding ways to narrow her search, simplifying the checkout process by removing unnecessary information, and rearranging the steps of the checkout process.

Solution statement for Larry:

By redesigning Vanilla Bake Shop’s website, we will help Larry find and purchase baked goods to pick up on the same day by adding information to the website and making the process to order clearer.

Focus Points

Based on the research conducted and insights gained, I found the main issues with the current process and brainstormed how we can fix and test them moving forward.

1. Search: Users need a better way to find the goods they are looking for besides scrolling and clicking through pages. If they know what they want, they should be able to type it in and order it easily.

2. Checkout: Users reported to liking easy checkouts and ones that don’t overwhelm the user with too much text/direction. Our goal is simplify this process for them.

3. Same day pickup: Users main pain point was the difficulties of order treats to pick up the same day and that option not always being available and not seeming to be available at all on the current bakeries website. I called the bakery and they assured me they do have treats to order and pick up on the same day so we will make sure the users know this is an easy option from now on.

4. Navigation: Users also got lost in the navigation of the website but from the card sorting activity we will move forward with a paired down version of the categories to make the shopping experience more intuitive to the customer.

5. Homepage: And lastly, from the competitive analysis, I found that users weren’t positive of the function of the current website and they also liked the homepage and advertising on the homepage of the competitors website (MilkBar) so I will work to build a home page that better fits the e-commerce site and lets users know why they are there.

Design

Sketches

I started sketching out the main functions of the website with the new navigation and checkout flow with Polly and Larry’s goals and pain points in mind.

Wireframes

I proceeded to make mid-fidelity wireframes to represent the main takeaways from the synthesis, string the new process together, and get ready to test the first iteration with users.

Develop

Testing

After usability testing with the first prototype, I gathered lots of feedback that helped me make educated changes to better the search, shop, and checkout processes while using the site. The average SUS score was bumped to 90 from 73. All the users were able to accomplish their tasks, and users were surprised and delighted to see a search bar function as they weren’t used to seeing that for a local bakery.

But we also found that users were confused about whether some of the categories were clickable or not. Also that all of the users were confused about the function and language of two different buttons on the product page. Users were hoping to see more evidence that the item had been added to their cart and some users were confused about what cakes were available to them on different days.

Solutions

The solution: was to create a cart dropdown for when items are added to your cart. Because users were confused about what was available when, I also made a clear “Daily Menu” section on the menu page and included a banner/clickable images on the homepage where users can see the menu of items available today. And I simplified the flow on the product page.

My final iteration included design solutions for ordering goods to pickup the same day, ordering a customized cake to pick up in the future, and search/filter functions so users are able to shop in all the ways that meet their needs.

UI & Branding

Style Guide

Moving forward with Hi-Fidelity designs, I created a style guide to ensure consistency and coherency within Vanilla Bake Shop’s branding. Focusing of soft colors to match the colors of Vanilla Bake Shop’s logo and in-store aesthetic.

As my next steps, I went to move into a high fidelity responsive designs. Next, I would like to conduct multiple rounds of usability tests to continue iteration.

Summary

A bakery’s e-commerce site serves a unique purpose — not just to provide food, a tool for celebrating, a shared connection — but its the trust that the goods you order will meet those needs and memories will be made because of it. By understanding that, I was able to see the specific pain points that cake eaters are too familiar with, and instill that trust into the infrastructure of the new site itself.

The biggest thing I took away from this project was the time-old “don’t reinvent the wheel”. I thought by adding two actionable buttons with two different paths would make the ordering experience more clear since there are two different types of ordering.. In the end, it was confusing and users wanted an experience they were familiar with. So I ended up focusing on a streamlined checkout process and focusing on clear IA and copy to let users know where to go for what they were looking for.

I learned so much from working on this project and I grew to love their baked goods (it’s just a few miles away and I had to do some treat tasting for research… obviously). I had so much fun working to better the user experience of this cherished experience and I hope you enjoyed it too!