Project Overview
Project Info: FoodSpotter is a mobile application that I have designed for a Mobile UI Design class at Parsons the New School of Design.
Interactive Prototype URL: https://marvelapp.com/f7i75a
Timeline: Feb 2016 – April 2016
Role and Responsibilities: I created the UX/UI design and visual design for this project.
Concept
FoodSpotter is a mobile application for travelers who are also die-hard foodies to plan their trips around local dishes and learn about different food cultures. Distinguished from Yelp and Tripadvisor which give food recommendations based on restaurants, FoodSpotter seeks a different approach. FoodSpotter provides food recommendations for travelers based on famous local dishes, as well as detailed historical and cultural information associated with the dishes. On FoodSpotter, users can subsequently save and plan their trips around their favorite restaurants recommended for the local dishes that they are interested in trying out.
User Characteristics
- Extensive traveler
- Die-hard foodie
- Interested in learning about different food cultures
- Detailed planner
Features
User Flow
When users first opens the app, they will be presented with a handful of location choices that have been curated for them.
On the home screen, users can view a list of famous local dishes in that specific location. FootSpotter provides users with detailed historical and cultural information about each local dish, as well as teaching them how to pronounce the name of each dish in local language. If they are interested in trying a specific dish, users can view a list of restaurants recommended by users from TripAdvisor, a reliable source of data. Users can subsequently save those restaurants and add them to their "Favorites."
Users can also view detailed information about each restaurant, such as price, hours, address etc. From their "Favorites" folder, users can see all the restaurants that they have saved, and toggled to see the restaurants in a map view, which helps them to plan their itineraries.
App Map Iterations
UI Iterations
Below shows the iterations on the gesture for the local dishes main screen. For each local dish, users can either view more information about the dish, or go to the restaurants that are recommended for the dish. The first low-fidelity design was that users would swipe left to review both functions.
The second low-fidelity iteration was that users can tap on each dish to view more information, or swipe left to go to the restaurants.
Considering both functions are essential features of FoodSpotter, on the third iterations, I removed any hidden functions and the extra step of swiping left. Users can directly view more information about each local dish or go to the restaurants by tapping on the two icons below.
"Bangkok" is designed to be a shortcut link, where once users tap into it, they can change the location, as opposed to going into "Setting" to switch the location. The user feedback from a quick round of wireframe user testing was that the affordance of the link "Bangkok" needs to indicate interactiveness.
During the second low-fidelity design when color was added, the link "Bangkok" is highlighted in blue which originally was used to indicate interactiveness. However, during user testings, 4/5 of the users did not notice that "Bangkok" is a link.
In the later round of high-fidelity design, I added a down-arrow right next to "Bangkok". During the user testings, users clearly understood that they could tap on Bangkok to open a dropdown.
The original color palette was not as suitable for the theme of food. In the later design, the color palette included red and yellow instead, which is more appetizing.
