PaoCoffee

Role UX Designer (Individual Project)

Duration May - June 2021 (2 weeks)

Project Background & Goal

PaoCoffee is a fictionalized cafe located in a metropolitan area that strives to offer the best coffee. They offer a wide spectrum of beverages all at a competitive price. PaoCoffee targets customers like commuters and workers who have limited time to get caffeinated in the morning. The goal for this project was to design a mobile app for PaoCoffee that allows users to easily order and pick up coffee. 

Understanding the User

Target Audience

The target audience for PaoCoffee is working adults between the ages of 18 to 60 who live in metropolitan areas. These users are people who purchase a beverage prior to going to work at least once a week.

Persona

I conducted user research and received feedback from users that were incorporated into user personas. For example, this project's user persona, Michael is a new dad and busy working adult who needs a quick and easy way to order his morning coffee because he has no time to make it before work. 

Challenges

Based on the user research conducted, I found 3 main pain points for users: 

  1. Time - Working adults are too busy to spend time making their own coffee

  2. Customization - People want to be able to customize their own orders so that it meets their specific needs

  3. Efficiency - Users want to be able to easily find their desired beverage and/or order from past orders

Time

Customization

Efficiency

Starting the Design

UI Ideation

I sketched out some concepts for our app’s design on what we learned about our users in the empathize stage using storyboards and the Crazy Eights approach. I rapidly brainstormed multiple solutions based on what I learned from our research to identify various ways we could begin designing.

Crazy Eights

Storyboard - Close-up

Storyboard - Big Picture

Paper Wireframes

Taking the time to draft iterations for each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy ordering process to help users save time.

Stars used to mark elements of each sketch that would be used in digital wireframes.

Digital Wireframes

From the paper wireframes, I transitioned into creating digital wireframes. I made sure to also base screen designs on feedback and findings from the user research. I included a past orders section to allow for a quick option and a simple search bar to quickly find a drink. I added large photos of the drinks, their names, and prices that allow for efficiency. 

Low-fidelity Prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was going through the menu and ordering a coffee, so the prototype could be used in a usability study. 

View PaoCoffee's low-fidelity prototype

Research Plan

I needed to see if the main user experience, ordering coffee, was easy for users to complete. I also needed to understand the specific challenges that users might face in the searching, ordering, and check-out processes.

 

Ie conducted remote, unmoderated usability studies. I had 5 participants and each session lasted for 30-60 minutes, including the test and interview questions. Participants are people who order out at least once a week and are between 18 to 70 years old. I included a balanced number of male, female, and nonbinary participants. I presented participants with a series of tasks that had them interact with the core tasks in the app, then had them complete the System Usability Scale (SUS).

Usability Study Findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 Findings

  • Users want to order coffee quickly

  • Users want easier customization

  • Users want to distinguish between hot and cold drinks

Round 2 Findings

  • Users want to know the wait time

  • Users want coffee to be filtered by type

Refining the Design

Mockups

Early designs allowed for customization, but users were frustrated because there were no clear specifications for their customizations. The design was revised so that users can see all the customization options and their prices.

Before usability study

After usability study

The second usability study revealed that users wanted to be able to check the wait times prior to ordering. The design was revised so that users are able to easily see a dine-in and pick-up wait time from the home screen.

Before usability study

After usability study

High-Fidelity Prototype

The final high-fidelity prototype presented cleaner user flows for ordering a coffee and checkout. It also met user needs for easier customization. Each page of the design reflected the changes we made as a result of usability testing and worked exactly as the real app would.

View PaoCoffee's high-fidelity prototype

Accessibility Considerations

To ensure that our app was accessible, we included users of assistive technologies such as keyboards and screen readers throughout all stages of the design cycle, including interviews and usability testing. We took their needs and their feedback and incorporated what we learned into our designs in order to provide an inclusive and accessible experience for all.

At this point in the design cycle, I began to add colors, images, and icons to our designs. I updated the shape, size, and structure of content borders and sections to high-fidelity versions. I also revised certain areas of design based on insights identified from usability test feedback.

Takeaways

What I Learned

While designing the PaoCoffee app, I learned that the first ideas of the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.