Google UX Design Certificate - Coffee Shop App

Roles

UX Research, Wireframe, Prototype, Usability Testing

Duration

1 month - Jun 2022 - Jun 2022

Overview

My first project as a part of the Google UX Design certificate program was designing an app for a local coffee shop that allows users to place their orders in advance.

Goals

The goal of the project was to build out an app that allows users to pull out their phone and send an order to their local specialty coffee shop

User Research

Our user research utilized a survey to determine the general demographic of the customers of the cafe. Questions such as gender, age, occupation, how often they drank coffee, and if they were any improvements to the current process were asked

User Pain Points

Our research resulted in the uncovering following pain points

  1. It can be exhausting for some users to have to wait in line, especially when the cafe is so busy - having the option of mobile order would remedy this 

  2. Because it’s a small cafe, supplies can run out unexpectedly so it would be nice to know which items are out of stock - with this we’ll focus on giving as much information to the user as possible

  3. Having to order, pay, then wait around for the order to be made can take a long time - the app can remedy this by helping to streamline the option

Personas

From the results of these surveys and common pain points, I was able to develop a couple of personas that represented the user base

Wireframes

Results from Usability Studies

I conducted two rounds of usability studies - findings from the first round helped to guide design from wireframes to the mockup stage, while the second study used high-fidelity prototypes to further refine the designs

Round 1 Findings

  1. Users had issues adding customizations to the item

  2. Users had issues with the previous order button on the home screen

  3. Users may need more cues during the checkout process

Round 2 Findings

  1. Users wanted a way to add multiple of the same item to their order

  2. Users found it not visually obvious when something was added to their cart

  3. Users found the wording of the order cancellation process confusing

High Fidelity Mockups

My goal when moving to high fidelity mockups was both to bring all the elements in the wireframes to a consistent design language, and to convey information without making it overbearing for the end user. One idea I had for this, is to show vaccination status through colours and icons.

Finalized designs for the mobile app

Conclusion

From gaining exposure and developing my skills in Figma to learning more about where research fits into the design process, overall, this was a very good learning experience for me. With regards to my designs, if I were to come back to this project in the future I would look into performing the following:

  1. Conduct another set of usability studies to further refine the project and see if pain points were resolved 

  2. Conduct more user research to see if any new features are needed