FULL CASE STUDY

Nom

Designing an imagery-focused food discovery app 🌮 🍺

Many encounter the everyday problem of not knowing where to eat with your friends or wondering what new dishes and restaurants you'd want to try. Nom takes advantage of food imagery to help users find their next food adventure.

I designed the Nom app from user research, information architecture, user flows, wireframing, to high-fidelity prototypes.

Interact with the prototype below!

Many encounter the everyday problem of not knowing where to eat with your friends or wondering what new dishes and restaurants you'd want to try. Nom takes advantage of food imagery to help users find their next food adventure.

I designed the Nom app from user research, information architecture, user flows, wireframing, to high-fidelity prototypes.

Research

The Problem

A usual problem kept bugging me whenever I was out with my family or my friends—where do we want to eat? I wanna go somewhere new. What's new in town? Any cool places to try? Once you get there is another set of questions. What should I get? What's everyone's go-to dish? What's their specialty?

I narrowed down the problem to these two points: People don’t know where to go to eat and people don't know what to get from so many dish options.

I conducted user interviews to determine user behaviors and pain points on discovering food establishments and dishes. By asking them about variables, their daily process, and their expectations, I was able to determine that:

  • Users appreciate details, but ultimately like simple and straightforward reviews.​
  • Users find that existing apps or solutions are cluttered and bloated.​
  • Users like to research what food is good in a menu to narrow down choices and increase chances of having a good experience.​
  • Users find it easier to browse than to search​
  • Users like seeing pictures of the actual dish in a restaurant’s menu and are more likely to order something they’ve seen.​
  • Users like suggestions!​

Additionally, with analyzing competitors and aligning their features with user needs and frustrations, I established the goals of the design: to streamline the item searching and selecting process​, to provide simple and straightforward dish reviews​, and to provide reliable suggestions and related information to the user​.

Screen Shot 2019-11-13 at 10.38.11 PM

Solving the problem

I initially attempted to structure features by content type (locations and dishes) and tested using early wireframes. My goal was to test the minimum viable product at low fidelity. Can the user easily make sense of the app with minimal instruction? ď»żI shadowed the user on how they would use the sketches to find a dish at a restaurant as if it were an app.


Screen Shot 2019-11-12 at 11.23.02 PM

In this round, I found that the user's first instinct is to always use a search bar if they already have some idea in mind. If not, the user starts looking for suggestions. Users felt overwhelmed with the large list of suggestions as there was no context—What cuisine do these fall under? Where are these dishes located? Why are these showing up? "Is it chronological... like Instagram?"

For the next round, I set to provide categorization and filtering for the user. Adding the ability for the app to locate the user or ask for a desired location also provides better suggestions in real-time.

Lowfi

With another round of testing, I was able to determine the final information architecture of the site. It was more instinctive for users when features are structured by task instead of content type, leading me to separate discovery features from reviewing features.

Screen Shot 2019-11-13 at 11.18.04 PM

High Fidelity

Branding

I developed a branding system for the app, including logo, typography and color palette. Despite wanting to deviate from red tones commonly used in food apps, research still showed that red was the best for complementing most food imagery.

nom_colors_crop
nom_logos

Discovery

The top of the discovery screens invite the user to search in freeform. Three main discovery pages allow the user to browse in more narrowed funnels. What's New is for curated and trending dishes, restaurants, and cuisines. Food is for the latest shared dishes in the area. Nearby is for finding restaurants and dishes in the user's proximity.

While these discovery pages have a lot of images, they are given proper context with category, cuisine, dish, and rating labels. This allows for more informed searching, instead of mindless browsing. Horizontal scroll allows for longer lists while keeping titles visible.

Discover – High Fidelity 2

Visual Menu

Aside from a grid view similar to discovery flow, the menu view categorizes images like an actual restaurant menu—a format users are already familiar with.

Each restaurant page displays the most pertinent information. This was kept short and simple to let the restaurant's dishes be the star of the page. Necessary call-to-actions to be able to get a table are prominent for quick access.

Visual Menu – High Fidelity 2

Next steps

I would like to be able to research on review system to make sure users are encouraged to review and that reviews are kept trustworthy. For additional improvements to enhance the location experience, I plan to research on adding more information on locations without adding clutter and adding the ability to review locations, not just their dishes. There is also an opportunity to think about how images are prioritized and sourced for each dish—whether they should be uploaded directly in-app or sourced from partners, and determining metrics for quality food photography.