Food - on - Wheels
UI / UX
This project focuses on designing an application for Food-on-Wheels, a regional food truck operating in the suburbs of a metropolitan area. Food-on-Wheels is dedicated to providing healthy, specialty meals and nutritious dishes. They offer a diverse range of competitive pricing options. The target audience includes commuters and workers who may not have the time or resources to prepare a family meal.
.jpg)
TYPE
UI / UX
DURATION
6 Weeks
CLIENT
Self initiated (Google UX Design Course)
TOOLS
Figma
Google Sheets
Procreate
Project Overview
Problem
Busy workers and commuters often do not have the time to prepare a nutritious meal.
My Role
UX designer responsible for developing an app for Food-on-Wheels from initial concept to final delivery.
Goal
Create a mobile ordering app for Food-on-Wheels that enables users to effortlessly order or pick up fresh, healthy meals and dishes.
Responsibilities
-
Conducting interviews
-
Creating paper and digital wireframes
-
Developing low and high-fidelity prototypes
-
Performing usability studies
-
Ensuring accessibility compliance
-
Iterating on design concepts
Process
(Hover and click on the arrow element to navigate to the corresponding section.)
User Research
Summary
I conducted interviews and developed empathy maps to understand the users I am designing for and their needs. The primary user groups identified through my research were working adults and full-time students who lack the time to prepare meals.
These groups validated the initial assumptions about Food-on-Wheels customers; however, the research also highlighted that time constraints were not the only factors preventing users from cooking at home. Additional challenges included various obligations, personal interests, and difficulties in accessing groceries or dining at restaurants in person.
Pain Points
Time
Working adults and full-time students are often too busy to prepare meals.
​​
​
Nutrition Content
Some adults are interested in consuming nutritious meals and want to be informed about the nutritional content.
​
Order Quantity
The order quantity is undefined, which can lead to overestimating or underestimating when placing an order.
Preparation Time
Due to their tight schedules, users require accurate preparation times for delivery or pick-up.
​
Persona
01
02
User Journey Map
Wireframe
Paper
Spending time sketching out iterations of each app screen on paper guaranteed that the elements incorporated into the digital wireframes effectively addressed user pain points.
​
For the home screen, I prioritized a streamlined and efficient ordering process to enable users to save time.
Digital
During the initial design phase, I focused on creating screen designs that reflected the feedback and insights gathered from user research.
​
Ensuring easy navigation was a primary user requirement, along with integrating features that support assistive technologies for enhanced accessibility.
Prototype
Low-Fedelity Prototype
With the finalized digital wireframes, I developed a low-fidelity prototype centered on the main user flow of ordering a dish, allowing it to be utilized in a usability study.
Usability Test
Findings
(Hover over the elemnts for more information)
I conducted two rounds of usability studies that significantly informed and refined the design process.
The findings from the first study helped transition designs from wireframes to mockups.
In the second study, we utilized a high-fidelity prototype, which highlighted specific areas of the mockups that required further refinement.
Swift
Ordering
Users emphasized the need for a quicker food ordering experience.
Enhanced Customization
Participants expressed a desire for more options to customize their orders.
Cash on
Delivery
There was a strong request for a cash-on-delivery payment option.
Round 1
Round 2
Clarity in Checkout Functionality
Participants found the "Checkout" functionality confusing, indicating a need for improved clarity and guidance.
Streamlining Checkout
Users identified that the checkout process included too many unnecessary steps, creating frustration.
Mockups
.jpg)
U
I
​
S
t
y
l
e
High-Fedelity Prototype
The final high-fidelity prototype incorporated refined user flows for ordering food, ensuring a seamless experience for users, and provided the flexibility to choose between pickup and delivery options.
Accessibility Considerations
Visual
Clarity
-
High contrast between text and background
-
Clear and legible fonts
-
Recognizable icons
01
Auditory Accessibility
-
Clear and distinct sounds
-
Captions and subtitles for videos and audio
02
Cognitive Accessibility
-
Simple and direct language
-
Consistent layout and navigation
-
Error prevention
03
Motor and Physical Impairments
-
Large touch targets
-
Voice control and keyboard navigation options
04
Takeaways
Impact
Working on the product development cycle from a designer's perspective has sharpened my design skills while ensuring that user needs remain a priority.
What I Learned
While designing the Food-on-Wheels app, I discovered that initial ideas serve merely as a starting point in the process. Usability studies and peer feedback played a crucial role in shaping each iteration of the app's designs. I also learned about various design tools and methods, as well as how to implement them effectively.
Next Steps
01
Perform an additional round of usability studies to confirm that the pain points users encountered have been effectively resolved.
02
Conduct further user research to identify any emerging areas of need.