hangry mockup images

Project Overview

There are a number of restaurant and map apps on the market, however, there is very little truly live information that can help users decide which restaurant to go to where they will not have to wait and will have an overall pleasant experience.

View Prototype

The Problem

Yelp, Google Maps, Open Table, etc all provide users information about reviews, location, hours, menus, and general restaurant details, however, there is no current app on the market that provides real-time, live information about a restaurants wait time, line length, or noise levels. Restaurant goers are left in the dark about this type of information until they arrive at the restaurant. Arriving at a restaurant that is too crowded or busy can mean restaurant goers turn away and go somewhere else.

The Solution

Hangry is the only user-submitted, and community-based app (similar to Waze) that provides real-time details about a restaurants wait time, line length, and noise levels so that users can know ahead of time if it is worth going to that restaurant or if they should go somewhere else. This information is reported by actual users, rather than in partnership with the restaurant, so others can trust the information to be accurate.

Design Roles

  • User Research
  • UI/UX Design
  • Visual Design
  • Branding

Design Deliverables

  • User Research
  • Competitive Analysis
  • User Personas
  • User Stories
  • User Flows
  • Wireframes
  • Branding/Identity
  • Prototypes
  • User Testing Results

Design Tools

  • Pen & Paper
  • Google Forms
  • Draw.io
  • Figma
  • Sketch
  • Usability Hub
  • InVision
  • Maze

Discovery & Research

User Research

To begin, I surveyed a wide range of users across multiple demographics, age groups, and professions, in order to get an understanding of their current use of restaurant, search, and map apps, to get an understanding of their likes, dislikes, frustrations, and to get an understanding of the limitations that each felt regarding their app(s) of choice.

See full survey results >

