Designing a mobile food ordering app for food trucks in India
We all love fast food, don’t we? But do we like to wait for a long time if there’s rush at your favourite fast food joint? No we definitely don’t! I mean that’s the whole point of “fast food”. Most of the fast food joints have moved onto having food trucks because they have realised that food trucks can move around and cater to more people than having a permanent location where people come to them
Trucksy is a food ordering app for food trucks where you can locate your nearby foodtrucks. You can pre-order your food and set a notification to know when your food is ready for pickup and hence avoiding the hassles of wasting time waiting for your food.
The app was made from scratch where I conducted user research, competitive audit, wireframing, prototyping and usability studies. In this blog we will cover all the steps I took to get what we have now.
I have divided the entire process into User research, Competitive Audit, Wireframing and Prototyping.
Project Overview
Trucksy is a mobile food ordering app for food trucks located in India where the food truck owners can list their trucks and the customers use it for placing an order to pickup from. They target working professionals and students who are always in the run
The Problem
Users wasting time everyday to locate their favorite food trucks as their location keeps changing.
The Goal
We need to provide the users with the present location of the trucks and an option to pre order the food so that they don’t waste time waiting to order and then receive food when it could be solved just with one simple feature.
User Research
I conducted interviews and created empathy maps to understand the users I’m
designing for and their needs. A primary user group identified through research was working adults who don’t have the time to cook meals.
This user group confirmed initial assumptions about Trucksy’s customers, but research also revealed that college going students were also opting for this product as they are always in the run busy with exams and college
User Pain Points
The user research helped us to understand the important pain points of our users and those are:
Time: Working adults are too busy to spend time on meal prep
Location of food truck: They want to know the present location of the food trucks so that they don’t have to run around searching for it.
Waiting time: The waiting time at food trucks are high during lunch and breakfast so the users have to plan their schedule considering the wait time for their food
User Persona
User Map Journey
Competitive Audit
Competitive Audit is an overview of your competitior’s strengths and weaknesses and also to know what worked and what did not. There are two kinds of audit; Direct Audit and Indirect Audit. Direct Audit is auditing brands that have offerings similar to what your brand is offering and also focuses the same audience. Indirect Audit is auditing brands with similar set of offerings but focuses on a different audience or have a different set of offerings and focuses on the same audience.
Our Competitive Audit goal was to compare the user experience of each competitor’s website (They are all indirect competitors as my prompt is to design a food ordering app fro food trucks in India and we don’t have apps for food trucks here yet)
Our key competitors are Slurpalicious, Where’s the foodtruck, Foodtruck Pub and Truck Bux. All of them are indirect competitors as they function in a dierent country altogether but they serve the same demographics of audience that we are looking for. India does not have apps for ordering food from food trucks. Slurpalicious and Where’s the foodtruck are small companies whereas Foodtruck pub and truck bux are medium sized companies.
Type and Quality of Competitor’s Product
Slurpalicious has a really good value proposition of “Pay it forward” where you can pay for someone’s meal or help the food truck with some donation. You can locate the truck on the map, place your order and set a time at which you are going to pick it up from them. You can also explore other underrated foodtrucks and also share the photos of food that you have had in the community. The UI is outdated and something that won’t keep the users engaged.
Where’s the foodtruck helps you locate the truck, preorder, receive notications when the food is ready for pickup but the user ow is very poor where the user has to go through many clicks and pages to checkout.
Foodtruck Pub helps you locate the truck, preorder and also give you details on events and deals that are available. The app kept crashing aer almost every click that it was very dicult to pull through to the last page.
Truck Bux helps you locate the truck, pre-order and pickup or get the food delivered to you in a few simple steps. The UI is very clean and smooth directing the user easily through the checkout process. The brand identity is also consistent with really good use of icons and visual design.
For a detailed Competitive Audit report click here.
Storyboarding
Storyboarding is a series of panels or frames that visually describes and explores a user’s experience with a product. There are two types of storyboarding; Big picture storyboard and Close-up storyboard.
Big Picture Storyboard
Big picture storyboard focuses on the user experience and thinks about how the product settles in their day to day life and chores and track the user’s emotions will using the product.
Close-up Storyboard
Close-up storyboard focuses on the product. What does the user do to move from one screen to another and what are the potential problems with the flow is what is depicted here. Close-up storyboard is less about the emotion.
Wireframing
Wireframing is a basic outline to establish a structure, highlight the intended function, save time and resources. There are Lofi wireframing and Hifi wireframing.
Lofi Wireframes
Lofi wireframes are wireframes similar to a blueprint that you make on a paper or any digitally without using colors and text. It shows what goes and where and the basic functions. They are less complex, less refined or polished.
The above shown paper lofi wireframes were later made digitally to be able to prototype and be used for the first usability study.
I wanted the first screen to directly take them to the food trucks near them as that is the main purpose of the app. It will also have a filter to filter food trucks based on their pickup time, rating etc.
The bell icon was added (after the first usability study) to the menu page so that the user’s can get notified when the food truck is nearby instead of them having to keep checking where the food truck is at.
Using the completed set of digital wireframes, I created a low-fidelity prototype. The user flow i connected helps the users to locate the foodtrucks and plce the order so the prototype could be used in a usability study.
Click here for Trucksy’s Lofi Prototype
Hifi Wireframing
Hifi wireframes are wireframes that closely matches the look and feel of the actual product. It is more refined and polished.
I added the “locate” option on the top bar of the menu screen for easy access of locating food trucks from multiple screens. The bell icon was added on the menu screen so that the users can set a notification whenever a particular food truck is nearby.
The final high-fidelity prototype presented cleaner user flows for locating a foodtruck and placing an order .
Click here for Trucksy’s Hifi prototype
Accessibility Considerations
Takeaways
Impact
The app makes it easier for users who don’t have time to go looking for foodtrucks and waiting in queue to eat from.
One of the feedbacks said
“I could just order and wait for the notification and then leave when it is ready so it helps me reduce wasting time waiting for the food too”
What I learned
While designing the Trucksy app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.
Next Steps
- Conduct more usability studies amongst users coming from different backgrounds to make sure it is accessible for everyone
- Conduct more user research to see if there are any scope for some other features
You can have a look at the entire file here. You can browse through all the pages and sticker sheets to check the components and style guide used here.
You can also look at the case study in a presentation format here
