MENU & PAYMENT APP CASE STUDY

PROJECT INTRODUCTION

DURATION

3 weeks in January 2022

TEAM

Individual Project

PURPOSE

To create a piece for my portfolio & the Google UX Professional Certificate

THE PROBLEM

The Kirkland Cafe needs to improve the food ordering and payment process for their cafe. They offered a photo menu viewed via QR code that is small and difficult to read. Payment made after waiting in line at the register is not efficient and provides more opportunity for employee and customer exposure to COVID-19.

THE GOAL

The Kirkland Cafe menu and payment app will let users filter menu items by allergens which will affect users with food allergies and dietary preferences by allowing them to select menu items that they can eat. The app will also be easy to use and allow users to place orders quickly.

Want to see the mobile app in action? View the high-fidelity prototype on Figma.

Process Overview

Below is visual that I created as to describe the design process that I went through during this project. I took an iterative approach with two rounds of moderated usability testing. 

UNDERSTANDING THE USER

USER RESEARCH

I started the design process by conducting 5 interviews and 5 competitive audits on local cafes. Afterwards I created empathy maps, an affinity diagram and identified user pain points.

"One of the most frustrating things I experience when placing an order at a restaurant is trying to find something on the menu that is gluten free. Sometimes it doesn't say, and I have to speak with the server about it, who doesn't always know. I'm just trying to avoid getting sick but I also want to enjoy my meal."

PAIN POINTS

Online restaurant menus are often difficult to navigate and read

Paying in-person at the register can expose employees and customers to covid-19 and lines are frustrating

Ordering in-person or over the phone reduces order accuracy and can result in human error, language barriers, and communication issues

Ordering over the phone or in-person means less customer control

It is difficult to find items on the menu that fit dietary preferences and food intolerances

It is difficult to find items on the menu that fit dietary preferences and food intolerances

MEET THE USERS

Alex Pine is a busy, hungry college student who needs to order food from a restaurant with clear allergen information because she is allergic to gluten which could cause her physical harm.

Alex's Journey Map

Carl Smith is a hard working constractor who needs to order and pick-up lunch quickly so that he can get back to work.

Carl's Journey Map

STARTING THE DESIGN

INFORMATION ARCHITECTURE

PAPER WIREFRAMES

USER FLOW

DIGITAL WIREFRAMES

LOW-FIDELITY PROTOTYPE

Want to see the wireframes in action? View the low-fidelity prototype in Figma.

USABILITY TESTING 1

RESEARCH QUESTIONS

6 PARTICIPANTS

METHODOLOGY

1. What can we learn from the steps that users take to order an item from a gluten free menu?
2. what can we learn from the steps that users take to order an item off the menu?
3. Are there any parts in the flow where users get stuck?
4. Do users think that the app is easy to use?
5. Are there more features that users would like to see included in the app?

About the participants:

• Participants order food out at least 1x per week
• Participants use online ordering systems for at least half the orders they place
• Participants are located in the Kirkland, WA area
• 1 participant had a food intolerance
• Participants vary in mobile app comfort level
• Participants are even in gender

• 20-30 minutes in duration
• Conducted remotely on Zoom
• Moderated usability study
• Participants were asked to order a menu item and were then asked to order a gluten free menu item. Next, they were asked to add a new payment method, update their phone number, and order a free coffee that they earned through the cafe's reward system.

Want to see the wireframes in action? View the low-fidelity prototype in Figma.

THEMES

The menu filter was not used

Supporting evidence from the usability study:

• 6 out of 6 participants did not use the menu filter button to filter menu items by food intolerance when asked to order a gluten free menu item
• 5 out of 6 participants suggested a different name for their filter

“I didn’t really notice the menu filter or understand the functionality of it. I can see how the menu filter would be helpful if I had used it.”

The dietary preference icons are not readable

Supporting evidence from the usability study:

• 6 out of 6 participants did not use the dietary preference icons because they are too small, pixelated, and hard to read

“The dietary preference icons are very small. I can't even see them with my glasses on.”

Previous orders and favorites were hard to find

Supporting evidence from the usability study:

• 4 out of 6 participants found that previous orders and favorites were hard to find
• 3 out of 6 participants suggested moving previous orders and favorites to a top-level location.

“I feel like previous orders could be easier to find. Right now it seems buried in the 'my account' section.”

Rewards was confusing

Supporting evidence from the usability study:

• 3 out of 6 participants said that in progress and available rewards should be combined into 1 screen, or section.
• 1 out of 6 participants suggested that rewards be integrated into the payment process

“I wish that I could apply my rewards at checkout. I don’t think I would remember to use the rewards if I had to go to the rewards screen. Also, I should see the available rewards first and the in progress rewards second. I don’t understand why they are separate. When I look at the in progress rewards by itself it looks like I haven’t earned any rewards at all, which is sort of sneaky.”

The order now button is functionless

Supporting evidence from the usability study:

• 2 out of 6 participants attempted to use the order now button
• 2 out of 6 participants said that the button didn't seem to do anything

“It looks like the order now button just made the app scroll down a little. I don’t get why it is there. I mean, the menu is right underneath it. It probably doesn’t need to be there at all.”

The log-in process could be adjusted

Supporting evidence from the usability study:

• 2 out of 6 participants mentioned that they don't normally have to log in to view a menu

“In my experience you create an account after you have selected your food and are placing your first order.”

