Menu

Trubite

An online food ordering Platform, to assist users with live discovery and the ordering process of street-food.

RESEARCH | DESIGN | PROTOTYPING

Objectives

An exercise in Research, experience design and prototyping. To digitize the discovery and ordering process of street-food, in order to give more options and dietary control to users.

My Role

Research
System Design
Prototyping
Animation
Illustration

Tools

Figma
Adobe – Illustrator
Adobe Animate
Photoshop
Murai.co
Google – Mapstyle

Teams

Solo Project

Duration

Research – 11 Weeks
Design – 7 Weeks

The Challenge

Despite having more than tripled since 2017 (Source – Mckinsey & Company), the online food ordering industry still seems to greatly overlook the potential for industry-based solution for the street-vendor businesses and their customers needs.
This neglect has left problems unsolved in the discovery and ordering experience of street-food for all types of street-food customers, especially for the customers with time constraint and dietary restrictions.

Time Constraint

Professional workers and students don’t have the time to wait in line, instead prefers to order ahead and pick up on the way.

Food Variety & Dietary Restriction​

Street-food customers usually feel they don’t have options.
During late-nights, street-food is usually the only option, and customers with dietary restriction have trouble finding the right street-food vendor.

Lack of feedback

The conventional street-food ordering method lacks safety and rating information for customers to make informed decisions. Instead, customers rely on personal experiences with the vendor or hope for the best.

The Question

How might we digitize the discovery & ordering of street-food, and give users control over their time and dietary restrictions?​

The Solution

Trubite is an online food ordering platform, to help assist customers with live discovery and ordering of street food.
Trubite screens

Key Features

Location based searching

Location-based services​

This functionality is integrated into both the list and map screens to aid users in discovering nearby street-food vendors.

Moreover, users can alter their location by tapping on the location tag at the top of both the list and map screens, either by entering their preferred location manually or sharing their current location with the app.

QR code Scanner

Conveniently located on the navigation bar, this feature allows users to swiftly access the menu of food vendors they discover while walking by scanning the QR code provided by the vendor.

QR code scanner option

Order Scheduling

Users can switch between a standard or scheduled ordering option by simply pressing a button during the checkout process.

The scheduling feature informs users about the remaining time the vendor will be in the area by displaying a countdown. Additionally, it disables unavailable times to streamline the ordering process.

Order Customization

This feature operates in two ways: first, allowing users to add or remove items from a chef-prepared menu, and second, providing users with complete control over their order. This functionality is particularly crucial for users with dietary restrictions.

Quick Selection

Strategically positioned at the top of the discovery page, this feature offers users quick access to assist them in deciding what to eat by presenting options aligned with their preferences.

This feature is achieved by prompting new users with a quick “choice of food” option during the signup stage, and it is reinforced by incorporating users’ order history.

Filtering

For a more refined search and discovery of street food, the filter screen offers users various filtering options.

This feature can be effortlessly accessed at the top of both list and map screens, offering screen-specific filtering options conveniently presented for easy access. For additional filtering choices, a simple tap brings up the main filter screen.

Payment Portal

Payment Portal

This functionality is integrated into the checkout process, allowing users to either choose a saved payment method or input a new one to confirm their order.

This helps ease the transactional friction between the user and the street-food vendors while also helping reduce the time it takes for the user to pick up the order.

Navigation

This feature is heavily dependent on the implementation of the Google maps platform into the Trubite app.
The implementation of a well tested platform like google maps into the Trubite app adds more convenience and reliability for users in discovering street vendors within the app.

Storyboard

Storyboarding the users journey with Trubite​

The storyboard helped visualize how Trubite can be useful in two different circumstances that users consider key pain points in the current street food ordering experience.
Office hour
Log In
Discovery
Customizing
Ordering
Order Ready
Navigation
Pickup Order
Enjoy

Process

Research

Survey​

I created a survey to have a grasp of peoples perception of the current street-food experience and their expectation of a mobile street-food ordering platform.

I targeted individuals aged 18-44 residing in the United States because, according to an article by Statista and the National Restaurant Association, consumers between the ages of 18-34 were most likely to purchase a meal from a food truck, followed by those aged 35-44.

Street-Interview

I engaged with food truck customers from diverse backgrounds by positioning myself in front of street-food vendors as they placed their orders. I offered to cover the cost of their orders in exchange for discussing their conventional ordering experiences and their expectations for a digitized version of that process.

3 Professional Workers​

To have a better understanding of work related time constraint and also their pain points related to experience with street-food.

5 college Students​

To have a better understanding of school related time constraints and pain points related to street-food, especially during weekend night outs.

1 non tech-savvy​

To create a low barrier of entry for all users.
“I don’t mind standing in line with a friend but when you’re alone it can sometimes be a little awkward, so I act like I’m doing something on my phone so I’m not forced to make those awkward small talks.”
Riley, College student
Columbus, Ohio
“I like the experience of being around new people, and street food kind of does that but sometimes I just want my coffee as soon as possible.”
Emma, Recruiter
Columbus, Ohio
“I definitely would like to know what they have before standing in line, sometimes to be honest it feels like I have to make a compromise when they don’t have what I want.
Brice, Data Analyst
Columbus, Ohio

Insights​

Lack of menu knowledge

Customers often don’t have knowledge of the menu before standing in line.

1

Long lines and wait time

Long lines dictate customers street-food buying decision and experience.

2

Disovery

Customers often have no idea of street-food vendors whereabouts except the ones in their line of sight.

