Project Overview
Bean City is a mobile app allowing users to quickly and efficiently order specialty drinks and light-food items from a cafe. This is a mock design, created for educational purposes in the Google UX Design Certificate Program.
For this project, I used the design thinking UX design framework method. I chose this method because it is an affordable way to conduct UX research; this project was conducted on a virtually-zero dollar budget.
Problem
Users need a quick and efficient way to order cafe drinks and food because busy working professionals have little time to waste, and humans desire immediacy.
Challenges to consider:
-
How do I speed up the item selection process?
-
How do I make users comfortable with the time it takes to wait for an order?
-
How do I make the ordering process more intuitive?
Empathize
To begin my process of empathizing with users, I conducted virtual interviews with a diverse set of participants. Participants were asked a series of five questions.
Each question was carefully crafted to achieve my interview goal, which was to find out what design choices were intuitive for food ordering apps.
Chasing intuitive design, I believed, would allow for the ordering process to go fast, as well as make users more comfortable for the waiting process.
Participant Questions
-
What are some frustrating experiences you have had with food/drink mobile ordering apps?
-
What are some ways you think you could resolve those issues?
-
What are typical actions you would expect to complete on a food/drink mobile ordering app?
-
What determines a successful experience when ordering food or drink from a mobile ordering app?
-
What are some of the primary reasons you order food/drink from a mobile ordering app?
Participant Answers
"I want to find all items quickly, especially the last order. Anything to save time is important."
Participant 3
Clear pictures help me scan the menu faster and find what I want
Customization options should be simple and not buried in the app
I want to know how busy the restaurant is. It affects wait time and varies day-by-day
Affinity Diagram
To consolidate my research, I took user responses and observations and organized them into an affinity diagram
Findings
Observations from interviewed participants were centered upon improving four categories: time, communication, organization, and payment flow.
User Personas
My next step to finding out a problem statement in this project was to create a series of user personas.
With these, I wanted to attach some of the abstract goals and frustrations users displayed in research to storylines with a pulse.
User Journey Map
My challenges for this UX project are not limited to a centralized part of the ordering process. Instead, the challenges listed earlier in the study span from the beginning of the ordering process to the very end.
Therefore, I found conducting a user journey map to be incredibly rewarding and gave me a better of view of how my users could interact with my future app design.
An Important Realization
At this point in the design process, I started to become obsessed with ways I could better design the pre-ordering process. I felt like I started to lose focus on my third challenge for this design, which was 'how do I make users more comfortable with the time it takes to wait for an order.'
As shown above, 4 out of the 5 steps in the user journey took place after the customer actually confirms their order. Even though there won't be a bunch of screens/actions for users to click through once they complete an order, it was crucial to get that part of the design right.
Ideate
With a problem statement in hand, I moved onto the next phase of my process, the ideation stage.
I led off this stage with a competitive audit of some of the apps in the same sector.
With ordering efficiency at the forefront from my problem statement, my goal for this competitive audit was to compare the ordering efficiency for each app or website.
Competitive Audit
Use of Interactive Maps
Using Speech
A few of the companies audited used interactive maps where seen fit.
I found some apps effectively used speech-to-text for accessibility
Menu Filtering
High Quality Photos
Some of the apps used creative ways to filter menu items for easier search
Images really enhanced the ordering process
Strong Branding
Some of these apps and their websites had strong branding through typography and color choices
Brainstorming
After completing a competitive audit report, I felt I was ready to start brainstorming how certain features could be utilized to serve my users in this project.
Below are some of the features I explored in my brainstorming process.
Time: shortens the log-in or item selection ordering process
Payment: an option to verify card payment
In-App User Chat
Communication: gives users a way to talk with Bean City about issues regarding their order
Time: get issues resolved faster than calling or simply showing up to the store and mentioning later
Face Scan Capability
Communication: keeps the user informed of how long their order will take.
Time: helps user better time exactly when they should arrive at Bean City for pickup
Store Busy Meter
Time: allows users to decide if the store is too busy for them to order from
Communication: lets users know what exactly is going on at the cafe when they aren't there
Order Tracker
Time: users can re-order a past order at a click of a button as opposed to individually selecting the items again
Organization: one location for all of the orders a user has made
My Favorites List
Organization: can separate on the menu what users typically get from other general items
Time: allows users to find what they like faster
Past Orders List
Prototype
Next, I began drawing paper wireframes and turning them into digital designs
Early Wireflow
Through this image, it's clear the main user flow to start was as follows:
-
Log in
-
Start Order
-
Select Items
-
View Cart
-
Track Order
A Humbling Experience
My First Usability Study
During the first usability study of my low-fidelity prototype, one of my participants was an engineer. Therefore, he approached the study from a very technical approach.
My original incorporation of the face scan feature required multiple face scans to be held on the same device. The participant informed me that this may be a privacy issue, and it turns out it was.
I was very early in the design process, so luckily this didn't set me back too much. This was an important lesson for me to learn as a UX designer; don't just throw technology in a design for the sake of it being there, but rather make sure it's actually compatible and will work. A UX engineer will thank me for this realization someday.
Test Iterations
This project had two rounds of usability studies. They were moderated usability studies conducted in-person.
Some major changes included:
Chat: users wanted a more interactive chat as opposed to just submitting complaints
Customization: users requested a simple way to quickly customize items as opposed to screen jumping
Payment: users asked for an ability to edit payment options independent of at the end of the ordering process
Solutions
Below are my many design choices in my high-fidelity prototype that address the challenges listed at the beginning of this case study
Challenge #1: Inrease Ordering Speed
Menu Organization
To increase ordering speed on the front end, I decided to include an option to order you most popular order on the front home screen. This immediately takes the user to their cart where they can confirm payment and submit their order.
Other apps have used 'your last order,' but in research I found many of my participants mentioned they order in different groups often, so this made more logical sense.
Challenge #1: Increase Ordering Speed (continued)
Quick, One-Press Customization Options
To increase ordering speed, I designed a consolidated, one-press option to customize menu items. Also, for items that require a more complex makeup, I added a small section to add further comments.
Challenge #2: Create Comfortability in the Waiting Process
Order Tracking
This order tracker allows customers to compare the distance they are away from the shop to the amount of time left on their order.
Two of my three personas contained users who would picking up their order in the middle of a hectic day which makes this feature of tremendous value.
Users can also contact the store through this screen, as well as see what part of the order is complete.
Challenge #3: Make Ordering Process More Intuitive
Menu Organization
On both the home screen and the full menu screen, I put favorite items of the user at the top of the screen.
Through this, items important to the user will always live at the top of the page. Users can also 'favorite and ''unfavorite' items by clicking on the item photo, allowing this list to flow and easily change.
Style Guide
Takeaways
It's nearly impossible to sum up what I've learned in this project, considering it's my first UX design project I've worked on in my young career.
Completing every process by myself in the UX process was quite the learning experience and, honestly, a lot of fun. Some things I want to take into my future projects include:
-
Solve more complex problems. I have a hunger to solve more complex problems moving forward.
-
Include more accessibility considerations. While I did include certain accessibility options in this design (voice search, Google material design icons, testing text readability with accessibility standards) I always want to be in the mindset of adding more accessibility options to my projects.
-
Try different research options. My research in this study was limited to interviews. Due to my past career, I felt the most comfortable with this form of information-gathering. However, in the future, with a larger budget, I'd like to explore other research options.
Thank you for reading! Feel free to contact me through any of the links on this website.