Hero Image - Food Truck (mobile) (1).png

The Food Truck

A digital solution to America's food deserts.

OVERVIEw

My Role

Interaction Designer

Duration

6 weeks

(June - July 2019)

Type

Graduate Project

Team

1 of 3 UX Designers

Toolbox

Figma

Illustrator

Principle

Miro

Individual Contributions

Research

User Interviews

Usability Testing

Prototyping

Interaction Design

Platform

Mobile App

Prompt

My team was tasked with creating a digital solution that provides value and social impact to a community by focusing on a single issue. After ideating and throwing around several issues, our group decided on our problem space - addressing food deserts in the US.

Background

The CDC defines a food desert as an area that lacks access to affordable foods that make up a healthy, balanced diet. Additionally, simply providing easier access to grocery stores in food deserts has shown to be insufficient in changing eating habits from processed foods to fresh, whole foods of the specific population.

Goal

We had to find a simple yet comprehensive way to address the issue of unhealthy eating and encourage inhabitants of food deserts to increase their consumption of healthy foods. My team decided to accomplish our goal via a food truck.

There are approximately 13.5 million people in the United States who live in a food desert.

United States Department of Agriculture (USDA)

Design Process

At the kickoff of our project, we defined our design approach by identifying the key phases that we would break down into manageable chunks. This allowed us to work in an agile environment by iterating and improving our designs.

PLAN

Project Plan

We created a plan to ensure our objectives were met on time and to ultimately deliver a successful mobile app. Since we were working with a relatively tight 6-week deadline, we created a project plan and divided the workload among us in order to efficiently perform all the necessary steps. The plan covered the six key phases of our design process outlined above.

Each phase built upon the work completed in the previous phase resulting in the final prototype. We executed project tasks in one-week design sprints while incorporating research, findings, and user feedback in each iteration.

My individual project tasks included:

General research of food deserts
4 of 12 user interviews
2 of 8 usability tests
Facilitated Virtual Design Studio
Added all screen interactions to prototype via Figma and Principle
Final iteration of hi-fi prototype with micro-interactions and UI refinements

discovery

User Interviews

In the discovery phase of the project, we each conducted 3 user interviews to get a better understanding of the problem - for a total of 12 user interviews. Each interview lasted approximately 30 minutes. During the session, we learned about users' food purchasing and eating habits, specific pain points, goals, and motivations.

Example questions:

How often do you shop at a grocery store?
What types of foods do you typically eat?
What does it mean to you to have a healthy diet?
Can you tell me a little bit about your food purchasing habits?
How many meals do you cook for yourself/your household per week?
Do you have an allotted budget for how much you'd spend on a meal?
Describe an experience you had purchasing food from a food truck?

User Feedback

Below were some key pain points and sentiments from our participants:

83%

Stated healthy foods

are too expensive

75%

Wish they had more convenient access to healthier food options

50%

Believe cooking meals from scratch is too time consuming

92%

Found fast food to
be more accessible

Key Insights:

Many of the users had easy access to purchase groceries but they didn't have time to cook their meals.

Users need a medium that allows them to get healthy, yet delicious meals customized and cooked to order.

Users would love to meal plan in advance if someone did the planning for them.

Being able to pick up their orders at a convenient location during a particular time frame would be a huge benefit.

define

User Groups

After synthesizing the feedback from our individual user interviews, we found that many of the comments fell into similar categories. Based on this, we summarized the data from all the users into 3 main user groups - represented by Kyle, Sara, and Monique.

Once we established the main user groups, we were able to develop user personas for each group.

User Personas

We created 3 user personas to represent the collective findings from our user interviews. They also served as a visualization of our users’ characteristics, needs & goals, and pain points in a more holistic manner. Being able to recall the aspects of our users in such a quick way proved useful when we got stuck or if the team had a disagreement about a particular design decision.

To maximize the value of our app within the time frame, we decided to focus on one persona that covered the majority of the users we interviewed - Sara Karras.

Target User

