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 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.
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
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.
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
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.
- Come up with a final restaurant decision
- Discover restaurants by viewing pictures of their dishes
- 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.
“pictures of food pictures of food pictures of food pictures of food pictures of food pictures of food 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.
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.
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.
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.
“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
