Case Study: Mobile app to pre-order from food trucks.
(Happy Sunshine Food Truck, 2021)
(UX Research)
key tasks
*UX Research
Uncover users needs and motivations. Observe the product pain-points.
*User Interview
Build User Persona and Journey Map. Interview users to collect user data.
Prototype Testing
Conduct prototype testing to validate design decisions. Analyzing data from interviews with users and suggesting improvements.
about
Understanding the problem
"I'm late for class standing in line"
Happy Sunshine is extremely busy during lunch time. After interviewing customers, we learned that customers can stand in line for up to 20 minutes waiting for the food. This is very time consuming, considering customers usually have only 1 hour break for lunch.
“I cannot find the food truck.”
Happy Sunshine has different opening times and multiple locations depending on weekdays. Customers emphasise that they need an easier way to locate the food truck.
“I stand in line for 20 minutes then my order is out-of-stock.”
Somes items are out-of-stock during peak hours. It’s very time-consuming, as well as giving customers a bad experience.
results
Your Order is ready to Pick-up!
After 10 weeks, we were able to publish "Happy Sunshine Food Truck App"
We are happy with not only the final products, but also how we are able to such complicated problem, providing an effective solution for customers.
Happy Sunshine Food Truck
Offering breakfast meals fresh from-the-oven, they have a large group of frequent customers, making Happy Sunshine overcrowded during rush hours.
credits
Project Manager: Steven McInerney
Data Architecture: Liam Mailley and Sylar Li
UI Designer: Quinn Khuc
UX Designer: Cheryl Vo
approach
Product Vision and Solution
From the data we collected from interviewing customers, we decided as a product to identify key business goals:
-
Seamless Pre-Order and Pick-up Experience: One of our primary goals is to provide customers with a seamless pre-order and pick-up experience. Users should be able to easily browse our menu, place their orders in advance, and schedule a convenient pick-up time. We aim to save our customers time and enhance their overall food truck experience.
-
Effortless Food Truck Location Tracking: We understand that locating our food truck is crucial for our customers. Hence, another key goal is to provide real-time location tracking on the website. Users should be able to access an interactive map that displays the food truck's current location and any upcoming scheduled stops. This feature will allow our customers to plan their visits efficiently and never miss the chance to enjoy our delicious offerings.
-
Enhanced Visibility of Available Foods: Our product also aims to enhance the visibility of available foods. Customers can plan their meals and make informed purchasing decisions.
competitive analysis
our sights
As a starting point, we each did some market research and completed a competitors analysis to investigate the current features that we liked about each app:
-
Ability to Choose Pickup or Delivery: Allowing users to choose between pickup and delivery options is a crucial feature that caters to different customer preferences and needs. By providing this flexibility, our product can enhance user experience, making it convenient for users to get their food in the way that best suits their schedule or location.
-
High-Quality Menu: We want to incorporate high-quality images of the menu items to powerfully to enhance the user experience, eventually increasing the likelihood of making a purchase.
-
Keep the Design Clean: A clean and clutter-free design is essential for a seamless user experience. By minimizing unnecessary information and visual distractions, we want users to easily navigate through the interface and focus on the most relevant content.
persona
user persona
We identify User Persona to represent the needs of a larger group of customers, prioritizing the needs of:
-
Time-saving and Convenient: They have limited time and seek ways to simplify tasks, including food ordering and delivery.Time-saving is a top priority for this persona. They are looking for an app that offers quick and seamless ordering processes, easy payment options, and fast delivery services.
-
City-based: They are likely to be tech-savvy and have a wide range of food options available to them.City-based customers seek variety and exploration. They are interested in an app that provides a diverse selection of food choices from various local restaurants and cuisines.
-
Health conscious: They may have dietary preferences or restrictions and seek transparency in food ingredients. They value customization features that allow them to modify their orders to align with their dietary preferences.
SPECIAL FEATURE
Scan QR - know your shirt!
low-fidelity
low fidelity
Our low-fidelity wireframes prioritize intuitive navigation and information hierarchy. We map out the main sections of the website, such as the menu, location, and contact details, to ensure easy access to essential information for our users.
journey map
user journey map
We create Journey Map of the process that users will go through from end-to-end to complete an order. We identify the promising opportunity of
-
Awareness and Discovery: User becomes aware of the app through marketing efforts, word-of-mouth, or app store browsing.They discover the app's features, such as a diverse food selection and a user-friendly interface.
-
Menu Exploration: User explores the app's menu, filtering options based on their dietary preferences. They view high-quality images and detailed descriptions of menu items.
-
Placing an Order: User selects food items and adds them to their cart. They customize their order, choosing specific ingredients or modifications as needed. User reviews their order details, ensuring accuracy before proceeding.
-
Checkout and Payment: User proceeds to the checkout page to review the final order summary. They choose a payment method and provide necessary payment details. User receives a confirmation of their order, including estimated delivery or pickup time.
-
Delivery or Pickup: User receives the order through delivery or picks it up at the specified location. They have the option to rate the delivery experience if applicable.
-
Repeat Orders and Loyalty: Satisfied users are more likely to become loyal customers, placing repeat orders. They continue to provide feedback and earn rewards, contributing to a positive feedback loop.
SPECIAL FEATURE
Scan QR - know your shirt!
design system
design system
We created a system to ensure consistency and efficiency throughout the design and development process:
-
Color and Typography: We establish a carefully curated color palette that reflects the food truck's brand personality. The color choices evoke a sense of warmth and approachability, while the typography is chosen for readability and a touch of playfulness.
-
Iconography and Imagery: Our design system includes a set of custom-designed icons that are used consistently to create visual interest. We carefully select imagery that showcases our delicious food, enticing visitors to explore further.
-
Button Styles: We define the various button styles including primary and secondary buttons. Additionally, interaction states, such as hover and active, are detailed to provide a seamless user experience.
testing prototype
The users responded positively about the overall experience of using the home page to be pleasant. Researched conducted completely anonymous by Google Forms
Cart encourages users to proceed checkout, and users find it quickly to find their selected products.
Researched conducted completely anonymous by Google Forms
Users provided feedback on with the prefer of accessing Google Maps within the app.
Researched conducted completely anonymous by Google Forms
Users appreciate the control over customization process and allow them to tailor their orders Researched conducted completely anonymous by Google Forms
Before launching, we conduct prototype testing and ask users to complete a survey, ensuring the product will perform correctly. Key takeaways:
-
Customize screen is appealing
-
High-quality images
-
User-friendly and Easy to Use
MVP
defining MVP
We then started to sketch following main screens for IOS engineers to begin on the architecture:
-
Login screen
-
Main Menu
-
Start Order
-
Customize Order
-
Check Out
-
Track Order
-
Review Page
explore more projects
explore more projects or return to Showcase.
