Makegood- Restaurant Server Review App

Wanting to grow my UI/UX design skills, I took on a prompt from my mentor/friend Scott Chiu, who currently is a UX designer at Workday. While working a full-time job, I finished this project over the course of a few months to ideate, conduct user research, create wireframes and produce the high-fidelity prototype.

My most updated screens as of May 2018.

The Problem

While there are many ways to rate and review restaurants, these are not focused on evaluating individuals servers. Design an experience where diners can submit positive comments and constructive suggestions for the wait staff, and servers can use this feedback to both improve and help to secure new employment.

My Solution

Introducing, Makegood! Makegood is a mobile app which diners can use to review their waiters, and which restaurant owners can use to improve current staff and help secure new employment.

Target Audience

My target audience consists of frequent diners and restaurant owners of New York City sit-down restaurants that serve meals priced in the $11–30 range. I chose to target specifically New York City because I wanted to target highly-populated urban cities with areas densely packed with restaurants.

Part 1: User Research

Statistics and Paper Reviews

I came across varying degrees of research on the US restaurant economy, but several statistics stuck out to me for the purposes of this project:

  • 36% of restaurant operators name staffing as their biggest challenge to success.
  • 20% say the biggest challenge is retaining customers
  • Roughly three in 10 restaurateurs have job openings they find difficult to fill, signaling a significant hiring crisis in restaurants.
  • Diners prioritize delicious food when choosing a restaurant to visit, followed by quality of service. (2017 Restaurant in Technology Industry Report)
  • Space in Manhattan and parts of Brooklyn can cost twice as much as in Los Angeles or San Francisco. (“Is New York Too Expensive for Restauranteurs? We Do the Math” by Karen Stabiner)

I took away from the statistics that investing in the quality of restaurant staff is crucial to a restaurant’s economic success and popularity. Not only that, but diners want the restaurant’s service to be high as well, so that their dining experiences can be enjoyable.

Competitive Analysis

There are many restaurant reviewing apps out there, but I narrowed down the selection for this project. (can use icons for pictures here)

There are many restaurant reviewing apps out there, but I narrowed down the selection for this project. (can use icons for pictures here)

  • Yelp

Yelp is a popular product that diners use to rate and review their favorite establishments based on food, service, and/or overall experience and also comes in the form of a mobile app. Restaurant business owners can create their own business accounts and respond to reviews left on their page. There is an app for businesses as well. Yelp’s designs is visually-pleasing, intuitive, and efficient. However, users leave reviews based on a variety of factors and there is no way to look at ratings or reviews on restaurant service alone. This might be because Yelp covers not only restaurants exclusively but also stores, landmarks, and other establishments.

  • Zagat

Zagat is a 1979 dining review with honorable reputation and launched an iOS mobile app only recently in 2014. In terms of visuals alone, Zagat’s mobile app design looks sophisticated with an elegant dark-red color palette. However, I found the interface unintuitive to navigate and further, No place to write reviews jsut rate (Food, Service). Google reviews show .

  • Lyft

Lyft is a popular mobile app that offers transportation services to its users. Although Lyft has nothing to do with the food industry, I liked their UX design of rating their drivers. In the app, the passenger is immediately taken to a screen to rate their driver once their ride is finished. Later in this post, I will talk about how important to make my app as seamless as possible to the experience because users might not feel as compelled to review individual servers.

Part 2: Ideation

Personas

For the personas I tried to stray from focusing on the “demographic and psychographic” information, but rather focus on my customer’s “jobs to be done” (thanks Christine for the article recommendation!).

Customer- those who will attend restaurants once- will rate to get the account/ want to help

Customer- those who are loyal customers to restaurants and want to improve the food.

  1. The Restaurant Owner, Gerald Fitzgerald
  • Age: 50, Ethnicity: Hispanic
  • Employment: Restaurant owner of a trendy asian fusion restaurant in midtown Manhattan called The Graze
  • Economic status: Middle-class
  • Understands that nowadays, customers can come for the food but leave because of bad service. They value the restaurant experience.
  • Is busy enough running a business, cannot afford extra stresses that can come with managing the restaurant staff.
  • Does not always know when servers are doing well or not.
  • Would like to use a stress-free, intuitive product that allows servers to be rated in a way that would motivate them to excel

2. The Waiter, Daniel Choy

  • Age: 23
  • Ethnicity: Caucasian
  • Occupation: Nighttime server at the popular restaurant The Graze. Also a full-time college student, working and his wages help pay a part of his education.
  • Economic status: Lower-middle class
  • Would be nice to have positive comments told to him once in a while, everyone would like to hear good things once in a while
  • If he is participating in this new app idea, it would be because of his boss tells him to.
  • Needs and goals- Earn enough $$ to make a living, whether it be through tips (customer), or promotions from his boss
  • Thus needs to do well to be able to do this-> Constructive criticism included, etc.
  • Sub-Goal (once above is fulfilled)- Recognition from Diners and his boss, Emotional recognition

