Food Truck Ordering App
This app is designed to be utilized by local food truck vendors to provide a fast, easy, and efficient way for customers to digitally order and pay for their food.
Overview
The Problem
Busy working professionals lack the free time to search for menu options, wait in lines, and pay with cash.
The Goal
Design a mobile app that allows customers to quickly review the menu, pay digitally, and know the wait time for their food to be ready.
My Role
UX designer designing the Food Truck Ordering app from conception to delivery.
Responsibilities
Planning, scheduling, conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Understanding the User
Summary
5 users were interviewed through a series of questions aimed at understanding when, where, and how they make purchases from food trucks, and how they feel about utilizing an app as a part of that experience. I had assumed most users would prefer an option to have their food delivered, and through the interviews surprisingly learned that about half of the users prefer to pick the food up themselves.
In general, users would love an app, prefer to pay digitally, not have to wait in line to pickup the food, and in some cases really want to have the food delivered.
Pain Points
1
No Nutrition Info
Can’t find health and nutrition information for many food trucks. It makes it hard to make smart choices.
2
Hard to Read
Some apps have hard to read small text, fuzzy images, and are difficult to navigate.
3
No Reviews
It’s tough to make a food selection, at a new venue, without input from previous customer to help guide to tasty and good choices.
4
Cash Only
Some food trucks only accept cash, it would be much easier to pay with a credit card, or even through a mobile phone app or text payment system.
Who is our core user?
Franklin
Problem Statement
Franklin is a busy college researcher who, daily, on campus, needs a way to order and receive his favorite food quickly because he wants to eat fast and finish his work so he can go home to see his family.
User Journey Map
Franklin wants to select and purchase his favorite food quickly, pay digitally, know the wait time, and receive the order fast.
Competitor Audit
A competitor audit was performed to gain insights into the existing user experiences in the space and glean insights into what works and what can be improved.
Starting the Design
Storyboards
Sets of storyboards were created, on at a Big Picture level to show the environment and journey of the user. The other, a set of Close Up storyboards helped explore the screens on the app that a user might experience, while going through the flow defined in the Big Picture journey.
What is essential to their journey?
Paper Wireframes
The goal was to explore options for helping Franklin easily view the menu, place an order, and pay. These paper wireframes explore structural options for the home screen.
Digital Wireframes
The homepage structure was to be clean yet offer access to the main features of the app. This would provide for a clean user experience with the least number of steps possible to achieve the user’s goal.
The menu screen is intended to provide a lot of helpful information in a clean way, so the user can quickly review options and make an informed decision they’ll be happy with.
Low-Fidelity Prototype
This low-fidelity prototype allows the user to flow through the main screens including menu, selection, payment, and confirmation.
The Plan
A detailed research plan was developed to help ensure an effective and insightful study. It included: Introduction, Research Questions, KPIs, Methodology, Participants, Script, and Schedule.
Notes
A usability study notes spreadsheet was created, with a tab for each participants. Recorded for each was: Task, Click Path, Observations, Quotes, and Task Completion Rating.
Simpler Interface
Customizations
Menu Access
What did users really want?
Affinity Diagram
The diagram exercise allowed for easy exploration of feedback that was assembled into groups of related insights, helping to derive themes of key user feedback.
Analysis and Synthesis
Patterns were analyzed from the participant input, and those then turned into action insights, then themes which could specifically summarize the usability findings and drive the next iteration of the design.
Presentation
A presentation deck was prepared that both summarized and provided detail into the study and how the information gained will be applied next. The presentation is suitable for stakeholders on the design team and at the executive level.
Findings
Individual users were studied while performing prompts as directed within the app, to see how their experience was in relation to the user flow and ease of achieving the expected outcome within the app.
Round 1 Findings
- Users want a more obvious way to add customizations
- Users want larger images
- Users want larger text
Round 2 Findings
- Users want larger, easy-to-see images
- Users want larger text
Refining the Design
Mockups
The mockups introduced the visual identity, elaborating on the structure defined in the wireframes and low fidelity prototype. Users were generally able to more quickly and happily navigate key flows in the iteration after the usability study.
Before Usability Study
After Usability Study
A goal was to utilize user input to iterate the app into a more useful and helpful product. The version after the usability study directly reflects and addresses the user desire to have larger images and a cleaner interface.
Before Usability Study
After Usability Study
Design System
A design system of reusable components was developed for use with the Food Truck Ordering App. This helped with consistency and efficiency of app designs and iterations.
High-Fidelity Prototype
We take pride in helping people feel their best, and each testimonial highlights the care, expertise, and dedication that our clinic provides.
Accessibility Considerations
1
Images
Large images are used to help those with limited vision to more easily see the content.
2
Color
An accessible color palette is used to help ensure that those with related vision disabilities are able to see the content.
3
Buttons
Call-to-action buttons have iconography along with written copy, to help those unfamiliar with the language to still have some understanding of the button function.
Summary and Next Steps
Impact
The app has introduced an incredibly intuitive and simple way for food trucks to engage with busy customers. As one usability participant shared, “With this app I can order my favorite lunch in literally a minute, and know exactly when to pick it up. I love it.”
What I Learned
While designing the Food Truck Ordering app, I learned how valuable the input from usability studies truly is. Materially-valuable insights come from those efforts, which ultimately lead to a better experience and happier end users.
Next Step 1
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Next Step 2
Conduct more user research to determine what additional app features might be useful for food truck customers.