Food Randomizer
Mobile Application
Tryna Eat is a food randomizer website that was created by a local developer who aims to helps users find recommended restaurants based on their randomized result. The developer wants to re-design this website into a more user-centered mobile application.
Transform the desktop version into a mobile application which helps users quickly find their favorite foods at any moment by improving browsing/navigation, user flows, and overall visual appeal.
1. Re-design user interface to create an intuitive yet engaging user experience.
2. Input relevant photos of restaurant, their food, and recent reviews to help users with their decision making process.
3. Provide clear CTAs and information to help users navigate through the app easily.
These key goals were formed after conducting a user interview.
1. Increase likelihood of users accessing the restaurant’s number, website, or directions.
2. Users will spend at least 3-5 minutes reviewing a restaurant until they move forward with it or find another option.
After reviewing the website, I conducted a usability test on the existing version to test my assumptions of the site, reveal any areas of confusion and uncover opportunities to improve the overall experience.
I combined both F2F and remote testing on 5 users: 3 working professionals and 2 students.
Then I created user personas that emulated real life users to help me understand the behaviors of how they would engage with, benefit, and recommend the product.
Our target audience are working and non-working professionals who are 28 - 55 years old.
In order to find further market opportunities, I researched the top rated food randomizing mobile apps and gathered insights on the competitor's features, strengths, and weaknesses.
This research provided me with a number of MVP features and functions that can help boost appeal and user engagement with the application. This includes: restaurant vs dessert, filters that includes dietary preferences, clear reset button, photo gallery of food, user centered results, & favorites tab.
The blueprint for this application needs to be fairly simple and straightforward so I decided to have 3 main pages that users can navigate through.
Based on typical behaviors of how users interact with service oriented applications, I streamlined the user flow to help users find their preferred restaurant in an easy/straightforward way.
This was one of the main concerns the developer wanted to emphasize when designing the application. We wanted the user flow to be as seamless as possible but still include options for users to freely navigate the application.
Wireframes helped me to quickly generate my ideas visually allowing me to communicate and validate the app's usability.
Using color psychology, I decided my primary color to be a salmon color (#FF725E) to exude feelings of excitement and engagement. While my secondary color would be an off white ( #FCCAF7) that helps give my primary color a good contrast. I then added necsseary colors that would help bring my colors together
I created my design systems on Figma to help me build my look and feel in a more efficient way. This was one of my the main goals when designing the application, so I spent a lot of time doing secondary research to create a user interface that was both engaging and relevant to the brand's identity.
The primary font I decided to use for the app is called Urbanist.
This casual yet clean sans serif typeface creates an inviting feel to the user and also increases the label’s/information’s legibility.
Using mobile focused hierarchy and visual design principles not only brought this app to life, but it helped me improve my decisions for usability.
Onboarding Screen
Attract - Use color and size to capture the user's attention.
Intrigue - Use illustration to keep the user engaged.
Message - Deliver app slogan.
Repetition & Pattern - Repeats various elements to show consistency while building trust and familiarity.
Proportion - Sizing of various elements shows the importance of information.
White Space - Breathing spaces between elements to help user understand and digest the design.
Proximity - Allows users to see rows and quickly browse through information.
Collaborating with a developer and others while creating my first mobile application has given me a better understanding on how to properly apply my skills in improving a product.
Below are some challenges and learnings when working with users:
- When conducting another set of usability tests, users preferred the mobile application interface and dubbed It as "modern, relatable, engaging".
- Users had certain requests such as wanting more food pictures, pricing, and another tab such as history, to help them find what they restaurant they were previously looking at.
Below are some challenges and learnings that I uncovered when working with the developer:
- Specific elements, interactions, and animations had to be re-considered due to time constraints.
- To increase clarity and efficiency, consistent communication is key when making design decisions.
- Explaining certain design decisions and why it is important for the brand/product.
- It was fun and insightful to see another team member's process and how each role impacts the other.