“The app should start with the menu screen instead of a log-in screen. You should have log-in included in the navigation.”

INSIGHTS & RECOMMENDATIONS

Adjust the menu filter

The menu filter button should be larger, moved underneath "select a category," and should be changed to "filter menu by allergen." 

Adjust allergen icons

Participants found that the allergen icons were to small and pixelated. Enlarge the icons.

Move previous orders

The previous orders feature needs to be relocated to a top-level location like the bottom navigation bar.

Adjust the rewards feature

In progress rewards and available rewards should be combined into one page. Rewards should appear during the checkout process so that users can easily apply them to their order.

Remove the order now button

Remove the order now button because it currently does not offer any functionality.

Make log-in adjustments

The log-in screen should be removed. Logging in should be optional and there should be a log-in button included in the top navigation bar.

Adjust selection buttons

The checkmarks and radial buttons should be enlarged and grouped with the text. When users select the text next to the option it should select that option.

Edit payment & contact flow

The flow of the edit contact info and edit payment methods flow needs to be adjusted depending on where the user is accessing those pages.

Cart quantity & remove

Users need to be able to remove items from their cart and adjust the quantity of those items.

Allergen comment box

Users need an allergen comment box on the submit allergen page in case they have an allergy, or dietary preference that is not on the list.

Breakfast & lunch times

Breakfast and lunch times need to be added so that users know when they can order certain items.

Reorder items & order

Reorder order and reorder items should be combined into one process.

UPDATES BASED ON USABILITY STUDY

Revised Menu Filter

• Larger button
  
• Revised name
• Better location

Dietary Preference Icon Edits

• Removed icons from menu categories
• Enlarged icons on menu item description screens

Order History Relocated

• Removed from my account
• Added to lower nav bar
• Favorites remains under my account

Rewards Update

• Offers removed
• In progress rewards combined with available rewards

Order Now Button

• Removed

Log In Process Revised

• The app now opens to the menu
• Logging in now occurs when the user wants to log in to view history, their account, view their rewards, and/or when making a purchase

UPDATED PROTOTYPE

Want to see the revisions in action? View the revised low-fidelity prototype in Figma.

REFINING THE DESIGN

STICKER SHEET

COLORS

BUTTONS

TYPOGRAPHY

LOGOS

MENU ILLUSTRATIONS

CONFIRMATION ILLUSTRATIONS

ICONS

MOCK-UPS

HIGH FIDELITY PROTOTYPE

Want to see the high-fidelity prototype in action? View the high-fidelity prototype in Figma.

USABILITY TESTING 2

RESEARCH QUESTIONS

1. Do the changes made to the prototype improve the user experience?
2. What can we learn from the steps that users take to order an item from a gluten free menu?
3. what can we learn from the steps that users take to order an item off the menu?
4. Are there any parts in the flow where users get stuck?
5. Do users think that the app is easy to use?
   

6 PARTICIPANTS

About the participants:

• Participants order food out at least 1x per week
• Participants use online ordering systems for at least half the orders they place
• Participants are located in the Kirkland, WA area
• 1 participant had a food intolerance
• Participants vary in mobile app comfort level
• Participants are even in gender

METHODOLOGY

• 20-30 minutes in duration
• Conducted remotely on Zoom
• Moderated usability study
• Participants were asked to order a menu item and were then asked to order a gluten free menu item. Next, they were asked to add a new payment method, update their phone number, and order a free coffee that they earned through the cafe's reward system.

Want to see the high-fidelity prototype in used during testing? View the high-fidelity prototype in Figma.

UPDATES BASED ON USABILITY STUDY

Want to see the final version of the high-fidelity prototype? View the final high-fidelity prototype in Figma.

Menu Filters

• Added applied filters header
• Added filter bubbles

Add Tip

• Added to place order screen

Checkboxes & Radial Buttons

• Made larger
• Larger selectable area across text and more

ACCESSIBILITY CONSIDERATIONS

After completing usability testing and identifying themes and insights in the data I paused to consider the accessibility of my design and make adjustments to my work to meet my accessibility goals. At this time I reviewed my work to ensure the following accessibility considerations.

I used consistent headings, visual hierarchy, and descriptive text for content

I created large buttons with a large selective area that makes them easier to press

I used high color contrast approved by Adobe Color Checker between text and background

GOING FORWARD

TAKEAWAYS

While working on this project I learned to create high-fidelity prototypes in Figma.

I learned that conducting a second round of moderated usability testing can be powerful. It answered questions I had about my prototype and confirmed what was and wasn't working.

I learned how rewarding it can be to create something that users really like. One participant in the study gushed that the menu filter would greatly improve their experience when ordering food.

PROJECT IMPACT

"The menu filter would save me a lot of time and frustration. I love it! I hate going into a restaurant and not being able to find something that is gluten free. As someone who has celiac's disease it is so important that I am certain that what I am eating is safe. When menu's aren't descriptive and servers aren't knowledgeable it can ruin my time out."

NEXT STEPS

More Testing

First, I would recommend a third round of usability testing on the updates completed after the second round of moderated usability testing.

Log-in Research

Second, more research into the best log-in process flow to confirm the process being used now is the right one due to the conflicting opinions received during testing.

Figma Prep

Third, I would prepare files in Figma for a seamless hand-off to the development team.

Home  |  Get To Know Me  | Get In Touch  | LinkedIn

jess.free882@gmail.com   |   425.417.9705

 Copyright © 2023 - Jess Freedman