Dine List
The virtual food diary
The app that lets foodies document their restaurant experiences and share it with others.
Background
As a fellow foodie, one of my biggest pleasures in life is discovering new restaurants and cafés to enjoy, taking pictures and videos of the establishment and of course, the food! I didn’t have anywhere to note down my review so I just kept a mental log of my experiences, photos on my phone, and track places through Google Maps. As one can imagine, experiences of these food establishments may be forgotten and it becomes hard to track the next food spot.
Objective
The problems that I was trying to solve captured how users:
Can bookmark and create lists of food establishments they want to visit
Cross off places on their list that they have visited
Track experiences they have had at a food establishments
Problem
There are many ways that people track restaurants that they want to go to in the future, restaurants they want to cross of their list, and note down experiences at different establishments. Whether it be physical methods, such as a food passport, or virtual methods, such as Google Maps, spreadsheets, the Notes app or Yelp, there are limited apps that allow users to perform all the aforementioned actions in an all-inclusive app.
There are numerous ways that users can organize their restaurant lists but there are features that they are lacking and aren’t optimized for proper tracking and rating.
By providing a restaurant app that allows bookmarking and experience-documenting, users don’t have to have disorganized lists all over the place.
Research
Goals
To see how users are tracking restaurants they go to and how they document their experiences
What users want to remember about or share about a restaurant experience
Features that would be valued in an app
I conducted a SWOT analysis amongst several different competitors that share the features that allow users to track and review restaurants. This could serve as inspiration when designing the app and allow me to see what the other services are lacking.
Methods
Primary research: user interviews with people who frequent eating out
Secondary research: competitive analysis on various tangible methods, apps, and online methods that users mentioned they used to track
User Interviews
The user interviews provided valuable insight as to users’ thoughts on dining out and their experience in documentation.
Dining Habits
Users frequent dining out several days a week.
Ideal App Features
High-quality photo uploads
Detailed review and note-taking sections
Social-media integration
Easy-to-use rating system
Ability to track expenses
Tagging friends
Organizational features
Experience Documentation
Users use various methods to document their experiences, including:
Instagram
Google Sheets, Google Maps
Excel spreadsheet
Personal blog
Personal journal
Notes app
Challenges in Documentation
Remembering details after the meal
Time-consuming
Finding the right platform to document the experience
Define
User Persona
I compiled the research information from the primary and secondary research to create two user personas that would reflect the app that I am working towards. The first persona, Anne, is a food blogger that is always seeking out new places to dine at and also shares her experiences with the public. The second persona, Matt, frequents eating out with colleagues and enjoys finding new spots to check out.
Ideation
Feature Set
After defining my target audience and understanding who I’m designing for, I created a Feature Set to visualize and organize the features that will be included in the app. I prioritized the product features based on user’s needs and project timelines.
After creating a Feature Set for the app, user flows were created to visualize how a user would go through the app’s functions and the intentions of the potential interface that I intend to design.
User Flows
This user flow follows the user in searching for restaurants in the map view screen of the app.
This user flow follows the user writing a review for a restaurant that they have just visited.
App Navigation
Based on the user flows created, I mapped out the app navigation to provide me an overall view of the breakdown of each screen.
Design
Low-Fidelity Wireframes
Lo-fi wireframes provide me the ability of receiving quick user feedback and iteration before I go into the high-fidelity wireframes. I referenced various food and map apps to compare various features of restaurant searches and map views.
Logo
Designing the logo, I leaned towards a more modern and clean design that incorporates dining objects, such as cutlery, dinnerware, and trays. This gives the user insight that the app is food-related. Ultimately, I went with a design that represents a bowl on a plate with an inverted semi-circle below that represents silver covers on a plate of food. I wanted it to be minimalist and felt like the reflection of the logo gives the impression that the app is simplistic and modern.
UI Kit
A UI kit was designed to provide me an efficient and consistent way of designing the app. By having components of the app created, this can help with efficient app development.
I kept a neutral and monochromatic palette for a more calming and timeless interface for the user. The palette is inviting, warm and fresh.
Prototype & Test
High-Fidelity Prototype
Building on the lo-fi wireframes and by utilizing the UI kit, I developed the hi-fi prototype by designing two flows:
A user creating a list of places they want to visit
The user is able to search up restaurants on a map and is able to bookmark it and organize the bookmarks with categorized lists.
A user writing a review
The user is able to search for the restaurant that they dined at and is able to add in all of the details of their experience, along with photos.
Usability Testing
With a functioning prototype, I had five participants for user testing of the two flows. This was conducted virtually on Google Meets with the ‘Broadcast’/’Start Sharing’ functions that allowed users to share their screens with me. This allowed me to see their facial expressions whilst also observing any micro-interactions. A challenge in this was trying to monitor both facial expressions and the mobile interactions at the same time without missing an observation whilst taking notes.
Overall, participants provided valuable insight and I received thoughtful questions. On average, the participants:
Took around 12 minutes on average to complete the flow
Encountered around one error per user
Gave a general user satisfaction score of 9
The users seemed satisfied with the function of the app and took the estimated amount of time that I expected them to take to complete the flow.
Iteration
I made some slight accessibility changes to increase contrast amongst text for legibility, reduced some of the text sizes and card sizes, and added more whitespace between sections.
I changed the layout of the map screen when restaurants are produced based on a search result. Rather than having just one option show up, which limits choices for the user, I incorporated a scrolling section for the user to scroll through options.
The next steps will be continuous iteration and testing of the app to continue improvement amongst Dine List.
Reflection
Working on this project gave me time to reflect and understand that not everything has to be perfect to go forward. Participants provided me valuable insight that I wouldn’t have thought of while going through the designs. For future user testings, it would be great to reach out to a larger audience to get an even more fulsome review. Dine List will have constant improvements and new features that will be added and it’s exciting to see how any product can continuously improve.