The Case Study
The Problem
Metropolitan workforce has a problem ordering food from the food truck while at work without lengthy wait times.
Proposed Solution
Present an app that will allow people at work in busy environments to order food from food trucks ahead of time and alleviate long lines.
Keep scrolling to see my process
Research Overview
- Understanding the problem
- Competitive Audit
- Discovering pain points
- Developing a persona
- I conducted interviews, created empathy maps and journey maps to understand the users I’m designing for and their needs. A primary user group identified through research were working adults who didn’t want to waste their lunch in line waiting for food. This user group confirmed initial assumptions about food truck customers, but research also revealed that time was not the only factor limiting users from ordering food. Other user problems included ease of use of food apps and accessibility options.
- Pollo Locuas, a direct competitor, which is a Mexican food truck website, that only has 1 location. Pollo Locuas only has a website and not an app. This website lacks all capabilities that encourage users to order online.
- Our other direct competitor is Calibria On Wheels, a low-cost family-style Italian deli style food truck. Calibria On Wheels also only has a website and not an app. This website lacks all capabilities that encourage users to order online, but they do offer catering.
- Taco Bell is a indirect competitor to Clay Visions Designs - Food Truck App. Taco bell has encompassed many features and is a very large franchise in the food business
- Pollo Locuas website is simple but is incredibly easy to use. Being as though this is an informational only website, there is no option to order. They also don’t offer any audio accessibility features, though, and is available only in English. For any questions they encourage users to email or call.
- Calabria on Wheels is also a website that is simple but is incredibly easy to use. Being as though this is an informational only website as well, there is no option to order. They also don’t offer any audio accessibility features, though, and is available only in English. For any questions they encourage users to email or call or reach out on social media platforms.
- Taco Bell is a world known franchise. They offer an app and website that are very good for informational purposes and ordering. They also don’t offer any audio accessibility features, though they do offer language changing.
- Food Truck service
- Catering
- Online ordering
- Delivery options
- Be more equitable
- Consistant Menu
- Accessibility Options
- User-flow better directed
Understanding the problem
Summary
Our key competitors
Quality of Competitors
Competitors Strengths
Competitors Weaknesses
- To better understand how to make a product worthy of the target users, I had to first discover the target users' pain-points. These pain points will not only give me an insight of what is going wrong with the competition, but it will also let me know what is going right.
- Waiting Times - Potential users are frustrated with wait times associated with food trucks.
- Usage - Food apps used in the past can be difficult to use and not straight forward enough.
- Accessibility - Apps in general do not have accessibility features for those with hearing or visual impairments. Supporting those who may have impairments is a key factor in a successful product.
Discovering pain points
Summary
- A primary and secondary user group was identified through research. These two were working adults who didn’t want to waste their lunch in line waiting for food and user’s that are extremely impatient.
Developing a Persona
Summary
The Design
- User Flow
- Sketch Wireframe
- Digital Wireframes
- Usability Study
- To get a better understanding of how the target users would use an app such as this (what type of steps they would take and how they would feel about these steps) we created a variation of user flow techniques using one of the personas created. Mapping Brandon’s user journey revealed how helpful it would be for users to have a straight-forward app.
User Flow
Summary
- For each screen of the app, I created a series of wireframes on paper in which I selected the best components to address user pain points into the last frame. For the home screen, I emphasized a design leading to completing an order.
Sketch Wireframe
Summary
- As the initial design phase continued, I low fidelity prototypes with designs on feedback and findings from the user research, as well as implementing new features for aesthetics.
- With accessibility in mind, the ability to customize their food was found to be very important.
- Low-fidelity prototype - Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was building and ordering food supplied by the food truck, so the prototype could be used in a usability study.
Digital Wireframes
Summary
- I conducted two rounds of usability studies. Findings from the first study helped guide the designs from lo-fidelity mockups to lo-fidelity prototypes. The second study used a lo-fidelity prototype and revealed what aspects of the mockups needed refining for the hi-fidelity mockup and prototype.
- “Screen reader” needs rewording
- Confirm screen too cluttered
- Needs button labeling
- There were no literal back buttons
- Reduce drop shadows on buttons
Usability Study
Summary
Round 1 Findings/Insights
Round 2 Findings/Insights
Refining The Design
- Visual Aesthetics
- Accessibility
- Deciding the look and feel of the website is based on a couple of philosophies. Pretty colors and cute shapes are cool but they are not always best for accessibility.
- Color: blue was used to standout and is visually appealing. Silver was used as an accent color with a gradient to give it a metallic look.
- Typography: Typography – Inter was chosen because it’s close to an Arial font with a slight difference in the curvature that gives it a modern look.
- Components: the menu buttons were made to closely resemble physical buttons. The “in-app” buttons have a drop shadow so they would feel raised against the background and would readily be noticed as clickable components.
Visual Aesthetics
Summary
- Accessibility and equitability should also be in the forefront of design planning. Not only will this be helpful for those with impairments but having accessibility options brings value to both ends of the spectrum and those in between.
- Provided access to users who are vision impaired through adding alt text to images for screen readers.
- Provided access to users who are vision impaired through adding text enlarge options.
- Used labels to describe icons and all buttons to ensure those who are not tech savvy understand without doubt the buttons and icons.
Accessibility
Summary
Accessibility Options Include
Conclusion
- Final Product
- Final Designs
- Takeaways and Next Steps
- The final high-fidelity prototype presented a straightforward approach to ordering. It also meets user needs for customization and accessibility.
Final App Mockup
Summary
- Impact: The app makes users feel this app will help make their lunch enjoyable. One quote from peer feedback: “Great app, can't wait to see the finished version.”
- What I learned: While designing the Clay Visions Designs Food Truck App, I learned accessibility and usability comes before design. Usability studies and peer feedback allowed me to alleviate any bias.
- Conduct another round of usability testing. This will ensure “no rock is left unturned”.
- Finalize app for deployment.