Coffee Truck Mobile Ordering App
May-June 2023 - 1st of 3 projects in Google UX Design Certificate
1-Person Team - Just me
My Role: UX Designer working through each step of the design process
For my first User Experience Design project as a part of the Google UX Design Certificate, I developed a high-fidelity prototype for a mobile ordering app.
This is how I did it.
The Product
A mobile ordering app for Coffee Truck to help patrons place orders ahead of time so they can skip in-person lines and experience a streamlined payment process. Patrons grabbing coffee on their way to another destination are the target users.
Though this is product is relevant for the city I live in–Austin, TX–this project focuses on my learning of the UX design process and the hard skills required to be a UX designer.
Design Process
This is the design process I followed and referred back to throughout this case study.
Empathize
First, I started by understanding what general user experience was like with mobile ordering apps that other local coffee trucks use through a competitive audit. I analyzed 4 different competitors, including both direct and indirect competitors.
Next, I identified features from direct competitor apps, which gave me additional understanding of what a user might typically experience when ordering ahead. This contributed to the questions I selected for user interviews.
Finally, I interviewed 4 individuals on what problems they face when they order at a food truck.
My script included questions that began with who, what, when, where, why, and how, such as "What factors determine when you order ahead?," "How do you feel when you have to wait for your order?," "When and where do you decide to order ahead?," and "What challenges do you face when trying to order ahead?"
Each interview lasted 10-15 minutes in length. Clear trends began to emerge when I gathered the data into an affinity map and synthesized the themes. Three distinct pain points emerged:
Define
As I moved into the second phase of the design process, the data I collected from the research was critical for crafting an effective user persona embodying key archetypes in my target user group.
By creating a persona, it’s much easier to imagine the type of person I am designing for. Meet Amelia. Here, you can see her background, core needs, and pain points that she would like to see addressed.
I dove a bit deeper into Amelia’s persona by creating a user journey map to draw out what a typical ordering experience at a food truck might be for Amelia. What goes through her mind? What unconscious thought does she have? I identified obstacles Amelia might come across that my mobile ordering app could address.
Many of my design decisions were made with Amelia and her user journey in mind.
Ideate
To begin the third phase of the design process, I utilized brainstorming techniques such as Crazy Eights and How Might We exercises to generate a broad set of ideas. Putting pen to paper in brainstorming and sketching, especially with speed to generate quantity, was life-giving for me.
Based on our research, I hypothesized that short, simple user flows would be key in increasing conversion rates around ordering ahead. I decided to test the idea of having multiple entry points into ordering, such as from the full menu or from a reorder button, in order to give users choice of preference.
With this in mind, I began some early sketches of paper wireframes. I found that multiple iterations were helpful in improving ideas and locating elements from different iterations that were useful before producing digital wireframes.
With the problem and solution set, as well as awareness of the user's needs and potential flow, coming up with a low-commitment first design felt rewarding.
Prototype
In transitioning to the fourth phase of the design process, I took my paper wireframes and used Figma to turn them into low-fidelity digital wireframes that were then turned into a low-fidelity prototype with the ability to go through the two user flows illustrated earlier. There was a little bit of a learning curve for me with Figma, but my experience creating presentations, documents, and instructional materials in Canva, Procreate, and Google Drive set me up well.
The low-fidelity wireframes and prototype I created mirror the idea of having multiple entry points into ordering, such as from the full menu or from a reorder button, in order to give users choice of preference.
The 1st iteration of a low-fidelity prototype I produced is linked here.
As depicted below, the first journey allows you to go from the homepage through the full menu to ordering an item and completing your order.
A second journey included allows you to go through the "Previous Orders" button on the homepage to reorder a previous order.
Test
After this, I began the last phase of the design process by conducting a moderated usability study involving 5 participants to answer research questions such as, "What can we learn from the steps users take to order ahead?" and "Are there any parts of the ordering process where users are getting stuck?"
Based on the feedback received, I prioritized and incorporated key insights while updating the prototype to mid-fidelity. After conducting a second round of the usability study, I moved on to completing a high-fidelity prototype.
Key insights from the two rounds of the usability study proved that my earlier hypothesis was actually wrong. Users indeed preferred short, simple user flows, but multiple entry points made them feel like they had to make extra decisions. Therefore, I designed ways to simplify the user flow while also reducing the amount of choices a user had to make in their journey to completing their order.
The 1st iteration of a low-fidelity prototype I produced is linked here.
As depicted below, the first journey allows you to go from the homepage through the full menu to ordering an item and completing your order.
A second journey included allows you to go through the "Previous Orders" button on the homepage to reorder a previous order.
The final high-fidelity prototype I produced is linked here.
Key updated aspects include a simpler, smoother ordering process, clear user cues via color and typography, and a review page to avoid deceptive patterns.
Next Step
A key next step would include further accessibility considerations. Accessibility was considered throughout this process, resulting in key design decisions such as:
Hierarchy: Using different font weights helps draws user attention and helps distinguish where the important information is. Using larger, bolder font for the important information also increases readability.
Large touch targets: Everyone benefits from larger touch targets, in particular users with motor and/or vision impairments to help increase accuracy for the user. The buttons in this design are large with negative space around them to draw attention as well as to increase likelihood of being hit accurately and consistently.
Color contrast: According to a study done by the World Health Organization, 2.2 billion people around the world have a near or distance vision impairment. Therefore, it was critical to ensure the design has sufficient color contrast for readability. This is found in CTA elements as well as in body text, such as reading descriptions and pricing on the menu.
Universally recognized symbols: Color is a good visual cue, but user feedback showed that better cues were needed. An additional variable incorporated into the design was the use of universally recognized symbols alongside color in important places, such as the cart icon for the checkout process and a garbage icon for "Remove".
Instructions on text inputs: Screen reader technologies usually skip over non-label text such as placeholder text in input fields. In consideration of those who prefer to use screen readers to navigate through a form, this design utilizes instructions outside of the field to provide essential cues.
Though these were considered and included in the designs, I wonder what other aspects may have been left out. A design critique session or another usability study specifically around accessibility could be useful.
Lessons Learned
This was an eventful experience. As a novice designer, I felt incapable of accomplishing a task like creating a whole mobile ordering app from scratch. True, this is a theoretical project, but through this case study, I gained confidence and faith that I would become a great designer.
I enjoy going to coffee trucks and ordering ahead online, so it was interesting and informative getting to see similarities and differences between the design of different local spots.