Knead Bakery App
Project Overview

The Product

Knead Bakery is a regional bakery located across the United States. Knead Bakery strives to deliver freshly hand crafted, quality cakes, muffins, breads and other Bakery goods. They offer a wide variety of competitive pricing. Knead Bakery target are on the go, guests who don’t have the time to prepare baked foods

The problem

Busy mom’s, professionals and college students lack the time to prepare and make baked goodies.

The goal

Design an app for Knead Bakery that allows users to easily order customize, and pick up their baked goods without the hassle of waiting in long lines.

The Role

UX designer and researcher in charge of designing the Knead Bakery App from start to finish.

The responsibilities

Conducting interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility and iterating in design and responsive design.

Knead Bakery App
understanding the user

summary of user research

I conducted competitive audits,  interviews and created user flows, user personas, and empathy maps to understand who I am designing for and their needs. A primary user group identified through the research was on the go working adults who want instant access to their food and don’t have time to wait in long lines

This research further revealed that wait time wasn’t the only factor limiting users from going to the bakery. Certain users had problems not being able to customize orders on the go, applying reward credits to purchases and easy access to low carb options.

pain points

Users are tired of waiting in long lines to be able to order their food

time

Users want to be rewarded food related items for spending money

NO REWARDS

Users have to go to the physical location to customize their orders

CUSTOMIZATION

Users are tired of waiting in long lines to be able to order their food

time

PROBLEM STATEMENT:
Lauren is a student who needs a bakery with strong wi-fi connection because she wants to connect and surf the web with ease.

user persona: Lauren

I mapped Lauren's user journey to better understand and empathize with what users need in an app like Knead Bakery. 

empathy mapping

paper wireframes

The main goal is for the home page to have a navigation hamburger menu and different variations of where the hero image is and to have different cards for the user to order now quickly and upcoming specials for the month and to view any rewards that they may have on the page. The thought of it was just to create a one hero image and several cards going vertically down and one image explaining this months reward

digital wireframes

The goal of this digital wireframe is to tell as much of the entire app on one page as possible as well as showcasing the most important features. The ordering on the go, the monthly special offers, the bakery rewards

My goal in cart page is to display the item being ordered with a short description and the quantity to order along with other items with the subtotal and total at the bottom for the user to go to the checkout and pay.

Low Fidelity Prototype

The main user flow is that the user opens the Knead Bakery App. They want to order on the go. They click the Order on the Go button and then they select a bakery of their choice and then they select cakes and pies and choose Celebration Cake. when they choose celebration cake they go through a list of options add to the car and then they go to the checkout and fill out the checkout information to complete the order.

I conducted a usability study with five participants using the low fidelity prototype for Knead Bakery. This study supported in how to progress with the high fidelity mockups and prototyping.

When creating the research plan, I established research goals as well as research questions that the study aimed to answer.

user testing study findings

1.  Users are satisfied how easy it is to order on the go.
2.  Users needed clearer condensed customization options.
3.  Users needed the checkout process to be streamlined on one page. 
4.  The menu selections are not in alphabetical order. 

refining the designs

hi-fidelity mockups

When I started creating the high fidelity version of Knead Bakery, I created a 'Sticker Sheet' where I could easily place icons, colors, components where needed. 

The final high fidelity prototype presented a cleaner user flows for customizing a cake order from the bakery and the checkout process. It also gave the users more options towards the end for dine in, pick up and delivery. You can see the hi fidelity prototype clicking the button below. 

The original color for the Knead Bakery App was of the hexcolor code of #FE7800. However, after looking into the accessiblity guidelines this color failed the test. I changed the color to what it is now #BF5700.

We used form labels for the different types of text boxes the users have to fill out along with adding an error message if the user gets an item that is incorrect.

Make The heading text bold to stand out in hierarchy and made it large compared with the paragraph text. We made the body copy at 16 pixels making it easier for the user to read.

Change the color orange to a more burnt orange for color web accessibility guidelines. It has a contrast of 4.57:1

accessibility considerations

going forward

impact

The biggest impact of my own design actually came from one of the study participants who said “The App was easy with a step by step organized process of getting your order ready paid and complete. It was more organized then other apps that I have used and it was clean and didn’t ask for too much.

what I learned

The biggest things that I learned throughout this entire process was how to conduct a usability research study with user tests of your designs. This helped fully transform the overall application design making the designs entirely user focused and zeroed in on creating solutions to their problems.