We characterized Sara as someone who enjoys cooking and strives to eat healthy as often as she can. However, due to time and travel constraints, Sara can't cook very often and is looking for a solution that would allow her to eat healthy food even when she is unable to cook it herself. Unfortunately, she feels that healthy foods are considerably more expensive than unhealthy foods and would appreciate some cost-saving alternatives.

Journey Map

Customer journey mapping helped us define a variety of possible functionalities the users would need in order to successfully complete tasks within our app. Using Sara's needs and motivations, we created a personalized CJM.

In the below journey map, we illustrated Sara’s journey as she places an order for her meal, and then walks to The Food Truck to pick up and pay for her meal. We also identified possible areas of opportunities that we could implement in our app.

ideate

Insights & HMW

To begin an impactful brainstorming session, my team and I defined and framed our solution ideas by gathering the insights, needs, and POVs from our user data. From here, we developed our How Might We questions that would later drive our design decisions.

Brainstorming Session

After crafting our HMW questions, we mapped out the team ideas and began framing solutions for the app. Using 4 main categories, we were able to focus on the key goals of our users and create an app that touched on all the defined areas.

A food truck mobile application that allows users to view and order food (both cooked and prepped meals), track the food truck’s location, pay for food using different methods, and earn rewards and other incentives.

User Flow

We mapped out the most common user flow for our app using Sara - from getting notified of the truck's location to the user arriving to pick up their food. While building out the flow, we also noted ways of how we could simplify their usage to help them reach their most important goals within the app.

design

Virtual Design Studio

To kick off our design process, I facilitated a virtual design studio. I utilized Zoom and Miro to give us the most collaborative experience possible. Our design studio lasted roughly 2 hours. After sketching individually and then coming together collectively for some heavy collaboration, we dot-voted and decided which features and UI elements would move forward to form our wireframes.

My sketches from the design studio session

Wireframes

After compiling the strongest components and features from each of our sketches into one common design, we moved into creating our wireframes. Now that we had a good idea of how we wanted the app to look, our team's vision began to come alive!

Test

Usability Testing

(Round 1)

With our wireframes ready, we completed a first round of testing to understand whether we hit the initial mark or not for our users. Since the goal was to quickly get as much user feedback as possible, we each conducted 1 usability test with a previously interviewed user. Because all the participants were open to being contacted again to provide future feedback, it was convenient for us to utilize participants to whom we already gained access. This first round of 4 usability tests uncovered several areas that needed tweaking.

Some User Feedback

Would there be other forms of payment too (e.g. coupon, gift card, etc.)?

What's the difference between 'Code' and 'Rewards'?

I would like to be able to see the nutritional facts for the food items.

When opening the app from my main phone menu, what would be the home page?

With only walking directions, is that the only way I can get to the truck?

Prototype

We incorporated the valuable feedback received from the users into the second iteration of the app. We were now at a point where we could increase the fidelity of the wireframes and create a prototype. Next, we dove into Figma, divided the work among the pages, and began redesigning the app. We checked in consistently and communicated via Comments within the tool to ensure the UI was uniform, give and receive feedback, and provide each other with necessary components.

As a result, we also created a style guide that established additional consistency in all our designs. With the chosen color palette, typeface, and graphics, we aimed to create a vibrant yet simple aesthetic for our users.

Usability Testing

(Round 2)

When the prototype was completed, we moved to the second round of usability tests. Since our methods from the first round of testing proved successful, we kept the same strategy and each chose one person to test our prototype. However this time, we each selected a brand new participant (someone who had never seen the app). The goal was to get a new perspective on our final direction.

I feel like the app was really straightforward. I think more food trucks should adopt the app concept.

Keith R. | 29 years old | Photographer & frequent food truck visitor

I love all the different payment methods & the ability to pay ahead. That's super convenient.

Maureen T. | 37 years old | Mom of 3 & wants to eat healthier

solution

Final Design

After 3 more fresh pairs of eyes to view our app, we synthesized our individual feedback from the usability tests. I was responsible for our team's final task of reiterating our designs to capture the new insights (which I completed in a combination of Sketch + Figma). After some additional tweaks and fine-tuning, we successfully concluded our project with the final designs below.