Eat-N-Go App
User experience design for Eat-N-Go, a mobile app that enables restaurant-goers to quickly and easily pay their bill from their mobile devices. No more waiting for the check, wasted time, or frustration. Users simply finish their meal, pay by phone, and go.
Deliverables: User research, low- and high-fidelity prototypes, user testing, iterative design revisions, proof-of-concept presentation.
Role: Research, user interviews, information architecture, visual design, user testing.
The situation
You’ve probably been there before: you’re out to dinner on a super-busy night. Your meal is finished and you want the check, but the server is nowhere to be found. When the check finally does arrive, it takes forever to pay. Dining out shouldn’t be this frustrating.
Research
Research goal:
Identify people’s pain points when they dine out at a restaurant.
Topics explored:
Finding a restaurant, reservations, checking in, payment, splitting the bill, tipping.
Audience:
We interviewed adults who dine out multiple times per year and are fiscally responsible for paying their bill.
Insights
Payment method:
11 out of 14 people said that they prefer debit or credit cards over cash
Waiting for the bill:
9 out of 14 people said that they hate waiting for the bill
Splitting the bill:
8 out of 14 people said that they usually split the bill equally in a group
Restaurant location and reservations were also important, but not cited as frequently as payments.
User persona
The findings were compiled and distilled into a user persona to answer the question “Who are we designing for?” Our persona, “Impatient Pam,” represented the idealized version of our target audience, and helped remind us of her goals, needs, and frustrations as a restaurant-goer. Pam is an editor who dines out frequently with her husband and friends. She's always very busy and hates wasting her time:
The problem
Pam needs a more efficient way to pay for dinner because she gets frustrated waiting for the check and splitting the bill.
Hypothesis
We believe that by creating a tool to pay for meals on her mobile device, we can alleviate Pam’s frustration of waiting for the bill.
We will know this to be true when paying and leaving is no longer dependent upon the server handing Pam the check.
Competitive analysis
Direct and indirect competitive apps were studied to understand how they work, what they do, and how they solve users’ needs. The most common “must have” features were payments within the app and search capabilities.
Direct competitor: Tabbedout
What we learned: Checking in probably can’t be 100% digital and will require some interaction with a greeter or server. This is because somebody will still need to seat you upon arrival.
Indirect competitor: Allset
What we learned: Clearly articulated menu items, options, and prices help the user feel in control at all times. Friendly, accessible language is reassuring.
Information architecture
How it works
There are two phases to the Eat-N-Go app: pre-meal check in (when you arrive at the restaurant) and after-meal check out (when you pay and leave).
Pre-meal check in
When a guest first arrives at the restaurant, the greeter gives them a 4-digit check-in code. Next, the guest enters the code into the Eat-N-Go app, which directly links their account to their restaurant order. The guest is then seated and orders their meal as usual.
After-meal check out
Guests can check out on their smartphone, completely bypassing the wait for a check. After the meal, the guest taps “View the bill” to review all items ordered. Once the transaction is complete, the guests are free to go.
Guests can pay the entire bill or split the bill with others (other diners must also have Eat-N-Go installed). Split bills can be divided equally or itemized per dish. Multiple guests can share the cost of a single item (e.g., a shared appetizer).
User flow
A user flow was created to help define critical steps in the user journey and uncover potential problems prior visual design. In particular, this helped simplify the complexities of the pre-meal check-in process and splitting the bill with others.
User flow, pre-meal check-in process:
User flow, after-meal check-in process:
Navigation
After identifying users’ primary goals and needs, features were organized into the following navigational categories: Check In, My Bill, Near Me, and Account. Check In is used during guests’ arrival at the restaurant, and My Bill is to view their order and pay. Near Me lets users to search for restaurants that accept Eat-N-Go, and Account lets people manage their credit card and account information.
Site map
A full site map was created to ensure information was organized logically, in the places where users would most expect to find it:
Feature prioritization
To provide the best experience, we focused on core features that address the most immediate user goals. Other relevant features can be incorporated into future product iterations.
Now (addresses user needs)
• Secure payment and tipping
• Split bill with others
• Search for restaurants
• Restaurant details
• Split bill with others
• Search for restaurants
• Restaurant details
Next (nice to haves)
• Neighborhood maps
• Search result filtering
• Comments and reviews (e.g., Yelp!)
• Search result filtering
• Comments and reviews (e.g., Yelp!)
Prototypes
Low-fidelity prototypes
Low-fidelity paper prototypes (sketches) were created to identify key screens that comprise “the happy path”—the most ideal, efficient path to the user’s goal, from start to finish. In this case, the user goal was to view an order and successfully check out. The hand-drawn prototypes enabled us to quickly visualize new ideas, create alternate versions, and explore possibilities without committing to a specific solution too quickly. The paper prototypes were turned into a working prototype using the Marvel app.
Wireframes/medium-fidelity prototypes
Sketches were translated into medium-fidelity wireframes and included navigational elements, icons, button designs, preliminary content, and image placement. Wireframes were turned into InVision prototypes and then tested with users.
High-fidelity prototypes
Multiple design revisions were done based upon user testing. Iterations included elimination of unnecessary or redundant steps in the user flow, simplification of the screen layout, and placing greater emphasis on important information, such as the amount due. Some of these changes are featured below.
Check-in process
Before: Restaurant check in called for an NFC (Near Field Communications) reader to link the app to the restaurant’s Point of Sale (POS) system. In testing, users were confused by this process. Scanning equipment was unavailable for testing, which probably contributed to users’ confusion.
After: Due to technical complexities (security, accessing the back end POS system), NFC was eliminated. Instead, users were asked to enter a unique 4-digit code that grants easier access to the bill. In testing, users navigated this process more easily than NFC.
Reviewing a bill
Before: During testing, users felt the amount due didn’t stand out and needed to be more prominent. When splitting a meal, users were confused because both guests’ totals were shown. It was unclear if the user was paying for part of the bill or the entire bill.
After: In the next iteration, the amount due was made more visible by enlarging the type and adding color. To clarify the amount owed, the other guest’s total was replaced with a caption that read “Your guest will be charged separately for their bill.”
Itemizing a bill
Before: To itemize a bill, users were prompted to itemize each dish one dish at a time. In testing, users felt too many steps were required. They suggested reducing the number of steps, and itemizing per person instead of per dish.
After: In the next iteration, each item was accompanied by user names and check boxes, enabling users to select multiple items at once. The new design also allowed more than one person to split a single item (e.g., a shared appetizer).
Tipping
Before: Tapping “Modify tip amount” brought users to a new screen to add a tip. In testing, users commented that the items, subtotal, and tax were not visible from this new screen.
After: In the next iteration, the tipping tool was redesigned and inserted below the order details. With this new solution, the food items, prices, subtotal, tax, and tip were accessible from the same screen, all at the same time.
Branding
To enable consistency across screens, and to make sure the experience aligns with user expectations, we developed a simple and inviting brand approach. Highlights are featured here:
App name and logo
A great name and logo are important to grab users’ attention and provide clues to what the app is all about. A range of clever and catchy names were explored, but Eat-N-Go worked best. For the logo, an arrow suggested motion and expediency, and easily translated into an app icon.
Colors
Reds and oranges are considered “appetizing” colors, and are commonly associated with food and food apps. A vibrant coral color was selected for the main header bar and icons, with purple accents. Neutral grays were used for copy, with plenty of white for backgrounds.
Typography
Typography has the ability to communicate a distinct brand personality. We chose Gotham Rounded because its round, “bubbly” shapes project an image of friendliness and simplicity, and make the experience feel fun and easy to use.
Iconography
Icons appear in Eat-N-Go navigation, and were designed in solid form (instead of outline) to be crisp and legible at small sizes.
Next steps
We’re off to a great start but there’s more to be done. We’ve identified the following areas for further development in the near term, and a few that may (or may not) be addressed in the future.
High-priority features
The following features have been identified as potential areas for further development:
• Neighborhood maps that show all restaurants in the area: users expressed a desire for aggregated maps to be included in the “Near Me” search results.
• Search result filtering: filter search results by cuisine, distance, parking availability, dress code, cost.
• Comments and reviews: display user comments and reviews from external sources, such as Yelp!
• Explore whether to add “how it works” illustrations to the onboarding process or welcome screen
Low-priority features (not under consideration)
While the following items could be useful, they don’t address the user needs that our app is trying to solve: alleviating the frustrations of paying and splitting the bill:
• Booking
• Restaurant Menus
• Restaurant Recommendations
