truck in
→
truck in →
Overview
Helping food trucks and people who love food trucks connect.
An app for food truck lovers to order ahead, bookmark spots for later, and communicate with local businesses.
Discipline
UX Research, UI/UX Design
Timeline
May 2022 - July 2022
Tools
UX Research Methodologies, Ideation, Prototyping, Figma, User Testing
Role
UX Designer
The Problem
I thought first about my personal experience with finding food trucks - borne out of a desire to support local eateries and the enjoyment of stumbling upon a delicious treat by the roadside. I wanted to find a way to connect these two experiences and produced Truck In, a mobile app that enables users to find, save, and order from their local food trucks easily.
How might we help make a seamless mobile app experience for food truck enthusiasts to connect with food trucks and find options that best fit their needs?
Project Considerations
I started this project with a particular interest in working through different research tools and methodologies. Connecting this sort of design with my work in architecture, I knew the foundation for this product lies in the context and research before I began to sketch ideas. Thus, I developed some internal goals that I hoped to realize through the process of creating this app.
Conduct usability studies with a working prototype of the product
Conduct a thorough competitive analysis for the product
Create a well-rounded research plan to accompany the usability studies
Use a user journey map to better understand the user flow of the product
Initial User Research
I began chatting with some friends and family about their varying levels of familiarity with food mobile ordering apps and experience with ordering from food trucks. Based on these informal interviews, I narrowed down a few key objectives for this project based on my user research and developed two major user personas that fit the general target audience for this application.
Common Pain Points
Trying to locate nearby food trucks is difficult (access issues)
Because food truck schedules can sometimes be infrequent, having a feature to bookmark and make notes on a place would be beneficial (time considerations)
No streamline to order-ahead for food truck apps (time considerations)
Lack of clear accessibility options for those with food allergies or dietary restrictions (access issues)
User Personas
Sandra (64) is a doting grandmother who seeks out allergy and diet-friendly food options for her family can stay healthy and nourished.
Ben (28) is a busy foodie who wants to find a mobile ordering app that allows him to eat at great food places quickly and easily.
Competitive Analysis
Based on my interest in research and relative unfamiliarity with popular food truck ordering options, I decided it would be beneficial to understand common traits across mobile ordering apps as well as scope out existing apps in the market.
My competitive analysis consisted of notes about the unique product offerings, UX interactions, and visual design for 13 indirect and direct competitors. Studying these precedents helped me narrow down a basic template for what I think my own designs should incorporate.
Initial Synthesis
Users who are interested in ordering from a food truck need a clear and guided process to assist them in their search
Many who decide to order from a food truck will do so after being given sufficient information about the business offerings like the menu and reputation
Initial Solutions
Focus on creating a streamlined business search and food ordering process informed by previous research on similar competitors within the market
Prioritize features like menu filters, order customization, and business information for user’s ease-of-access and knowledge
Ideation
I used a series of initial wireframes drawn by hand to inform the final design, shifting the paper wireframes into a digital mid-fidelity mockup. Getting quick ideas out on paper first allowed me to select what organization and look I preferred for the first digital wireframe. Napkin sketches are an important part of my creative process, and I often refer to the initial ideations of my work as a guide for my later iterations.
Paper Wireframes
Initial Brainstorming Notes
Close-up Storyboard
Big Picture Storyboard
User Flow Planning
User Persona Planning
Design: Mid-Fidelity
Check out my mid-fidelity prototype →
You can see the digital wireframes below ↓
The next step in my process is translating my paper creations to the screen for better editability and to take a step closer to finalizing the product. While I had a lot of ideas and features that I wanted to carry over from my paper wireframes, I remembered my initial goal: to focus on the basic user journey - from opening the app, to finding a food truck, and finally to ordering. This mid-fidelity design covered the basics, letting me play with color and sizing.
Design: High-Fidelity
Check out my high-fidelity prototype →
Check out the digital wireframes below↓
After the mid-fidelity test run, I was excited to build out the high-fidelity prototype. I was particularly interested in establishing strong branding and iconography that carried throughout the user journey – something that provided a cohesive and direct voice to guide the user. I also dedicated this prototype to narrowing down features and removing unnecessary elements that would be confusing to the user.
The high-fidelity prototype let me tweak the issues I saw in the mid-fidelity prototype, which you can see in the digital wireframes.
User Testing
After developing the first high-fidelity prototype, I wanted feedback from potential users about the overall clarity of the user journey. It was also instrumental to see how the app is used in a real-life situation.
To achieve this, I conducted five moderated usability studies with the prototype, taking notes about the click path, observations, quotes, and task completion based on five prompts of each user.
Check out my research study below ↓
Tasks
Starting from the home page, how would you begin to find a food truck you would be interested in ordering from?
If I said, let’s bookmark a food truck, what do you think you might use this feature for?
How would you describe the process of browsing food truck menus? If you had dietary preferences and wanted to customize your order, how would you do that?
Let’s say you’re ready to finish the ordering process with a full cart. How would you do that?
Try using the in-app navigation to locate your pickup location.
Final Iteration
Create open lines of communication with the app
Add an accessible way for users to chat with food truck business owners
Add a quicker viewing option for business updates
Highlight important filtering and search features by designating specific buttons or customization options when available
Reduce noise
Pare down options during checkout to not overwhelm the user
Change color scheme to fit within a general 60/30/10 rule and allow for future dark modes
Stick to consistent branding scheme throughout the app (including buttons, spacing, and icons)
Synthesis
Create open lines of communication with the app – a big issue that users were facing was “Where do I go to for help?”
Reduce noise – the majority of testers were able to get through the checkout process with little to no issue, but a different problem arose: “Why should I use these other features?”
Design: Final Iteration
Check out my final iteration prototype →
You can see the final components, design guidelines, and digital wireframes below below ↓
After the user testing phase, I was left with valuable insights from the user experience. The most important feedback was in simply observing how users moved through the app, especially in areas where there was confusion or hesitation. The notes were a springboard for improvements in the design, which I catalogued in my final iteration considerations.
Afterwards, I found that most users identified the implied navigation cues (e.g. the navigation bar icons) and used those to move around the app while also being able to move following a basic user flow that took the customer from locating a food truck to completing an order pickup.
Challenges
I found that the biggest challenge during this entire process was understanding how to incorporate insights into actionable design changes. Using methods like affinity mapping and clarifying advice with interviewees helped me organize the more abstract notes from the usability studies into concise themes, which allowed me to think through the next steps I should take to improve my design.
Takeaways
After publishing the final prototype, I finished the project with a few takeaways:
Take more time during the user testing process; given more time I would have enjoyed conducting a post-launch quantitative test to see how the product performs with real users.
Design a better communication flow where users can truly interact with businesses on a more social scale than just messages and updates.
Provide a better sharing system for users to talk to other users, especially for sharing outside of in-app users.