Fast Eats

A chatbot app for ordering food from San Francisco food trucks.

Role: UX Research and Design
Tools: Figma

iPhone 12 Graphite Pro Top View Mockup.png
 

The Problem

The process of choosing and ordering from a food truck can be tedious and time consuming, often requiring multiple apps and an unpleasant in-person experience.

The Goal

Create a streamlined and adaptable process for selecting and ordering from food trucks.

 

Understanding the User

To better understand user needs before beginning the ideation process, I interviewed customers of San Francisco food trucks.  From these interviews I was able to extract common pain points in the process of locating and ordering from a food truck.  From there, two key personas emerged (one of which is shown below).

 

Pain Points

Key insights from customer interviews.

Too Many Apps

Interviewees shared a healthy skepticism about downloading yet another app to help them find and order food.  Many felt overwhelmed by the number of apps they already use, and underwhelmed by the helpfulness of these apps.

Too Slow

Interviewees expressed frustration with the amount of time it takes to find a truck, wait in line to order, and wait for their order.  Lunch time during work days are especially stressful.

Dietary Challenges

Many interviewees reported struggling to find a truck that offered items that would meet their dietary needs and preferences.  Most trucks do not label their menu with ingredients or potential allergens, and asking questions at the ordering window isn't ideal.

Unpredictable

Customers may arrive at a truck, ready to order, and find that the truck is out of stock of their desired item.  Or, the truck may not be where they expected to find it.

 

Meet Greg

Greg is a software engineer who needs to pick up lunch quickly because he needs to get back to the office for a meeting.

Persona Greg.png
 

Greg's Journey

What could Greg's food ordering process look like from start to finish?

User Journey Map Greg_edited.jpg
 

Starting the Design

After getting clear on user needs, I began to sketch wireframes on paper, followed by lo-fi digital wireframes, in preparation for a usability study.

 
paperwireframe_edited.jpg

Making it Simple

As I began to sketch I thought about earlier interviews and how customers kept repeating that they needed the process to be simpler and easier. 


Chatbots aren't known for their efficiency, so I knew that there were common pitfalls to be avoided.

During a competitive analysis, I considered the trend towards chatbots offering users buttons with common replies. 


This is a brilliant strategy, because it both avoids unnecessary typing, and teaches the user about available functions.

 

The Flow

I created a lo-fi prototype in Figma which would allow the user to choose a nearby food truck, add menu items to their cart, complete their purchase, and get ready to pick up their food.

Screen Shot 2022-02-27 at 4.23.11 PM.png
 

Usability Study Findings

"We need a shopping cart"

I conducted a quick usability study with 5 participants from diverse backgrounds who had a history of ordering from bay area food trucks.

All participants found the experience of choosing and ordering from a food truck in the prototype to be straightforward.

I was particularly interested in how participants felt about their "cart" being presented as part of the chat, since this is a non-traditional approach.

Participants weren't against this approach but wanted their cart to be easily accessible at all times.  "It would be nice to have a cart button up in the corner," was a common sentiment.

 

Refining the Design

After completing the usability study, I reflected not only on the spoken feedback I received, but also my behavioral observations from the study, which offered insights and fresh ideas for the high-fidelity prototype.

 
undobutton.png

Uh-oh

How do you undo mistakes?

As I watched users quickly tap their way through the prototype, it occurred to me that if they accidentally pressed the wrong button, they might not know what to do next.

Typing "Nevermind" should be an option, of course, just as it is in a chat with a human, but there should also be an easier way, like a button.

Having a button that would delete the unintended response would also help users avoid the unpleasant feelings that come from making a mistake.  Easy win!

 

Hi-Fi Prototype

The simplest path to tasty food

In addition to adding a shopping cart and undo button, I also reconsidered the steps needed to complete an order.

During the usability study I noticed body language and facial expressions that indicated that the participant was a bit startled or surprised by how suddenly they were done.

In retrospect, I wish I would have asked the participants careful questions about how they were feeling in that moment, but for this use case it felt safe to speculate that they were expecting more steps.

When I had originally designed the flow, I wondered whether I should ask the user to confirm their order again after they have confirmed their method of payment.  This extra confirmation step seems to be a key difference between in-person purchases and online purchases, perhaps because online there is not an employee present who can immediately reverse the transaction.

An informal usability study via Maze confirmed that users felt reassured by this extra step, so it was included in the final design.

 

Key Takeaways

Trust Your Instincts

While cycling through research, ideation, and design, I began to notice a pattern:  All of the needed design changes that emerged from usability studies were issues that I had considered while creating the designs.  I had reasons for not including them, but in retrospect, it would have been more efficient to follow my instincts about user needs and preferences.