Foodsy

Food Search and Discovery App

foodsy mockup

CSC318 – The Design of Interactive Computational Media

Jan. 2019 – Apr. 2019

10 min read

Yi Han Zhang, Jamie Kim, Ryan Gu, Hyung Jung Shin, Aamnah Izhar

Directed by Ilona Posner

How can we make Dining Out more Enjoyable and Efficient?

Students and young adults residing in metropolitan areas have trouble deciding on where and what to eat because of a lack of information and information overload.

Our main competitors, Yelp and Google Maps, do not take a food-focused approach in their design. Their food pictures, online menu data, and dietary restriction data are often incomplete or missing.

The Vision

Designing a food discovery app for students and young adults

The design was inspired by fast-paced content delivery apps such as Tinder, Instagram, Tiktok, and Snapchat, known for their playful and straightforward UI. Unlike the more conventional app experiences such as Yelp, Zomato, and Google Maps, where information can be overwhelming, our solution eliminates indecisiveness by focusing on the food, not the restaurant. Users can browse nearby dishes being served in nearby restaurants and can see the information vital to them, such as dietary restrictions.

Formulating and Understanding the problem

How do we know this is a legitimate problem?

We discovered this problem after combining the results from 12 interviews (structured and unstructured), 40 surveys, and 6 observational studies (naturalistic and controlled). These 58 participants were mainly undergraduate students and young working professionals living in Toronto.

Collectively our study discovered

  • The average time participants took to decide on a place to eat was 20min (lowest time: 7.5min, highest time: 45min)
  • A majority of participants relied on technology to discover restaurants. The most common services used were Yelp and Google Maps.
  • Too many restaurant options in the area can be overwhelming
  • Some participants were frustrated that restaurants don’t post their menus online, especially those with dietary restrictions
  • For most participants, restaurant location, reviews, and ratings were the most essential factors in restaurant selection

Key Personas

ash-ketchum

Ash Ketchum

Ash is a single, 21-year-old undergraduate student studying Chemical Engineering at the University of Toronto. He lives downtown with his roommate. Both he and his roommate cannot cook, so they often purchase food to eat. Ash has a peanut allergy.

kimchi

Kim Chi

Kim is a 25-year-old Human Resources Manager who has been working at an accounting firm downtown for a little over a year. Kim is very social and adventurous. During her lunch breaks, she likes to take her team out for lunch. She and her co-workers enjoy exploring new restaurants nearby.

Key Scenarios

exam

Ash Ketchum

Ash just finished writing his three-hour final exam. Exhausted, him and his three friends decide to go eat out. All three of his friends don’t have any preferences, which makes it difficult for them to decide on a restaurant.

vegitarian

Kim Chi

Kim often goes out to eat during weekends with her boyfriend. Kim is a vegetarian and finds it difficult to find restaurants with vegetarian options. For these reasons, she and her boyfriend always visit the same restaurants and are getting tired of the repetition.

Mapping out potential User Experiences

focused experience map

We created this experience map to help guide our design decisions.
It helped us decide which features to include / exclude.

Prototyping

Low-Fidelity

We split up to design and test a paper prototype guided by our design vision, research, and experience map. We came up with
3 high-level tasks our app needs to accomplish for users.

  1. Come up with a final restaurant decision
  2. Discover restaurants by viewing pictures of their dishes
  3. Obtain restaurant information: price, rating, reviews, menu, website, location

To set our service apart, we wanted to place food pictures from the restaurants in the foreground. After multiple quick UI sketches, I found inspiration from Tinder, where images fill the majority of the phone screen.

More sketches of the UI were built up from that idea, including a task analysis diagram and layout flow.

“How about instead of pictures of people, it’s pictures of food.”

Low-Fidelity Testing

I tested my design on 4 participants. They were tested on scenarios and task completion tests using my paper prototype.

View: Low-fidelity usability test script

Findings

My design was straightforward – users completed each task successfully without guidance. There were minor UI and app flow complaints. Also, the unconventionally designed screens took longer for users to understand.

These findings confirmed my direction for the design. For our next iteration, we brought together our designs and results, discussed the successful features of each design, and combined our insights to develop our high-fidelity version 1 prototype.

High-Fidelity v1

Through group discussions, the main design and UI were determined. My team agreed on the overall feel of the app to be playful and simple. Jamie Kim came up with a cartoon-like egg mascot for the app. I established the color scheme and font choice. We all contributed towards layout, icons, graphics, and flow.

High-Fidelity v1 Testing

Before user testing, we refined our design by doing heuristic evaluations. We spotted violations of Nielsen’s 10 heuristics, assigned severity ratings for violations, and proposed a solution for each violation.

To develop a high-fidelity usability test script, we each did a cognitive walkthrough to determine scenarios and tasks to test.

View: High-Fidelity v1 Usability test script

Findings

We found many flow issues such as not being able to go back to the previous screen, not being able to view instructions again, nowhere for users to specify dietary restrictions, and more. There was a significant navigation issue where users could only access settings from specific pages. All high-level tasks were successfully accomplished when going through walkthroughs within our team; however, we still needed to conduct a usability test after repairing these issues.

View: Detailed View Evaluations

Final Design

Our initial concept of Foodsy held steady throughout our 2 iterations and usability tests. The general feedback from users was positive. Many complimented on the visual design of the app, saying they appreciated the playful graphics. A majority of users reported that they could see themselves using the app.

Users ran into a few obstacles during the task completion trials such as, not knowing they could scroll down particular views and not being able to input specific allergies. We summarized the data from the study and wrote a usability report to share with stakeholders outlining observations of progress and elements that need improvement.

If our team were to continue with this project in the future, we would conduct more quantitative studies to measure restaurant decision times after using the app. We would also consider business strategies and how our service could be monetized.

View: Full usability study report

“Iterative design is the repetitive procedure of rapidly implementing prototypes and receiving critical feedback.”

For our team, the main takeaway from this project was learning the iterative design process by applying these principles ourselves.

We learned to iterate designs from initial concepts to real, immediate solutions by gathering feedback and conducting usability tests. Assumptions can be dangerous, and there is no such thing as self-explanatory.

The most important point I learned is that designer needs and user needs can differ; there is always a need for testing and revision to create a better user experience

Project Infographic