ChompChompNow


The creation, user research, and design of a mobile app that makes it easier for people to find new restaurants and decide on where to eat at with their friends / colleagues.
See Prototype

Role: Ideation | Strategy | UI and UX Design
Duration: 1 month

Background

Millennials spend 44% of their “food dollars"on eating, and some struggle when choosing a restaurant and decision paralysis. This is something that I personally have struggled with a lot, and I know others who have as well. This was validated through user research.

Solution

ChompChompNow is a food discovery and decision-making app. The app should use design patterns and functionality that make it easy for someone to find a new restaurant and make decisions with their friends, but also have the option for the user to customize the app to match their needs.

For this project, I wanted to learn about the challenges people had when it came to looking for places to eat at. This would be used to determine the problems the app should be solving for.

What I found

  • ⅘ participants mentioned that they look at restaurants as a collaborative effort between friends and coworkers. They tend to use group chat to make a decision or just talk in person (if on the spot).
  • Participants don’t always have problems when deciding on restaurants to eat at, but ⅘ of them have struggled in the past when choosing a place amongst a group of friends. This is due to dietary restrictions, preferences, and wants.
  • The people that struggled when deciding where to eat out are usually the ”decision makers/planners” in a group or have strong opinions on where they want to eat at.
  • All participants cared about location, dietary preferences when looking for a restaurant. ⅘ participants mentioned price as a factor, and ⅗ participants mentioned atmosphere as a factor.

What I did

  • Designed in friends preferences, and a polling system. This was to help a group of people find/decide on restaurants as opposed to individual users
  • Designed filtering and preferences to narrow down restaurants based off of dietary restrictions, and what users don’t want to eat / like to eat. 
  • Designed for the “decision maker/planner” so users can add in the date/time, and # of people eating when searching for restaurants.
  • Designed an integration with OpenTable so users only see restaurants that are available.
  • Made sure users can easily filter by location, dietary preferences, and price. Ensure those factors are shown in the restaurant cards.

Final Output

I created high-fidelity prototypes of ChompChompNow that lets users create an account, search for restaurants, add preferences and poll their friends.

Full Design Process

Interviews

Building on prior research that validated the problem, I interviewed 5 participants between the ages of 23 - 38 years old who dine at restaurants relatively frequently (at least 1x a week). I wanted to learn about how they currently look for restaurants, what they care about, and how they ultimately decide on a restaurant. I wanted to see how they researched new restaurants with friends, and any pain-points they had along the way.

Persona & Empathy Map

I found that there was a distinct type of person that needs a way to make it faster and easier to decide on restaurants.

See Kevin. He is the “decision-maker” in a group and would usually be the one to plan a hang-out or an event. Generally, he is not too picky about the restaurant he eats at, as long as it meets everyone’s different dietary restrictions. Ultimately, he wants to plan an event that generally satisfies everyone’s wants and dietary restrictions for a specific date and time.

There is an opportunity to design around Kevin’s goal of planning an event by making it easy for people to input their dietary preferences and restrictions. Additional features - like integrations with reservation apps will also make it easier for him to see what restaurants are available based on filters.

Design 

Design Goals

Participants expressed frustration when trying to decide on places to eat at with their friends / colleagues, so there was an opportunity to build for those who wanted to make decisions faster with a group of people. Being able to define dietary restrictions, or preferences for groups or individuals was key.  

User & Feature Flow

I brainstormed different features with the developer, taking into consideration what was feasible technically.

The key functionality we wanted were:

  • The ability to add user's and friend's dietary restrictions preferences
  • A list of restaurants based off of dietary preferences / restrictions
  • Information, reviews, images, and photos scraped from Google business accounts
  • Filters (pricing, cuisine type, atmosphere, etc.)
  • Availability checking by integrating with an OpenTable API
  • The ability to poll friends to vote on a restaurant

It took some time to wrap my head around how the flow would work for a user so I built out user flows and process flow to really understand how it would work for someone going through the app.

First Iteration

For the first iteration of ChompChompNow, I sketched out what the flow for main sections of app would look like. I started with the on-boarding and account creation flow - where the user would input all of their dietary restrictions, what they like eating and what they don’t like eating.

Following account creation, the user would create an “event” with the number of people, location, and date/time. After that, they would add or create their friends' preferences to pull an initial list of restaurants that are available.

The list would cap at 3 restaurants, and a user would have to “remove” a restaurant from the list if they didn’t like it to show a new one. This was to limit the decision paralysis a user would have.

This ended up being an app that was very focused on the “event” and planning side of deciding on restaurants, and less about the actual restaurants.

Low-fidelity Wireframes

When I was going through the initial flow from my sketches, I was thinking about how it could get confusing  for someone who is expecting a “food app”. They would have to create an event or go through multiple steps of adding friends before they would even see restaurants. After asking a few people, it sounded like while the planners in a group cared about the event planning side, they still wanted to get to restaurants faster.