Customers

1. Katie Lo

  • Age: 23, Ethnicity: Asian
  • Occupation: Entry-level planner at an Advertising agency
  • Economic status: Lower-middle class, fresh out of college struggling to pay rent
  • Goes to sit-down restaurants at least once a week for dinner
  • Reviews on Yelp frequently b/c likes to share passion about food and trying new restaurants with others.
  • Wants a good service experience, but does not necessarily want to review on the service specifically

2. Mark Mizori

  • Age: 45, Ethnicity: African-American
  • Occupation: Sales Director of a New York Magazine
  • Economic status: Upper middle-class
  • Frequents sit-down restaurants for usually business lunch or dinner meetings to meet with new sales prospects. Therefore, the quality of food is not the most important but how quick and efficient service is.
  • Notes: Would there be any reason that this person uses the site? Probably only rate them

User Journey Maps

Since I heard that there are no correct ways to create user journey maps, I chose to include stages, thoughts, and emotions.

Example 1- Diner (Katie Lo getting dinner at The Graze)

Before Dining

  • Awareness- “I want to grab dinner and catch up with my friend in the city. A fun, hip asian place sounds nice.” emotions- excitement
  • Research- “Let me look at Yelp, my to-go restaurant places list, @foodnybaby, and other popular Instagram accounts. This place looks good! How about we go there?” emotions- excitement, can be stressful if uncertainty with where to go/consensus with friend on what to choose
  • Choose Restaurant- “Yes, I’m excited! I can’t wait until dinner.” emotions happiness, hope that there is something to look forward to.
  • Make Reservations (optional)
  • Travel to Restaurant- “I’m excited!” or “I’m hungry!” Depending on the many factors, different emotions can come up. The customer can be frustrated/angry if too hungry or if travel is too long. As the subway is the main mode of transportation in New York City, several problems can arise which lead to stress.

During Dining

  • Arrival and Check In
  • Wait to be Seated- Once again, emotions can vary depending on different factors. Wait can be enjoyable if fruitful with conversation, but painful and stressful if wait is too long and Katie is hungry. Wait can be omitted altogether depending on the availability of the restaurant or if Katie has made reservations beforehand.
  • Be Seated by Server- Be greeted by your server, receive the menus, hear the specials. [Waiter leaves]. emotions- excitement. “Oh, let’s order this dish! I’m so excited and can’t wait!”
  • Look at menu with friend and discuss
  • Order Food [Waiter returns] Takes orders
  • Wait For Food- Talk with friend. emotions- can be stressful if the wait is too long.
  • Eat Food- “Yes, the food is here!” Take pictures, Talk. Emotions- Excitement
  • [Server checks up on you, asks how your food is.]
  • Order more food/dessert/drinks (optional).
  • Ask for Check, Pay for food and leave restaurant

After Dining

  • Post photos, videos, reviews or talk about experience- “That food was good/bad! I really liked/disliked the experience. I would/ would not want to go back again.”
  • Return to restaurant in the future (optional).

Creating the diner’s user journey was semi-straightforward, but the next were tricky. How was I supposed to create user journeys of the restaurant’s owner/server? Was it even necessary to create these if the restaurant owner/server was going to use my app before or after their working hours?

  1. Example 2- Gerald Fitzgerald, Restaurant Owner
  2. Example 3- Restaurant Waiter

More Questions/Fleshing Out

I wanted to make sure that I had as much of the research, problem, and goal figured down as possible before I started designing; this article challenged me to ask a lot more questions:

  1. What are the Key Performance Indicators (KPIs)?
  • Acquisition- Diners/restaurants to sign up for Makegood.
  • Activation- Not only will they sign up, but diners to rate using Makegood, and restaurants to monitor using Makegood.
  • Retention- Diners and restaurants to be regular users of Makegood.
  • Referral- Diners and restaurants to recommend Makegood to others.
  • Authority- Makegood to become a well-known, reliable service.

2. What would be other definitions of success?

  • Restaurant revenue
  • Restaurant crew retention rates

3. Which device is best for this project?

Initially I narrowed down my options to 3: mobile/tablet application, website, or a unique restaurant technology device. Each option had pros and cons, but I decided on the mobile/tablet application because I wanted the diner to have a good user experience (websites would be difficult to view on a phone), and be able to revisit the product when they leave the restaurant (cancels out restaurant technology).

4. Would one application be sufficient for both the restaurant and diner?

Because the goals of my two targeted users are different, I decided to design a unique application for each the diner and the restaurant — Makegood and Makegood (Business). I was inspired by Yelp, which also has a separate app for their business application.

5. How would restaurant owners and servers both use Makegood Business?
I initially didn’t think servers would need to use Makegood Business. However, I realized that it might be good that servers could respond directly to the reviews written about them.