Key Insights:

  • 100% of surveyors reported that they have gotten to a restaurant or bar only to find that it is too crowded and they aren’t willing to wait
  • 91% of surveyors find that scenario to be very frustrating, frustrating, or somewhat frustrating
  • 62% of surveyors use an app to look up restaurants in their area, with Google Maps, Yelp, and Open Table being the most popular
  • 77% have used Waze and of those, 91% find it helpful and 61% have contributed to it
  • Features that you wish your app had? Overwhelmingly, users wanted live wait time information
  • Key user suggestions: 1. Provide an incentive for people to submit information (similar to Open Table's rewards program.
    2. Make it as easy as possible to contribute
pie chart img
Question posed to surveyors:

Do you think that if an app had a feature where users submitted information about how crowded a restaurant/bar was, you would find this helpful?

83% answered 'yes'

Competitive Analysis

I performed competitive analysis and SWOT analysis of 3 different restaurant/search type apps, including Google Maps, Yelp, and OpenTable given that those were the 3 most popular based on survey results. Additionally, I also performed competitive analysis and SWOT analysis of Waze, given that this app will be based on its workflow. Some analysis highlights are below.

View full analysis >
google drive logo

Google Maps: Popular times information is not truly “real-time” or “live” - it is based on aggregated data that can only truly be an estimate

dropbox logo

Yelp: Yelp recently acquired a company called “Nowait” - which offered users the ability to join a restaurants waitlist from their phone, prior to arriving at the restaurant

box logo

Waze: "One of the unique aspects of Waze is the ability to direct users based on crowdsourced information. Waze users are able to report a multitude of traffic-related incidents from accidents to police traps. This data is used by Waze to help other users either by alerting them of the condition ahead or even rerouting the user to avoid the area entirely."

box logo

Open Table: When you book and honor reservations through OpenTable, you can collect Dining Points. These points can be redeemed for Dining Rewards that can be put toward meals at many OpenTable restaurants. You can also redeem points for Amazon Gift Cards* and, from time to time, donate points to charitable causes.

User Personas

Based on user surveys and the competitive analysis performed, representative user personas were developed in order to portray the ideal audience for this app idea

    Miguel persona

    Miguel

    Account Manager

    26 | Male | Charleston, SC


  • Motivation
  • Loves going out with his friends and co-workers and loves having a good time. There are so many good places to try in Charleston!

  • Goals
  • There are so many places to eat in Charleston, but it would be really nice to find one that wasn't always crowded all the time. Knowing about the crowd and wait times ahead of time would definitely help his decision.

  • Frustrations
  • Miguel gets hangry and is very impatient when it comes to waiting. He hates waiting especially when it comes to food. His friends can attest to how grumpy he can get.

  • "My friends tell me that I get 'hangry!'"
  • View full persona >

    Natasha persona

    Natasha

    Brand Manager

    31 | Female | Richmond, VA


  • Motivation
  • Loves trying all of the new restaurants that are popping up around town.

  • Goals
  • Would really like to have the ability to check out if a restaurant is crowded or not before wasting her time only to end up going elsewhere.

  • Frustrations
  • Gets frustrated when she shows up to a restaurant only to find that it is too crowded to get a table and the wait is 30+ minutes. She's usually only willing to wait a minimum of 20 minutes otherwise she is going somewhere else.

  • The self-proclaimed "foodie"
  • View full persona >

Information Architecture

User Stories

Based on product demands, user research, and user personas, tasks were developed that indicated what new users, returning users, and all users, needed to accomplish. The tasks were then organized into high, medium, and low priority to form user stories.

View all user stories >
new user stories

User Flows

Based on research, competitive analysis, and user stories, user flows were then developed in order to map out the ideal user experience. These were first sketched out by hand and then digitally.

View all user flows >
user flow sketch
digital user flow
uploading and organizing user flow
create a project or folder user flow

Wireframes

Referring back to the user flows, wireframes were created for each task. Firstly, sketches were drawn of the initial design ideas and then they were produced digitally. This was a continuous process until all user flows had been successfully wireframed.

View all wireframes >
sketch wireframes
sketch wireframes
digital wireframe of main page
digital wireframe of restaurant page
digital wireframe of restaurant page

Round 1 - Usability Testing

At this point, I decided to do an initial round of usability testing with the app’s wireframes to ensure that I was going in the correct direction and to ensure a good user experience. Firstly, I used “Marvel” to test 5 different scenarios for the user to go through: 1. Learn about the app, go through onboarding, and sign up or log in; 2. Search for a restaurant called “Don’t Look Back” and go to the restaurant page; 3. Submit restaurant details; 4. Go to the rewards points page; 5. Review notification and submit details.

View full round 1 usability test results >

Key Insights:

  • Overall, the users found most scenarios to be very easy. The biggest thing that needs to be addressed is the icon for the Rewards page.
wireframe usability test result

Branding & Identity

Branding

After wireframes had been created digitally, I began the process of creating a brand concept for this app. I first started with mind-mapping & word association to begin the branding process which ultimately led to the name as well as some logo concepts. I then developed a moodboard to further the branding process and to help with the look and feel of the app.

mind mapping image
moodboard

Based off of the moodboard, I developed some logo ideas and went through some iterations. Initially, I had 2 logo ideas, the wolf and a crab. I ultimately decided to A/B test these concepts to see what other potential users preferred based on the concept and brand idea. The wolf had a slight preference overall at 58% so from there I continued iterating on the wolf logo concept.

logo ab testing

Once that process had been completed, I developed an overall app color scheme. The last step in the branding process was the creation of a style guide that included detailed information about the logo, color scheme, typography, UI elements, and overall brand look and feel.

High Fidelity Mockups

Once I had a clearer idea of the product’s identity, I started the process of building out the high fidelity mockups so that I could ultimately develop a prototype and begin usability testing which could then lead to further iterations and improvements.

See original mockups >

Original mockups and iterations of login screen

original login mockup
4th iteration of login page mockup
5th iteration of login page mockup

Original mockups and iterations of restaurant popup

original popup mockup
4th iteration of popup mockup
5th iteration of popup mockup

Original mockups and iterations of the restaurant details screen

original details mockup
5th iteration of details mockup

Original mockups and iterations of submit screen

original submit screen mockup
2nd iteration of submit screen mockup
5th iteration of submit screen mockup

Prototypes & Testing

Testing

Once the high fidelity mockups were complete, the testing commenced so that design iterations and changes could be implemented based off of those results.. Tools such as InVision, Maze, and Usability Hub were utilized for usability testing as well as A/B testing in order to ensure an ideal user experience was achieved.

hangry testing results

User testing results:

To begin testing, I conducted a number of remote and in-person usability tests as well as deployed Maze tests. Overall, users thought that the app was easy and straightforward with only a few recommendations:

  • It seems that the “filter” process is something that needs to be slightly adjusted - possibly bringing more attention to that CTA by increasing the size or weight of the icon
  • Adjust bottom toolbar to bring more attention to search icon so that users can easily access and it is clear
  • Bring more attention to "more details" area of restaurant pop up information

Testing Results

The biggest takeaway from testing was the ease at which users were having, which was very encouraging! The app itself seems very user-friendly and familiar to users. The biggest challenge is to ensure users are motivated to utilize the full functionality of the app as its success relies on user input. It is crucial to ensure that users are aware of the benefits and rewards of submitting information into the app.

Conclusion

Final Touches

Based on all of the usability and A/B testing, additional changes to the layout of each page were made based on those results.

View Prototype
final welcome page mockup

LESSONS LEARNED

What worked? Iterating and in-person/remote usability testing. Based on feedback and usability test results, further changes became clear and improvements were made to further enhance the overall user experience of the app.

What didn't work? Maze testing. Given that there are multiple ways to use this sort of an app, it was difficult to create a “mission” and have there be a successful ending point when in reality this is not necessary for this app. I was able to still use the results as I analyzed users click patterns and heat maps, which showed that users were actually completing the mission successfully.

Doubts going into the project: That I would be the only one that would find an app like this helpful.

Most surprised by: Based on survey results, an overwhelming majority of those surveyed listed live wait time as a feature that they wished their current restaurant app had.

What would I have done differently if given more time? I would redo the Maze test and try to find more participants to do in-person/remote usability testing. Maze allowed for saving time, however, the results were a bit skewed and with doing in-person or remote usability testing, I am better able to get direct user feedback rather than asking users at the end of a Maze test to voluntarily provide feedback.

What I learned: That not only myself, but others think that this app would be useful. The feedback was very positive and now find myself wishing that this were a real app.

Future use: Producing projects based on real-life frustrations or coming up with something that is lacking in your own life can make for a successful project, as it becomes clear that you are not the only one wishing this were an actual app. This is also backed up by the fact that Yelp just purchased the NoWait app for $40 million!!

Thanks for stopping by!

Get In Touch My Resume