Food Truck Delivery App
Roles
Deliverables
Project Specification
-
UX Researcher
-
UI Designer
-
Competitive Analysis
-
User Surveys
-
Sketching
-
Wireframing
-
Prototyping
Why This Project:
Portfolio project as part of the Google UX Design course.
Duration: 1 month
Tools used:
-
Adobe XD
Project Overview
This app was created to make it easier to find your favourite food trucks and order food without having to wait in line. The target audience for this app includes anyone who enjoys ordering from food trucks, especially those who are short on time during work. Being able to order in advance means that there is more time for those on a lunch break to enjoy their food. This project was created as part of the Google UX Design course and the idea was chosen by using the website Sharpn. It gave me a chance to explore and put into action UX techniques learned in the course up to that point.
The Problem
The main problem being addressed by this app is the long waiting times during busy parts of the day. People at work who regularly order from food trucks for lunch but spend most of their time waiting in line will now be able to order in advance, allowing them to skip the queue and collect their food when it's ready.
The Goal
The goal is to make it effortless for anyone to locate their favourite food truck and place an order without having to wait in line.
Research
I conducted research to determine the most pressing needs of people when it comes to ordering from their favourite food trucks and to assess the potential benefits of the app.
I initiated the research process by conducting a competitive audit to identify whether any similar apps existed, and if so, how they functioned and how they were designed. Analysing the strengths and weaknesses of these existing apps helped inform the structure of the survey and interview questions for the next stage of my research.
Following this, I administered surveys and conducted interviews with five individuals to gain insight into who would get the greatest benefit from this app. The surveys included questions about user preferences, challenges faced when ordering from food trucks, and the expectations they had for an app like this.The results indicated that the app would be of particular interest to busy adults, including those in college and the working population.
Competitive Analysis Findings
Opportunities
A better-designed app for pre-ordering food and collection is needed. While the websites researched are functional, it lacks an aesthetically pleasing and user-friendly interface. It is imperative for all websites to focus on integrating accessibility features into their design and functionality, ensuring that a broader audience can easily access and place orders through their platform.
Websites should strive to be welcoming and enjoyable to use, with a seamless user experience from start to finish. These three companies offer user-friendly websites, but some fall short in providing sufficient information, while others overwhelm users with an excess of details. Striking a harmonious balance between color schemes, text content, and graphics is a crucial aspect that deserves attention, as it can guide users through the ordering process more effectively.
User Pain Points
Identifying pain points during the research phase played a pivotal role in shaping my priorities as I ventured into the define phase. These pain points served as critical guideposts, directing my attention to the most pressing and impactful issues that needed resolution. They not only helped me understand the specific challenges faced by users but also underscored the importance of addressing these pain points as the core objectives of the project.
By delving deep into these pain points, I gained a comprehensive understanding of user needs and preferences. This not only informed my project's focus but also laid the foundation for user-centric solutions. It became clear that tackling these challenges would lead to more meaningful and effective outcomes.
The pain points unearthed during the research phase were instrumental in shaping the project, reinforcing the importance of addressing user needs and ensuring that the solutions developed during the define phase were driven by an understanding of the user's perspective.
1
Those working in offices or college who all get their lunch hour at the same time find that they don't have much time left to eat after waiting to order food.
2
There is not enough variety in the food available which does not require waiting in line.
3
Some people need more time to get to where they want to go for lunch and using other ordering/delivery apps can be difficult with little or no accessibility features.
Define
The research data was then turned into user personas, making vivid representations of real users. These personas were invaluable guides, keeping the design process user-centered and aligned with real-world experiences and needs
Persona 1
Problem Statement
John is a busy accountant who needs a convenient way to order the food he likes for lunch because he is too busy during the day to spend a lot of time waiting in line.
Persona 2
Problem Statement
Ana is a student who needs a way to pre order food because all the students in her college get lunch at the same time leading to large queues for food.
Sketching ideas on paper facilitated the thought process more effectively than digital creation. The iterative process quickly revealed layouts that wouldn't be effective. During the development of the homepage, I discovered that placing a Hero image at the top, featuring content such as deals, discounts, and popular items, followed by the menu navigation at the bottom, offered easy access to the app's most essential features.
Ideate
Digital Wireframes
Converting the initial paper layouts into digital wireframes played a crucial role in enhancing the design. As the course advanced, I continued to refine the layout, incorporating valuable user feedback proactively.
Taking feedback and incorporating it into the app led to a number of key additions which help the overall layout. Each of these items help the user navigate and complete the flow with a satisfying result.
Low Fidelity Prototype
The Low-Fidelity Prototype gave a solid foundation for how the overall app flow would work. I tried to create as much functionality as possible while also keeping it simple so that the user could get a feel of what the app would be like when the overall design is upgraded to High-Fidelity.
Low Fidelity Design - Usability Study
Affinity Diagram
Using an affinity diagram proved instrumental in organising the insights collected from the usability study of the initial low-fidelity prototype test involving five users. Categorising each quote and observation allowed me to identify recurring themes. These themes facilitated the sorting of each card into relevant sections, providing a clear focus for the next steps in my design process.
Usability Study: Findings
Conducting two rounds of usability studies proved pivotal in enhancing the overall design. Participants identified features I hadn't initially considered, leading to their integration in subsequent design iterations. These improvements have significantly elevated the overall layout and flow with each successive update.
Round 1 Findings
Users would like a place to add notes to their order
Deals/discounts section was confusing on homepage
More functionality needed for changing number of items
Round 2 Findings
Location feature is missing from flow.
Feature to choose time for pick up would be useful
User Flow
I created a user flow map to show the user's journey within the app. This, coupled with insights from usability studies, revealed areas that required enhancement to ensure the optimal user experience
Develop
My aim in enhancing the mock-up pages was to heighten the contrast between sections and restructure the layout for improved readability. This began with the creation of a style colour which included colours and font types to be used. The extended colour palette provided me with options for exploring the chosen colours further if required in the design to add more depth.
There were a number of iteration of the design throughout the process and some of the differences are highlighted below. The main difference in these screens was the addition of more contrast using colours to break up the page into sections. This helped to group similar items together.
Before Usability Study
After Usability Study
Mockups
The below mock ups show the main screens that users would be focused on while using the app. Comparing some of these to the original low fidelity screens shows how the design has progressed through the process.
High-Fidelity Prototype
The image below illustrates the interconnected screens, ensuring an optimal user flow. Clicking the link also offers an opportunity to experience the final design in action.
Accessibility Considerations
1
Alt text added to images for the use of screen readers
2
Keeping text under icons helps to ensure that icon is not misinterpreted which avoids any confusion.
Going Forward
Next Steps
1
Continue to research and develop the app carrying out usability studies to test where the app can be improved and to find where users encounter issues. Going back to sketching some features to improve them can also be tested using A/B testing to compare and validate if the current features/layouts are the most efficient and user friendly for the app.
2
Read further on the topic of accessibility, to learn how to improve and incorporate into the apps design.
3
Explore more design features such as real-time tracking of food truck locations, or integration with payment systems.
What I learned
Through my experience of researching and designing, I have acquired valuable skills that I am committed to further developing. By breaking down each step and meticulously considering every aspect of the research and its integration into the design, I have learned how to refine and methodically progress with an idea, ensuring that no detail is overlooked.
Th usability studies in particular for this project were helpful as it showed me the pain points the user experienced while using the app. This gave me instant feedback, allowing me to improve the overall experience of the app through an improved design.