3

Lack of Variety​

The Lack of a larger area of vendor discovery leaves customers feeling they have less option.

4

Market Analysis​

I did a market study to find a similar offering and conducted a direct competitive audit to study their value proposition and limitation.
*I also did an indirect competitive audit and the study proved to be a combination of individually owned food truck websites and fast food restaurants that offer late night ordering options (e.g. McDonald).
The study result, in the case of the individual food truck websites showed, these websites don’t address few key user pain points, mainly the discovery and online ordering option, which our platform offers.
In the case of the fast food restaurant, although they address most of the user pain points, they lack location availability to be a direct Competitor, meaning most of our users are in the metropolitan area and these restaurant mostly operate outside of that area.

StreetFoodFinder

Uber Eats

Opportunity Areas​

Prototype

I followed a three stage prototyping method, paper wireframing, Low-fidelity wireframing and High-fidelity wireframing.​

User Flow​

After the initial research with the survey and qualitative interviews, I created a user flow where I cover the user’s ordering process from the login screen to order confirmation screen.
The end of the ordering process depends on whether or not the user chooses to schedule the order.

Paper Wireframes​

I started the design process with a round of paper wireframes for each use cases discovered during my initial research.
Login Page
Home Page
Filter Page
Menu Page
menu Item page
Check Out Page
Cart Page
Order Confirmation Page

Low-Fidelity Wireframes

I used the paper wireframes to design a low-fidelity wireframes to clerify the blueprint of the platform and help visualize each screens layout.

Usability Testing​

I, then used the low-fidelity wireframes to create a low-fidelity prototype and run a usability study in order to test navigation functionality and user flow.

Kimberly Wilson, 36

Security Officer

“It’s cool, I didn’t find Anything challenging, just fix the ‘add to cart’ thing, that is the only thing I found a problem with”

Feven Berhé, 24​

Recruiter

“I liked the fact that everything was a trail, like you dont have to go back just to see the menu, everything is coming together, every time you go to the next step, the first two steps are on there.”

Mohamed Ali, 22​

Student

“I was a little confused about selecting ingredients, I would need more information especially with the drop down design.”

Synthesis​

I used Affinity mapping to synthesize the data collected from the usability study, where I turned all research participants inputs into a data cluster then separated them into themes, then into actionable insights.

High-Fidelity Prototype​

After running usability study using the low-fidelity prototype, I then used the insight from the study to improve the design and turn it into a high-fidelity prototype.

Responsive Design​

To ensure the Trubite app adjusts seamlessly to different screen sizes, I designed each screens to be able to scale from a regular market phone to a tablet.

Usability Testing

I, then used the High-fidelity Prototype to run a usability test in order to test the newly designed features based on the pain points discovered during the low-fidelity usability test while also testing navigation functionality, user flow, design and interaction choices.

Takeaways

User-centered approach

Being a street-food customer myself, and having an insight to some of the pain points of ordering from a street vendor, I decide to take the user centered approach by having real users input as a foundation of the project.

Research and design

This project has been a fruitful experience in conducting user research and iterative design process with tools like Figma to solve user problems related to the discovery and ordering of street food.

Confidence

While Product designing is an undertaking for a team, this project helped to assess and validate the skills I bring to the table as an individual contributor.

Reflection

Vendor dictated user experience​

The goal of this project (which, originally was a business venture) is to reduce the friction and create consistency between the user and the ordering experience from different types of street vendors.
Street Vendors come in different types and sizes, which dictate the types of service they can offer and the areas they can serve, so the user experience of the Trubite platform depends highly on the vendor. Therefore, the goal is to create a user experience that’s cross-functional and consistent between the various types of street vendors.

Fighting the wait time and the long lines

Long lines can result in customers looking for other alternatives or deciding not to buy, so how would we make sure to have adequate amount of street vendors to satisfy the areas most populated with potential street food customers in order to reduce the wait-time and long lines, while also not over-supplying the demand and making it not worth the while for the vendors.

Cultural and Geographical constraints

I started this project as a possible business opportunity in partnership with local street vendors in Columbus, Ohio; therefore the research is based on U.S. customers and vendors, this limited the solution to serve Americans only and excludes the rest of the world.

Next step...

Vendor-facing Application

I’d like to design the vendor-facing solution for Trubite and understand how it can be integrated with the user facing solution, possibilities including but not limited to giving real-time data to users about ingredient availability, vendor location etc. while also receiving real time orders from the users.
There could also be an opportunity to integrate analytics for street-vendor owners to be more efficient with their service, timing and location which also makes the whole system more efficient in serving the users.

But first...

I would like to incorporate the feedback derived from testing into the next version of the prototype.
I would also like to get some feedback on some of the ideas from the ideation phase that I feel could be useful but weren’t focused on solving for the main pain-points such as…

Track favorite street vendors

  • Implement a design that could help users track their favorite food trucks whereabouts.
  • User gets notifications when food trucks from their favorite list is in their area.

Catering

  • Connect users with vendors that are able to cater and have the full transaction in-app to build trust between both parties.

Group Order

  • Users can collect orders from others into one group order.

Ordering from multiple vendors

  • Users would be able to order from multiple vendors that are parked near or en route to the first/main vendor they ordered from.

More Input for the user

  • A comment/note feature for the user to have more control of their dietary needs.

Sinzro

SCRIPT | DESIGN | ANIMATION | EDITING

Portfolio

RESEARCH | DESIGN | HTML | CSS