Allegra
UX designer

Food Truck Finder

ROLE: Solo sprint UX/UI
DURATION: 24 hours

Image alt tag

Prompt

Food Truck Finder (FTF) is an app x is developing that helps users locate food trucks they love, find new food trucks in their area, see menus of those food trucks, and pay for their meals using the app. Pitch a set of 3 screens, plus any supporting sketches or wireframes for the food truck feed, a food truck profile, and a search results page.

Requirements

  1. 3 screens

  2. List view of trucks

  3. Interactive map

  4. Navigation bar

The goal

  1. Discover food trucks in their area

  2. Find your favorite food trucks, instantly 

  3. Pay for meals using the app

  4. Order online

User research

I asked myself, how do I start research? I don’t have user data. Given the fact that I only had a couple of hours to work on this project, I had to be very efficient in the discovery phase.

Research Goals:

  1. Learn as much as possible about potential users

  2. Who would use a product like this? What are their needs and wants, behaviors and motivations?

  3. Understand competitor landscape.

  4. Uncover competitor pain points, challenges and solutions

Competitive analysis

I conducted a competitive analysis to separate my assumptions, to look outside my case, and take in the market as a whole. It helped me inform my design process while knowing the strengths and weaknesses of my competition.

After researching, I found that there were no specific food truck apps in the market, I decided to conduct a competitive analysis based on the key features that I'm designing for. I chose Grubhub, Uber Eats and Postmates to be my three key players. I chose these three apps because they all have one goal in common - helping users locate food they love and to find new food in their area.

These apps had a similar mission to what FTF was trying to accomplish.

I found that Postmates lacked in most features, only Uber Eats had a map feature and all apps were able to filter by cuisine.

Time to empathize

It’s 2 pm on a Tuesday. Simone is approaching her lunch break soon from her barista job. She is hungry and only has 25 minutes for her break. She’s already exhausted from her morning at the coffee shop. She’s in the mood to sit outside because it’s a nice autumn day. She doesn’t have cash on her, so Simone wants to order food on her phone. She skipped breakfast, so she wants a hearty meal. She opens the FTF app and selects Mexican food. She sees that there are 3 Mexican food trucks near her. One, she has already eaten from, the other two are new. She chooses the food truck that is closest in distance to her that she has not eaten from yet. She is curious about their menu, so she views the menu from the app. She sees that there is a burrito for $12. Perfect, she says. Simone orders a shrimp burrito through the app. She heads out of her work shift and walks towards the truck which is an 8-minute walk. Simone enjoys her lunch.

Prioritizing features

Some of these features were requested and some were features that I found important to include based on research.

The matrix diagram is a simple square divided into four equal quadrants. Each axis represents a decision criterion, such as cost or effort. This makes it easy to visualize the options that are low cost and effort, and low cost and high effort.

After prioritizing, I found that the MVP or minimum viable product means that I can test the app at an early stage, helping me iron out problems and gain feedback for future iterations.

The MVP

  1. Profiles

  2. Menus

  3. Navigation

  4. Map


Food Truck Finder

User flow

I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals when opening the app.

I needed to create a user flow for the users' steps when first opening the app. I wanted to prioritize this user flow because, in the interest of time, I needed to complete this step first since it was a requirement.

The process of building this user flow starts with understanding the user’s needs and wants. The goal that the user is trying to accomplish here is to choose a cuisine, find the nearest food truck and check out the menu.

I created the user flow in Miro.

Food Truck Finder

Sketches

I usually start the design process with low-fidelity wireframes. This is the way I iterate through many design options quickly.

The main purpose of sketching was to brainstorm layout ideas with the design features that I mapped out in my 2x2 matrix. I sketched 4 different versions before deciding on a final sketch to design. I chose this sketch because it incorporated all of the 2x2 matrix features that were crucial to helping users reach their goals of discovering food trucks in their area.

After sketching, I took my designs to Figma.

Food Truck Finder
Food Truck Finder

Learnings and next steps

  1. It’s important to point out the design requirements and constraints

  2. Empathizing with the user is crucial to achieving the best product 

  3. The next steps would be to conduct usability testing in Maze