Food Truck Mobile Ordering App

Food Truck Mobile Ordering App - Truck Line Cutter

Hero image - three screens of the mobile app
Quick links for this project

Project Overview

This project involved finding a solution to a daily problem most hungry food truck seekers face, waiting in long lines for gourmet food trucks. My team and I were tasked to conduct research, identify and solve this problem in the food truck ordering experience. While we kept this customer focused goal in mind, we were also highly focused on boosting revenue for the gourmet food truck owners.

Our solution was to eliminate the lines altogether by providing food truck seekers the ability to look up locations of nearby trucks, view their menus, food images, yelp reviews, and quickly place an order all through our app. Once the order was fulfilled, the user of the app would be notified when the food was ready for pick-up. This was done by implementing an end-to-end design process.

Concept Summary

There’s no shortage of apps designed to allow to you order-in from restaurants for pick-up or delivery. But I couldn’t find any on the market that service food trucks.Truck Line Cutter App is a concept that was created to solve one of the biggest pain points in most hungry people’s lives, waiting in line at a popular gourmet food truck to order food. The Goal of Truck Line Cutter “TLC” was to be able to look up a food truck by name, location, cuisine or scan a truck at your existing location, then view the menu, place an order and avoid waiting in line to pick up the delicious food. Most events now feature food trucks and they always have long lines and this app would be such a time saver.

Details:
  • Duration: 16 weeks
  • Tools: Marvel App, Photoshop, Sketch, InVision and Prezi
  • Team: Four designers: Mavi Laidlaw Designer and others
  • My role: Team Leader, Concept, Low Fidelity Prototype, Sketches, UI Design, Visual Pattern Design, Branding, High Fidelity Prototype
  • Deliverable: High-fidelity interactive prototype
My Role:
  • Conducting initial interviews with gourmet food truck customers and employees
  • Competitive analysis
  • Initial brainstorming through sketching and wireframing
  • Creating user flows
  • Owning design of all screens
  • Fine adjustments post usability testing
  • Creation of the High Fidelity Prototype

The Challenge:

How can we transform the way customers feel when they interact with gourmet food trucks by removing their frustration with waiting in line to order?

Introducing Truck Line Cutter

Research Phase

Competitive Analysis

To begin my competitive analysis I searched the Apple & Android App Stores for any food truck related apps, and at the time the only thing closely related were locator apps that pulled a twitter feed into them showing you the trucks location based on their tweets.

Interviews

The next step was for us to gather real-time data from real customers, we visited a popular truck stop and we began by talking to real people waiting in line, and asked them how they felt about their experience when they waited in line. What aspect was most frustrating for them? The time wasted, the physical act of standing, boredom?

Key findings from this visit
  • The majority of customers in this location are employees of the nearby businesses and they’re hungry looking for a quick option on their lunch break.
  • The time wasted waiting for those on their lunch break was used just to wait in line to order food and then they waited once again for the food to be prepared.
  • Ordering lines could get long during lunch time and the hungry customers became hangry.
  • These findings led us to start thinking about taking the solution in a direction that would eliminate the time spent waiting to order, as well as exploring ways to improve upon the experiences of traditional point of sale.

User Persona

The user persona was created from the combined key findings from my teams surveys, interviews and research. This persona is meant to represent how a typical user of the product may think and behave.

User Flow and Wireframes

We met to discuss the app in detail to create flow charts from the sitemap made of post-its. We evaluated the visual sitemap and all of the possibilities for the screens that were necessary depending on where the user clicked. First, we identified the necessary information from the low fidelity prototype and sketches.

In example: Search screen, Shopping cart or Checkout screen, then we visualized all of the information and their functions. Mobile design is not a linear navigation process, with mobile there is always more than one way of getting to the same result, plus other options, menus, etc.

Wireframes
Wireframe sketches

Sketches

After sketching out a full user flow on paper, I began working on the low fidelity prototype to test out that the user flow was accurate plus it could be used to receive preliminary user feedback.

Low Fidelity Prototype

I created a quick prototype in POP to share with the team

POP App Screenshot

Design Phase

User Interface - Design Patterns

With the research step complete, the problem clearly defined and the persona and user flow established, we started to formulate design concepts by individually brainstorming and researching our ideas, then reconvening to discuss what we came up with and combine our best ideas.

Interactions with the food truck
  1. Camera Controller to scan a QR Code that would be on the participating trucks
  2. Checkout page to purchase the food
  3. Sign-in and Sign-up pages to save user data for upcoming purchases
  4. Location GPS to search for trucks based on users active location, zip code
  5. Maps to view the location of the food trucks
  6. Detailed Views of the food
  7. Sharing on Social Media

High Fidelity Prototype V1

Once the design pattern research was complete we began sketching out the final concept for the high fidelity prototype, then creating a quick high fidelity version of the screens for a user testing session. We decided to focus our prototype on one food truck to, the Kogi Truck it is legendary in Los Angeles for the delicious Korean Mexican Fusion food. We used their real menus and images for the prototype.

High Fidelity Prototype V1 screen images

User Testing

We were able to conduct preliminary user testing to get feedback on the 12 screens and the user flow. The most important pieces of feedback received were:

  1. Final Splash Screen:some users wished the text on the final screen mentioned that they would be receiving a confirmation email and status updates
  2. Updating the Credit Card entry section as it was repetitive
  3. There were too many Social Media buttons on the final screen
  4. The bookmarks button was not intuitive and therefore it was difficult to find
Images of user testing

High Fidelity Prototype V2

Taking all of the feedback received into account, I resumed ideating with a critical eye analyzing every screen for alignment, padding, or sizing issues. I made improvements to maximize effective communication and logical visual choices.

The following is an example of the different iterations that were created and the changes we made as a result of the noted feedback.

  1. Near me map icons changed from trucks to pins
  2. Text size increased
  3. Selecting the Kogi truck directs to detailed view
  4. Detailed view was expanded and redesigned
  5. Shopping cart and checkout pages were redesigned
App Icon Revised

The App Icon also received a makeover, originally the main idea for the app icon was to create a cross between a pair of scissors, a fork and a knife. We continued the original idea but through multiple ideations.

Truck Line Cutter Icon v2

Final Designs

Invision - High Fidelity Prototype

This is a walkthrough of highlights of the final mockup, starting with a full demo video and ending with an interactive clickable prototype.

Onboarding

The first thing that users will see is a welcome screen they are prompted to create an account, but are also presented with the options to sign in or continue as a guest.

Home Screen

Following this, the user is directed to the search page and is able to proceed with three options for courses of action:search by location, by cuisine, by Truck Name A-Z.

Browse the truck menu

If the user selects search by location, they will receive a list of food trucks that are currently open and accepting orders near them. The user can then select their food truck of choice and browses the menu. Once the user decides which items they would like to order they add the items to the shopping cart.

Checkout Flow

All of the user flows end with checkout. This design demonstrates how a user would check out using a Credit Card because it is likely the most convenient, but other options available are Google Wallet and Paypal. Immediately after payment, the user is shown a purchase summary stating an email confirmation has been sent and informing the customer of when the order will be ready for pick up.

Conclusion

To sum up the project for this mobile app, when I came up with the concept of this mobile food ordering app idea I was living in an area where I was constantly surrounded by food trucks and was waiting a long time to order. I liked the convenience of restaurant apps and wanted to translate that over to food trucks as well. Working with my team to create this prototype was very fulfilling and truly a delight. I cannot wait to work on more mobile apps with a great team of designers, developers, product owners and anyone else who wants to be involved. 

View my other projects