Eat-N-Go

Pay your bill. Skip the wait.

Eat-N-Go is a mobile app that enables restaurant-goers to quickly and easily pay the bill from their mobile device. No more waiting for the check, wasted time, or frustration. Just finish your meal, pay by phone, and hit the road. Done.

This project was created as part of my User Experience Design coursework at General Assembly. Over a period of 10 weeks, the project spanned the entire UX process, from user research, to low- and high-fidelity prototypes, to user testing, to iterative design revisions. The process was carefully documented, and presented to my class for feedback and critique.

Deliverables: User research, research synthesis, storyboards, low- and high-fidelity prototypes, user testing, visual design.

My role: Research, user interviews, information architecture, user testing, visual design.

Tools: Pen and paper, Sketch, InVision, Marvel, Illustrator.


eatngo_hero_purple.jpg

View the product demo:

eatngo_screens_1a_purple.jpg
eatngo_screens_3_purple.jpg
eatngo_screens_5_purple.jpg

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.

eatngo_quote_angela.jpg

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.

 

So how might we...

eatngo_hmw_1.jpg
eatngo_hmw_2.jpg
eatngo_hmw_3.jpg
 

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.

eatngo_quote_isak.jpg

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.

eatngo_quote_tracy.jpg

Information architecture

Eat-N-Go: 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.

eatngo_how_it_works_pre_1.jpg
eatngo_how_it_works_pre_2.jpg
eatngo_how_it_works_pre_3.jpg

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.

eatngo_how_it_works_post_1.jpg
eatngo_how_it_works_post_2.jpg
eatngo_how_it_works_post_3.jpg

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

Next (nice to haves)

Neighborhood maps
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.

eatngo_logo_sketch_1.jpg
eatngo_app_logo.gif

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.

eatngo_color_palette.gif

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.

eatngo_typography_purple.jpg

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.

eatngo_iconography_purple.jpg

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.

Next (nice to haves)

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!

Later

Explore whether to add “how it works” illustrations to the onboarding process or welcome screen

Maybe, maybe not

While features like Reservation Booking, Restaurant Menus, and Restaurant Recommendations might 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. C’est la vie.