top of page
Food Truck Mobile App
High-fidelity mobile app prototype for KC's Fresh Fruit and Smoothies food truck
Overview
Over the course of ten weeks, I collaborated with four fellow UX design students to design and prototype a mobile application for KC's Fresh Fruit and Smoothies, a food truck located in University City, Pennsylvania. Our process involved analyzing the business and its competitors, conducting user research, and iterating on our designs based on data-driven insights. By leveraging these findings, we were able to make informed design decisions and create a functional prototype that aligned with user needs.
The Team
-
5 UX Design Students
-
1 Client
Tools
-
Figma
-
FigJam
My Role
-
UX Researcher
-
UX/UI Designer
The Problem
This project was created as part of a User Experience Design class, with the goal of creating a seamless and engaging mobile ordering experience for a food truck. The focus was on enhancing the customer experience of placing an order for pickup, rather than on the business side of receiving and fulfilling online orders. KC's lack of an existing mobile app or website, combined with a minimal social media presence, made it a compelling client for this design project.
Goals and Objectives
-
Produce designs that accurately reflect KC's brand
-
Design a simple and intuitive mobile ordering experience tailored to college students on the go
-
Develop a fully functioning high-fidelity prototype addressing user needs
The Process
Experiencing the Customer Journey
To get started with the project, we needed to understand KC's business operations, competitors, and customers. I visited the food truck to experience the customer journey firsthand. Using the insights I gathered, I created a task flow to share with the group, detailing the interactions between KC and her customers, along with key decision points. The task flow highlighted the straightforward process of placing an order, as well as KC’s methods for fulfilling both smoothie and non-smoothie orders. It also revealed differences in ease and efficiency between the two payment options, Venmo and cash, during the order handoff.
Customer and Business Task Flow
Observing and Interviewing
​Over the next two weeks, my group and I conducted individual explorations of KC’s food truck. During the first week, we conducted a fly-on-the-wall exercise to observe the interactions between KC and her customers. In the second week, we approached customers while they waited for their orders to be prepared and conducted brief interviews. Collectively, we observed 16 customers and interviewed an additional 10 customers.
Key findings:
-
81% of customers were college students
-
75% ordered immediately
-
81% smiled upon receiving their order
Identifying the Target Audience
Our on-the-ground research confirmed that KC's primary customers were college students looking for a quick snack between classes. To create an ideal experience, we aimed to create a simple and straightforward process by streamlining the ordering process for students looking to order ahead. Our primary user persona that informed our designs was centered around a loyal customer, a student at Drexel University who values simplicity and efficiency.
User Persona for a KC's Customer
Market Positioning
After gaining insights into KC’s business, we analyzed potential competitors, including Wawa, Kung Fu Tea, and Fuel. We identified competitor weaknesses that aligned with KC’s strengths, which we viewed as opportunities to capitalize on in the app.
We determined that KC’s differentiator was the personal, friendly service she provided, recognizing her returning customers and greeting everyone with a smile. Additionally, while other businesses on campus offer cold beverages, they were all brick and mortar establishments. These differentiating factors helped us shape our design goals and determine what we wanted our designs to convey.
1/3
KC's Competitor Comparison
Designing Through Iteration
To reflect the joyful interactions we observed at KC's, we aimed to create an app with playful microinteractions and a bright, cheerful aesthetic. After brainstorming individually, the team collaborated to establish a unified aesthetic centered around bright colors, rounded shapes, and fruit imagery.
Moodboard reflecting the joyful interactions at KC's
Low-Fidelity
The first set of designs were grayscale wireframes. Through usability testing, we uncovered several pain points to resolve in future iterations.
Usability testing feedback:
-
Users could not see their order status if they closed the order review screen
-
Tipping preferences varied between users
-
The direction of dropdown chevrons was not intuitive
Low-fidelity designs for the main task flow
Mid-Fidelity
The next set of designs introduced color, icons, and images. Although we had a general vision for how the app should look, our initial mid-fidelity design meeting was slowed by disagreements over color and font choices. To refocus the team, I proposed an action-oriented approach where each member individually experimented within our collaborative Figma workspace. This allowed us to visualize ideas more quickly and facilitated productive group discussions, ultimately leading to decisions and alignment on visual design.
Design updates:
-
Added a status bar to the home screen once an order was placed to allow users to access their order status at any time
-
Introduced "no tip" and "custom tip" options
-
Changed the direction of dropdown chevrons to be more intuitive
​
Usability testing feedback:
-
Colors did not accurately reflect KC's brand
-
Users did not understand how they would pick up their order at the truck
-
The term "flavors" was misleading
Mid-fidelity designs with updates from low-fidelity testing
High-Fidelity
The final high-fidelity designs addressed the latest feedback from usability testing and introduced a polished flow, complete with microinteractions, for our prototype.
Design updates:
-
Brighter color palette to better reflect KC's brand and convey a cheerful, joyful atmosphere
-
Clarified the order pickup process
-
Changed “flavors” to “ingredients” for clarity
High-fidelity designs with updates from mid-fidelity testing
The Results
​Usability testing revealed several areas for improvement, including refining the order review process, simplifying the pickup process, and ensuring brand consistency. Through multiple iterations, we crafted a high-fidelity prototype that resonated with KC’s brand identity, offering users a simple, joyful, and memorable experience. Some of the user feedback we received from surveys and usability testing sessions is highlighted below.
Add to cart animation
​"Made me happy"
"Fun animation"
Design
“Very straightforward”
“Cutesy”
“Visually appealing”
Loading screen animation
​“Cute and eye-catching”
“A good addition”
Favorite features
“Ease at which it flowed from one task to the next”
“The location and times being at the top”
“How easy it was to order a smoothie”
Overall, this project demonstrated the effectiveness of an iterative design process informed by research and usability testing. User feedback highlighted the ease of the ordering process, delightful animations, and the visually appealing design. The final product provided a simple yet engaging experience that allowed customers to build custom smoothies and order ahead, reflecting both the functional needs of the users and the unique personality of KC's business.
Explore my other case studies!
bottom of page