top of page

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:

  1. How do I speed up the item selection process?

  2. How do I make users comfortable with the time it takes to wait for an order?

  3. 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.

Research
iyus-sugiharto-Eh1xd5xDE-s-unsplash.jpg

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

Research.JPG

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.

Mom.png

Age: 42

Education: Master's Degree

Occupation: Physician

 

"If I could be in three places at once, I would"

Laura is a middle-aged mother of three who is constantly on-the-go. Most days she drops her kids off at school, and immediately after she will order breakfast to pick up at Bean City on her way to work. She has little time to waste on this journey, so she wants to make the ordering process as quick as possible.

Laura Williamson

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.

Laura Williamson User Journey Map

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.

Ideate
Competitive Audit Business

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.

Face Scan Image

Time: shortens the log-in or item selection ordering process

Payment: an option to verify card payment

Chat Bubble

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

Timer Image

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

Meter Image

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

List

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

Heart

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

Drawings

Prototype

Next, I began drawing paper wireframes and turning them into digital designs

Low-Fidelity Prototype

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

Early Wireflow

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.

FaceScan.png

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

High-Fidelity Testing
ChatBeforeAfter.png
CustomizationBeforeAfter.png
PaymentBeforeAfter.png

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.

PastOrders.gif
Customize.Gif

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.

OrderTracker.gif
Intuitive.gif

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.

Final Design Solutions

Style Guide

StyleGuide1_edited.jpg
ScreenMocksFinal.png

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.

bottom of page