hero-image
cafe-kirkland-logo-04

MENU & PAYMENT APP CASE STUDY

PROJECT INTRODUCTION

duration-16
DURATION

3 weeks in January 2022

role-15
TEAM

Individual Project

target-02
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.

menu
login
filters
latte

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. 

Process

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."

IMG_0403

PAIN POINTS

portfolio-icons-08-1

Online restaurant menus are often difficult to navigate and read

portfolio-icons-10-1

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

portfolio-icons-11-1

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

4-14

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

portfolio-icons-12-1

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

portfolio-icons-13-1

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

MEET THE USERS

Allergic-Alex-1

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.

Construction-Carl

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

STARTING THE DESIGN

INFORMATION ARCHITECTURE

Site-Map-01

PAPER WIREFRAMES

paper-wireframes-menu-and-payment-app_Page_2
coffee-paper-wireframes-1
paper-wireframes-menu-and-payment-app_Page_1-2
paper-wireframes-menu-and-payment-app_Page_3

USER FLOW

User-Flow-01

DIGITAL WIREFRAMES

Screen-Shot-2022-01-25-at-2.27.29-PM-1
Screen-Shot-2022-01-25-at-2.37.46-PM
Screen-Shot-2022-01-26-at-10.12.16-AM

LOW-FIDELITY PROTOTYPE

log-in.jpg
dpf-screenshot
place-order
omelet

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

USABILITY TESTING 1

portfolio-icons-06

RESEARCH QUESTIONS

portfolio-icons-21

6 PARTICIPANTS

portfolio-icons-20

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.”

Screen-Shot-2022-01-25-at-3.40.06-PM
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.”

Screen-Shot-2022-01-25-at-3.46.24-PM
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.”

Screen-Shot-2022-01-25-at-3.49.33-PM
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.”

Screen-Shot-2022-01-25-at-3.55.11-PM
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.”

Screen-Shot-2022-01-25-at-3.58.35-PM
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.”

Screen-Shot-2022-01-25-at-4.01.58-PM

INSIGHTS & RECOMMENDATIONS

portfolio-icons-23
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." 

gluten-free-22
Adjust allergen icons

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

portfolio-icons-24
Move previous orders

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

portfolio-icons-25
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.

portfolio-icons-26
Remove the order now button

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

portfolio-icons-27
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.

portfolio-icons-28
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.

portfolio-icons-29
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.

portfolio-icons-32
Cart quantity & remove

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

portfolio-icons-33
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.

portfolio-icons-30
Breakfast & lunch times

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

portfolio-icons-31
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
Screen-Shot-2022-01-25-at-5.18.12-PM

Dietary Preference Icon Edits

  • Removed icons from menu categories
  • Enlarged icons on menu item description screens
Screen-Shot-2022-01-25-at-5.23.40-PM

Order History Relocated

  • Removed from my account
  • Added to lower nav bar
  • Favorites remains under my account
Screen-Shot-2022-01-25-at-5.24.18-PM

Rewards Update

  • Offers removed
  • In progress rewards combined with available rewards
Screen-Shot-2022-01-25-at-5.24.45-PM

Order Now Button

  • Removed
Screen-Shot-2022-01-25-at-5.25.12-PM

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
Screen-Shot-2022-01-25-at-5.25.57-PM

UPDATED PROTOTYPE

Screen-Shot-2022-01-26-at-10.10.51-AM

REFINING THE DESIGN

STICKER SHEET

COLORS

Screen-Shot-2022-01-26-at-9.39.49-AM

BUTTONS

Screen-Shot-2022-01-26-at-9.43.20-AM

TYPOGRAPHY

Screen-Shot-2022-01-26-at-9.17.01-AM

LOGOS

Screen-Shot-2022-01-26-at-9.33.25-AM-2

MENU ILLUSTRATIONS

FOODS

CONFIRMATION ILLUSTRATIONS

confirmations

ICONS

ICONSSSS

MOCK-UPS

login
menu
cart
latte

USABILITY TESTING 2

asdf-06

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?
portfolio-icons-21-2

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
portfolio-icons-20-2

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.

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
blalala-01-1

Add Tip

  • Added to place order screen
blalala-03

Checkboxes & Radial Buttons

  • Made larger
  • Larger selectable area across text and more
blalala-02

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.

portfolio-icons-08-1
portfolio-icons-10-1
portfolio-icons-11-1

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

portfolio-icons-08-1

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

portfolio-icons-10-1

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.

portfolio-icons-11-1

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."

fahmi-fakhrudin-nzyzAUsbV0M-unsplash

NEXT STEPS

asdf-06
More Testing

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

magnifying-glass-04
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.

portfolio-icons-34
Figma Prep

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

jess.free882@gmail.com   |   425.417.9705

 Copyright © 2023 - Jess Freedman