banner

What to Eat

Category
  • UX/UI

Tools
  • Figma
  • Adobe Illustrator
  • React Native

Duration

40 hours

“What to Eat” app's goal is to simplify the process of choosing a restaurant by generating a personalized list of dining options based on the user's preferred distance and cuisine type. The app aims to save users time and reduce decision-making stress by presenting them with suitable options nearby.

Defining the Problem

The problem addressed by the “What to Eat” app is the difficulty users face in deciding on a restaurant for their meals. The huge quantity of dining options accessible makes deciding where to eat time-consuming and stressful for users. This challenge is further increased by the need to consider factors like distance and cuisine preferences.

The Goal

The goal of the “What to Eat” app is to simplify the process of choosing a restaurant by generating a personalized list of dining options based on the user’s preferred distance and cuisine type. The app aims to save users time and reduce decision-making stress by presenting them with suitable options nearby.

Design Process

Discover

User Research

I start with research to understand user needs, pain points, and preferences. I asked 10 people to identify answer the question scope. From the interview, I learned about their experience of searching for a place to eat, also their thought process, and the apps and websites they use.

Quantitative question Quantitative question

The User and their Pain Points

I Identify the pain points and challenges users face when choosing a restaurant.
The main pain points:
- Decision fatigue.
- Lack of information on how many restaurants are around them.
- Need help finding suitable options.
- No time to go to a faraway restaurant.

Wireframe

Personas and Scenario

I used these insights to inform the creation of personas and the scenario.

prototype

Competitive Research

After the research phase, I used Competitive Research Analysis on apps mentioned during the user interview. I use this analysis to understand existing solutions in the market.
Based on this analysis, it became evident that there is a need for a more streamlined and decision-oriented app that not only provides a list of nearby restaurants but also assists users in making informed choices.

Wireframe

Defining the Scope

Users:

The target audience includes individuals who value convenience, time-saving solutions, and personalized recommendations when it comes to selecting a restaurant.

Product/Service:

The app provides a curated list of nearby restaurants based on the user’s preferred distance and cuisine type, along with additional features like users’ own list of choices. Also, this app easily links to Google Maps reviews, menus, pricing information, and reservation capabilities.

Medium:

The app will be developed as a mobile application for iOS and Android platforms.

Design Process

paper wireframes

I began by sketching the initial concept of the app on Goodnotes using an iPad. I created a basic wireframe consisting of two main pages: a random restaurant page and a filter page.

I then expanded on the initial sketches and created more detailed hand-drawn wireframes for additional pages within the app. One significant addition was the “Make Your Own” page, where users could add their favorite restaurants to a personal list.

To gather feedback, I conducted user testing using the paper prototypes. I cut out the paper screens and let users interact with them.

Design mockups

Transitioning to digital design, I used Figma to create flat and static mockups for the app. These mockups retained the basic structure and layout from the paper wireframes but included refined visual design elements and more detailed screens.

Conducting further user testing, I presented the Figma mockups to users and gathered feedback on the concept and layout.

Essential feedback included the need for larger buttons and text, as well as the absence of an account login feature to enable cross-device usage.

Final Wireframe

Style Guild
Style Guild Style Guild Style Guild
High Fidelity

The ‘What to Eat’ app consists of two main pages:

Quick Start: This page immediately takes users to the Random page, where the app automatically gathers a list of restaurants within a 5 km radius and randomly selects one for the user. Users can view detailed information about the selected restaurant, including reviews linked to Google Maps, directions, and the option to share or add the restaurant to their favorites.

Explore: This page leads users to the Filter page, where they can customize their restaurant search by choosing categories, distances, and prices. Once the filters are set, users will see a list of restaurants around them that match their preferences. They can either choose a specific restaurant from the list or opt for the app to randomly select one for them.

Final Wireframe Final Wireframe Final Wireframe Final Wireframe Final Wireframe Final Wireframe

Final Product

“What to Eat” app is designed to assist users who struggle with deciding on a restaurant for their meals. Its main purpose is to generate a list of nearby restaurants based on the user’s preferred distance and allow them to filter their choices based on the type of cuisine they desire. The app provides valuable assistance to individuals who find it challenging to select a restaurant, offering convenience and saving time by presenting them with suitable dining options nearby. This app caters to a wide range of potential users, ensuring they can easily discover and enjoy meals at restaurants that align with their preferences and proximity preferences.

Additionally, the app provides a personalized touch by allowing users to create their own list of favorite restaurants. This feature enables users to curate their own collection of preferred dining options, providing them with a go-to list of restaurants they can rely on. The app also includes a randomizer feature that allows users to select a restaurant at random from their list, adding an element of surprise and spontaneity to their dining experience.

Development

During development, I use React Native to turn the "What to Eat" app's design into a functional mobile application. By integrating Yelp API and Google Maps API, I fetch restaurant data and display it to users. This phase includes setting up the environment, creating the project, installing dependencies, coding, and testing to ensure a smooth user experience.

Reflection

Overall, the ‘What to Eat’ app aims to alleviate the stress and time-consuming nature of choosing a restaurant by providing users with a curated list of options based on their preferences and proximity. It offers convenience, personalization, and the opportunity to discover new dining experiences while ensuring user satisfaction and enjoyment.

Throughout this project, I gain more knowledge of design principles and Figma, resulting in a mobile app designed to simplify restaurant choices, saving users time and reducing the stress of making that decision.