The Problem
The target customers of the FOOD TRUCK lack the time or skills necessary to prepare meals when in rush. Help FOOD TRUCK to create its first mobile experience with an easy to navigate menu and payment app.
The Goal
My goal was to design an app that is simple for all users, which will allow them to easily order and pick up fresh and healthy meals.
My Role
My role in this project as a UX designer was to take ownership of the app’s design from concept to delivery. My responsibilities included: user research, wireframing, prototyping, usability testing, iteration, and the creation of a final high-fidelity prototype.
Research Methods and Findings
I conducted interviews with target users, then distilled what I learned into
actionable steps. I used the insights that
I discovered to identify pain points of the users. I entered my
research with a set of assumptions, but
those assumptions changed as I spoke to real people who deal with the topic
directly.
The most important pain points I uncovered are as follow:
- The scheduling pick up option was not interactive.
- The track progress option was not engaging.
- Users struggled to identify the items they want, and have difficulty ordering food.
- Users wanted the option to order based on dietary needs and restrictions.
- Most users wanted to see details of ingredients and nutrition information, along with allergic information.
The information I uncovered helped me realize that I needed to do more to make ordering easy and engaging for busy users. Once I realized this, I had a clearer idea of how to move forward.
Design Thinking Process
On my journey to design the FOOD TRUCK mobile application, I followed the design thinking process which focuses on the user and designing a solution that is user-centered in each phase. While designing, I tried to involve the users throughout the design process through conducting user research, usability testing, and other design techniques to create a highly usable and accessible product for the users.
Empathize
To begin the project, I wanted to understand the market and the users I was trying to find solution for. So I spent some time doing some secondary research on the market by conducting a competitive analysis. This step enabled me to capture the solutions that already existed in the market related to my problem. That also allowed me to understand what is currently available and what those flows look like.
In the second phase of my research, I conducted interviews with a small sampling size of users to better understand their needs and try mitigating my solutions towards solving them. Based on my research, I developed a provisional persona. The profile represents FOOD TRUCK’s customer base and helped me to begin thinking about the customer needs, goals, and assumptions to test.
Based on the persona, I created two storyboards to better help myself visualize the solutions I was intended to go for. One to represent the big-picture of the persona's use case scenerio, and another to show the close-up of the persona ordering food from the app. The user story I created are shown below:
Define
Utilizing the data I gathered from my user interviews and research, I was able to humanize the target user and define the exact problem. These processes later assisted me in identifying their needs, motivations, and frustrations.
Ideate
The insights I gathered from the interviews came a long way to help in the ideation stage and then feature generation as well to address the users’ needs. Understanding the user behaviors, needs, and motivation of the target users through interviews became a valuable source of data for the project in the early stages. An affinity map was assembled based on the notes from the studies. The feedbacks were then synthesized to form an affinity diagram of themes and opportunities. 5 key features were Ideated based on the affinity diagram and prioritized with the feature prioritization diagram. The process flow looks like the following:
Prototype
Based on the insights, findings, and several rounds of ideation from the research I conducted earlier on how to structure and design a more user-centered and improve the user flows, I was able to narrow it down and created some more refined wireframes of the application.
Sketching the app ideas gathered at the stage of brainstorming helped me to translate the required features into more understandable solutions. I moved ahead step-wise from sketches to wireframes to describe the flow of the app and the logical structure of the elements that defined the features of the application. Each case was rapidly prototyped into low-fidelity paper wireframes so I could understand the flows and ultimately define the information architecture of the product.
To be able to know if the solutions I arrived at after my brainstorming session really meet the needs of the target users, I moved my ideas to Figma to design some mid-fidelity digital prototypes that I could test with users and be able to obtain their feedback and improve on them as soon as possible.
Testing
For me to be able to validate the product ideas and know if my ideas really solve the problems of the users I identified earlier in the user research stage I conducted an unmoderated usability test. Watching users try to accomplish tasks on early prototypes was the most effective and efficient way to uncover usability problems.
Initial Designs
Usability study methods and results
- Study type: Unmoderated usability study
- Location: united states, remote (each participant went through the usability study in their own home)
- Participants: five participants, each completing the study individually
-
Length: each session was 5-10 minutes, based on a list of
prompts
- Note taking observations: Users had difficulty ordering items for specific diets (such as gluten-free), and users had difficulty understanding the ingredients in each type of item.
Based on the observation, I created the following affinity diagram
The following research insights were then derived
Here is an example of how the low-fidelity design changed with iteration over time with participants’ feedback
Accessibility considerations
For the food truck app, the images and action buttons are used in high contrast to allow the users to take action easily. The images use alternative text to allow a screen reader to read the content.
What I Learned
While designing the food truck app, I learned that the first ideas for the app are only the beginning of the process. Usability tests and peer feedback influence each iteration of the app. As time goes on and users continue to give feedback, future improvements will surface and become clearer, and the product will continue to get better. Moving forward, I would like to conduct another round of usability testing to validate whether the pain points my users experienced have been fully resolved. This would validate that all of the updates I made fully met the goals of the project.