I created lo-fi wireframes that took away that event creation part and went from creating a profile straight into a list of restaurants.

I also took the time to build out the poll feature in more detail. A user could create a poll from the list of restaurants, and then use their phone's external share feature to send the link through any of their apps. They can also view the poll after.

Testing & Evaluative Research

Testing & Research Goals

I wanted to gather feedback about the app, and test the lo-fi prototype to see if there were any friction points or areas of confusion that might prevent a user from using the app fully. I also wanted to see how users could use the app otherwise.

The moderated sessions went through general feedback, and a user creating an account, adding filters, adding friends preferences, and saving the list of restaurants to share as poll.

Top Findings

After conducting 5 sessions, I found that 2 users did not find the app useful.

Only 2 of the users were able to complete all the tasks with no guidance or instruction, but because it was a lo-fi prototype, many people gave valuable feedback on what they thought of the app. There were tons of tweaks to the design and functionality, but I have chosen to focus on only a few of the major components.

Restaurant List

I discovered that many participants wanted some sort of clarity before seeing a restaurant list.

  • 1 participant found it confusing to go straight into a restaurant list from account creation
  • 2 additional participants mentioned that they would want to first add in the location, or have that more clear when a list is shown
  • 1 additional participant would have wanted to add in the number of people eating before seeing a restaurant list

I decided to implement back the events section to cater to those who were more of a planner.

When it came to the buttons at the bottom of the restaurant list, 1 participant mentioned that they would like to be able to share a list externally without polling so the options at the bottom of the restaurant list were changed from 'save list' and 'create poll' to 'create poll' and 'save list and share'.

1 participant mentioned the page having a lot of clutter due to the two lines of filters / navigation at the top, and the sticky buttons at the bottom. I decided to have the poll button at the bottom of the page instead.

Adding Friends' Preferences

⅗ participants found adding new friends' preferences to be very confusing.

2 participants did not understand what creating friends preferences meant, and 2 participants thought the flow was very lengthy if they would have to create one for each person from scratch. In addition, 2 participants struggled to add participants because they had to jump back and forth between creating a new preference, and add existing ones. There wasn’t a seamless process.

I completely redid the friends preferences flow so it’s more efficient, required less steps, and was less confusing overall.

Polling

⅖ participants would want to see how to share a poll in-app (instead of sharing externally through the OS). Based off that feedback, and feedback about friends preferences - I learned that it’s important to make the app as sticky as possible since it’ll be significantly easier to use.

I reworked the way sharing/polling worked so that sending a poll to friends in-app would be the primary way someone could share their list.

The option to share a list externally (but not as a poll) and the option to send a poll externally are still there, but not the primary option.

Branding

ChompChompNow is meant to be an app that is helpful, easy-to-use and, ultimately, fun!

The logo represents a fun, light-hearted brand through the combination of the smiley face, tilted head, and bite out of its head. The spoon was added to ensure that people associate the logo with food.

Yellow and purple were ultimately selected as the brand colours. Yellow is commonly associated with food, but I also wanted people to feel joy, energy, and happiness when using the app. Purple was used since it works well with yellow, but also balances with the tranquility of blue and the energy of red.

UI & Secondary Round of Testing

I fully designed out the UI of the main flow of the app based off the feedback and iterations made from user testing. A style guide was created based off of the branding, and final UI designs.

Afterwards, a secondary round of testing was done with 11 participants through Maze. I’m currently working through all of the testing results, as well as in-person feedback given after testing.

Reflection & Challenges

ChompChompNow was a huge project in terms of understanding user behaviour and designing new unconventional flows that still were intuitive for a wide variety of users.

The biggest challenge with me was designing all the different flows in a way that was intuitive for the user. One example was reworking the ‘friends preferences’ multiple times so that there would be less steps, but also not be too simple. At first, I designed this app for the main persona “Kevin” - a person who likes planning. However, understanding that the app could be used by those who planned less made me rethink flows that would work for both “Kevin” and someone else who would plan less. For example, designing friends preferences by both individual and group.

Overall, while challenging, it was fun to build a project that was completely my own. I had a ton of fun playing with different colours, icons, and designing the UI.

Next Steps

I’ll be compiling the feedback from the second round of user testing to determine if there are additional iterations that need to be done.

Following iterations, ChompChompNow is a collaboration between myself and my developer partner, who will be building out the app next. Stay tuned in the next few months for progress!

Other Projects

Retrofit Travel

Retrofit Travel is an e-commerce business that wants to redesign their website. The website was redesigned to focus on the wants of the traveller who does research online for high quality products.
Read More

Invision Design System Manager (DSM)

A conceptual redesign of InVision Design System Manager (DSM) with added functionality, and an updated UI for better information architecture.
Read More

Kaus

Kaus is a conceptual insurance company with a responsive e-commerce website that allows people to get a quote and buy insurance online.
Read More
2019 - Catherine Gui