favburger mobile app concept

How might we design a mobile app for a classic burger joint located in Seattle to create a delightful ordering experience and recognizable brand appearance.

My Role

UX Design: User research, interviews with customers, competitive audit, paper and digital wireframing, rapid and hi-fi prototyping, usability testing, a/b testing, design iterations, design for accessibility
‍Branding & Visual Design
Duration: September - December 2021

Case Study

User Research
Competitive Audit
Wereframes / Rapid Prototype
Usability Studies
Affinity Diagram
Google Certified

Restaurant menu

favburger is an old-timey burger joint. Keeping the menu simple is a part of the brand and customers loves them for great burgers, homemade fries, hand-whipped shakes as well as an old-fashioned simplicity.

Branding , UX/ Visual Design

User Research Insights & Patterns

A group of 10 UX Designers collected data from 50 interviews and 100 surveys. Participants were chosen from the  customers of a popular burger joint in Seattle.

Repetitive activities

70% of customers comming to favburger in regular basics, at least 1-2 times per month, at the same location and tends to order the same items, since menu options are quite simple.

On-the-go app use

Most of the customers use app on-the-go while experiencing multiple distractions
‍Environment: noise, space, light, etc.
‍Action: driving, walking, talking, etc.

User Research
Eric
42 y.o. Real Estate Agent from Seattle

“As a busy parent I appreciate fast, delicious and reasonable lunch options for myself and my two sons while we are not at home and I strongly prefer mobile preorder/pickup!”

  • Every Wednesday
  • Same location & order
  • Driving with Kids
Mark
20 y.o. Student from Seattle

"I'm a burger lover! I have my favorite place from high school that I like to visit 1-2 times per month late at night after the football game or parties. I always order the same meal , this is a tradition! I wish they had a mobile ordering app!"

  • Monthly since High School
  • Same location & order
  • Walking with friends after event or party in Seattle
Jake
25 y.o. Marketing Manager from Seattle

“As a busy Marketing Manager working and living in a hectic Seattle, I appreciate options that help me to have a nice lunch, on budget, without waiting in lines. Timing is critical, since my lunch window is short and I can get in trouble when returning back to work too late. I need to order ahead for pick up to make it on time!”

  • Weekly at lunchtime
  • Same location / Same order most of the time
  • Walking alone or with co-workers

Actionable Insights

Optimize reordering experience for returning customers
Design easy to use on-the-go experience

Big Picture Scenario

Every Wednesday Eric drives his 2 sons to sports and they love to have lunch at the burger joint. The place is always crowded, which is stressful since they can be late for the class. Eric decided to use an app for order/pick-up to skip long lines. He loved the "Fast Order" feature that allows you to create advance orders from home. Eric pleased with the order from the car15 min before arriving. The family is happy with the yummy lunch, they made it with no lines right on time.

Big Picture Storyboard

Close-up Scenario

Eric opens favburger app and decided to try the Fast Order feature. Eric starts by chiising a pickup location. He called kids and they created an order together. Erick selected ASAP Pick Up Time, which meant order will be ready in 15 min after it is placed. Eric reviewed his Fast Order and saved it with the unique name "Wed Lunch". Eric was notified that order is saved and it is now at his app with easy access.

Close-up Storyboard

Wireframes / Rapid Prototype

Usability Study

Study PlanStudy NotesAfinity Diagram

Research Goals

Figure out if the FAST ORDER feature is actually useful
How convenient it is to use FAST ORDER On-the-Go

Unmoderated Usability Study

Session 1

5 participants completed Creating New FAST ORDER task at home. Time: 15 min.

Session 2

5 participants checked out previously created FAST ORDER On-the-Go. Time: 5 min.

Patterns and Insights

1

It was observed that 5 out of 5 participants didn't quite understand what FAST ORDER means and how it is different from NEW ORDER.

It was observed that 5 out of 5 participants had to think before making a decision whether to choose "PLACE ORDER" or "SAVE FAST ORDER".

1: The term "Fast Order" is causing confusion.

2

It was observed that 4 out of 5 participants wanted to choose a location from the first screen “Find a Location” and were disappointed about having to go to the second screen “Location Info”.

3 out of 5 participants wanted to add an item to the cart directly from the “Menu” screen.

2: Users ought to have the option to directly make selections while navigating the Location and Menu screens.

3

It was observed that 5 out of 5 participants didn't agree with choosing time at the beginning.

It was observed that some users preferred to start order choosing Location, other choosing Time or Menu.

3: Explore options for customizing the order sequence.

1: The term "FAST ORDER" is causing confusion.
Before
After
2: Users ought to have the option to directly make selections
while navigating the Location and Menu screens.
Before
After
Before
After

User Flow:
Save your order to use it anytime for quick checkout

Quick checkout

Scenario

Eric reviews and checks out "Wed Lunch" order. He receives order confirmation. Eric can track the order status and get another notification when the order is ready for pickup.

Storyboard

Accessibility

Red and Black is a problematic combination for users with color deficient vision


Diving dipper into accessibility, I've found out that red and black color combination, that were used in my design, is problematic for color deficient vision. This led to the visual design iteration.
‍

Accessibility Considerations
  • All screen elements that user tap are accessible and large enough to interact with in distracting environment
  • Large font size and contrast ratio make an app accessible for people with low vision
  • Use icons for the restaurant menu for more intuitive navigation, but add description
BackNext
Let's connect