Identify people’s pain points when they dine out at a restaurant.
Finding a restaurant, reservations, checking in, payment, splitting the bill, tipping.
We interviewed adults who dine out multiple times per year and are fiscally responsible for paying their bill.
11 out of 14 people said that they prefer debit or credit cards over cash.
9 out of 14 people said that they hate waiting for the bill.
8 out of 14 people said that they usually split the bill equally in a group.
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:
Pam needs a more efficient way to pay for dinner because she gets frustrated waiting for the check and splitting the bill.
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.
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.
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.
What we learned: Clearly articulated menu items, options, and prices help the user feel in control at all times. Friendly, accessible language is reassuring.
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).
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.
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).
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:
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.
A full site map was created to ensure information was organized logically, in the places where users would most expect to find it:
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.
Secure payment and tipping
Split bill with others
Search for restaurants
Search result filtering
Comments and reviews (e.g., Yelp!)
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.
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.
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.
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.
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.”
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).
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.
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:
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.
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 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.
Icons appear in Eat-N-Go navigation, and were designed in solid form (instead of outline) to be crisp and legible at small sizes.
The following items 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
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.