The Challenge
Design a mobile application that will help users explore more options and navigate a market catered to them individually.
Project Summary
Fooden is a mobile app for foodies to explore new places and plan food-centered excursions with their friends
The Solution
We created an experience that gives users a place to start new discussions with friends about different restaurants in any area, and also quickly share recommendations with low friction and maintain a location-based wishlist.
Duration
3 Months
Tools
Adobe XD | Illustrator | Photoshop | Figma
Role
UX/UI Designer
Fooden is an App where friends will visit before going a restaurant.
Competitive Analysis
Our first step was seeing what‘s already out there. While this industry is very expansive, I decided to focus on three key players: Yelp, Google Maps, Open Table. I researched online and sifted through dozens of app store reviews, also evaluated them in terms of interface design and summarized the pros and cons below:
USER INTERVIEW
USER PERSONA
To bring my potential users to life, I identified the user persona, Jenny Anderson. My persona helped me guide design decisions and develop empathy for potential users.
POW STATEMENTS & HMW QUESTIONS
Using my persona's goals and needs, I developed Point of View statements and translate them into How Might We questions. This allowed me to define the problem before thinking about solutions.
PRODUCT ROAD MAP
Next,I created a product roadmap outlining features and metrics. This helped me organize my thoughts and prioritize what features to focus on.
INFORMATION ARCHITECTURE
After outlining the features and priorities in product roadmap, I created appmap of the Fooden. This helped me in visualizing how each page would be connected, and how users could potentially navigate through the application.
LOW- FIDELITY WIREFRAME
Then Low-fidelity wireframes were created from initial sketches to show more refined look. The wireframes were developed with the intention to quickly translate them into a prototype so that I could begin testing my design early in the process.
HIGH - FIDELITY WIREFRAME
Onboarding
I created an onboarding as the process of getting users familiar with a new interface, using dedicated flows and UI elements that are not part of the regular app interface. I followed WCAG 2.1 principles to provide the best experience to users.
Main Menu
While designing the main screens I always minded Jakob's ten usability heuristics. I followed the principles of minimalist design in order to make the app more user friendly.
Friends
Unlikely than the other local restaurant review apps, Fooden lets you to see your friends' favourite restaurants. Also the app lets you to rate your experience and share with your networks.
Category
Category search section's interface is designed to be user-friendly. I aimed to create an aesthetic design with flexibility and efficiency of use.
UI DESIGN AND ITERATION
STYLE GUIDE
Next Steps
I am excited about this project because of its potential. Some of the features I will consider implementing in the future are:
-Filtering the discussion section by cuisine
-Direct messaging people who post a review to request more information. I will be careful with this one because remember, one of our goals is to avoid making a messaging app.
-Incorporating the ability to create new cuisine categories or add multiple cuisines to a restaurant
-Incorporating tags that are for ambience/event instead of just cuisine
-Adding a reservation and menu feature
-Finding where the locals eat by searching within a specified radius and having more professional suggestions without interrupting the primary experience
-Using analytics to suggest new people who we know have similar tastes to a user
-Implementing a list view of the map
-Enabling users to swipe left and right through restaurants on their map.
LEARNINGS
I could have done a more consistent job with spacing in general and sizing in terms of the user interface. I followed iOS guidelines for button and text sizing; however, the card elements may have had inconsistent padding or margin, which should always be a focus, especially when handing-off a prototype to developers. I understand this importance, and in the following iterations more time and care will be spent making a polished design system to reference.
Another area where more time could have been spent is on the feature prioritization matrix. I found myself frequently revisiting it to add or adjust or remove features that should go into our proposed MVP. If more time was spent discussing each feature that went onto the matrix, I could have saved time later on. It is also important to discuss these features because considering how each one will impact the user in relation to their needs is important for providing an adequate solution.