Part 3: User Flows

For the diner:

For the restaurant owner/waiter:

While creating the customer’s user flow, I wondered if this process would be too long and cumbersome, especially if the customer user would be using Makegood after they finished their meal and want to leave the restaurant.

I wondered if there was a way to expedite the process. Could there be a technology that automatically matches diners with their servers when diners enter a restaurant so that once they’re finished, they could automatically go to the waiter/ rate the waiter screen? Maybe the technology could be in the form of a barcode scan that’s available on the restaurant storefront, or receipt that could automatically take you to the screen?

For the restaurant owner:

Is there a way that the customer could skip the initial steps and go straight to their server’s profile?

This user flow was trickier to create; I know there were definitely differences between how a restaurant owner and a restaurant diner would use Makegood, but why did the flows look so similar? Going back to the main problem, the restaurant owner would primarily use the app to monitor his/her employees through the input of customers. But couldn’t the owner do that with the above diner user flow? One difference would be that the owner would not be able to write reviews on his own restaurant with the original app. Was this in danger of feature bloat?

Part 4: Low-Fidelity Wireframes

Diner:
Assuming that I’ll keep the original user flow and thinking of the barcode as a future feature, here are my low-fidelity wireframes:

Part 5: Medium-Fidelity Wireframes

Now the part that I’ve been dreading- making my beautiful sketches into the digital in Sketch App. I found a UI template from Platforma which saved my life.

Makegood:

Makegood Business:

Part 6: User Testing, Tweaking, User Testing, Tweaking

I created a clickable Invision prototype of the above screens and tested it on 6 people who never saw my project before. I gave each person one task: to rate their imaginary server Jackson Zhie after eating at the Peking Duck House. All of them completed the task, but I believe the Invision hotspots gave them hints of where to go. 3 people got stuck at the following screen. They did not click the “Review Jackson” button when they reached his profile; instead, they tried to click on the stars:

I think this was because many apps today (like Yelp) allow users to rate by touching the stars directly. Also, my box containing the stars took up most of the screen and inevitably invited users to click on it as the main Call to Action.

My solution was to allow users to click on the stars, so that they would be taken to the review page with their star rating registered. However, they would have to rate the rest of the categories and write something to be able to submit a review.

Questions (and temporary solutions) after creating my first UI screens:

  • Should the dates of the reviews be of when users submitted the reviews, or when they were served? I might be using Yelp as a reference too much, but Yelp does the former so I will follow that for now.
  • Should the modules of the reviews be different sizes depending on the lengths of the reviews? Maybe.
  • Is putting the EST time stamp necessary?
  • When the user starts a review, the date/time automatically shows the current time the user opens the app. This makes me think, is this app designed to be used immediately after eating? or at home?
  • Would customers be able to review the same waiter more than twice? (no matter how rare that may sound).
  • How to prevent fraud reviews? But I guess that’s with any rating service…you can’t stop them. If anything, Makegood Business will be sort of a checks and balance system- owners and servers can respond to comments made about them. Servers can get notifications like FB if a customer reviewed them. Bosses can make them download this app lol.
  • Mental note to also be able to edit/delete/share your review (like on fb or email)
  • Is the “Review Jackson” UX writing ok? How about something like: Make a Review on Jackson’s Service.
  • Should I put a error notification/alert UI when a customer tries to submit a review without writing anything? Yes.

Part 7: UI Design and Visual Branding

From the beginning, I envisioned Makegood to have a bold yellow, black, and white color scheme to stray away from the typical red color palette that a lot of food apps have. Since my app would be used by a broad age group, I wanted the colors to be bold and evoking feelings of legitimacy. I created a Pinterest mood board to pinpoint the feel of the app I was going for.

I wanted this kind of bold, feel but with a yellow instead of red.

As I started mocking, however, I was cringing because the yellow was too strong and hurt everyone’s eyes when they viewed the screens on their phones.

My First UI Iterations:

Frustrated but determined to use a yellow, black, and white color palette, I looked at other apps such as Snapchat, Bumble, and KakaoTalk to see how they successfully used the color yellow. I found that in fact, they don’t use yellow that much at all but more as accent colors.

I saw this picture and thought this may be the solution. When I look at the picture alone, it looks yellow. But compared to my previous designs, it looks more like an orange color: I think the drop shadow helps the white more readable; is it bad that I copy?

Final: Thoughts/Next Steps:

  • Incentive- Related to my previous point, are people actually going to use this app. What’s going to convince them too? If they do use this immediately after eating at the restaurant, a con could be that doing this could take away conversation time- but people do that anyway during the meal by looking at social media. I was inspired by how some restaurants encourage customers to check in to their Restaurant on Yelp by giving out discounts or free food if they do so. So I thought, what if I can give out discounts to customers if they write a review?

Stay tuned for updates on my design to hit the App Store!