3 weeks in January 2022
Individual Project
To create a piece for my portfolio & the Google UX Professional Certificate
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 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.
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.
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."
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
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.
Carl Smith is a hard working constractor who needs to order and pick-up lunch quickly so that he can get back to work.
Want to see the wireframes in action? View the low-fidelity prototype in Figma.
About the participants:
Supporting evidence from the usability study:
“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.”
Supporting evidence from the usability study:
“The dietary preference icons are very small. I can't even see them with my glasses on.”
Supporting evidence from the usability study:
“I feel like previous orders could be easier to find. Right now it seems buried in the 'my account' section.”
Supporting evidence from the usability study:
“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.”
Supporting evidence from the usability study:
“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.”
Supporting evidence from the usability study:
“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.”
The menu filter button should be larger, moved underneath "select a category," and should be changed to "filter menu by allergen."
Participants found that the allergen icons were to small and pixelated. Enlarge the icons.
The previous orders feature needs to be relocated to a top-level location like the bottom navigation bar.
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 because it currently does not offer any functionality.
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.
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.
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.
Users need to be able to remove items from their cart and adjust the quantity of those items.
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 and lunch times need to be added so that users know when they can order certain items.
Reorder order and reorder items should be combined into one process.
About the participants:
Want to see the final version of the high-fidelity prototype? View the final high-fidelity prototype in Figma.
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
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.
"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."
First, I would recommend a third round of usability testing on the updates completed after the second round of moderated usability testing.
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.
Third, I would prepare files in Figma for a seamless hand-off to the development team.
Other Projects
UX/UI Design @ T-MobileProject type
Kirkland Cafe Menu & Payment App Case StudyProject type
NWMLS Matrix 360 Release ProjectProject type
NWMLS Branded MaterialsProject type
Hula Hoop ProjectProject type
Salmonator GameProject type
Husky+ Project & LogoProject type
NWMLS Golf TournamentsProject type
jess.free882@gmail.com | 425.417.9705
Copyright © 2023 - Jess Freedman