Project Overview

Background

Founded in Q4 2019, POR’s goal is to lower the barrier of entry into third-wave coffee. While the coffee industry is continuing to grow with more and more coffee shops popping up, there remains an informational barrier that stands between newcomers and specialty coffee. POR is seeking to lower if not break down that barrier.

Challenge

As a newcomer to the industry, POR hired me to build and design an app that helps coffee beginners get into coffee by providing necessary information to get them started. In addition, they want to take full advantage of the mobile interface to create something that is delightful to use.

Solutions

  • “Step-by-Step Guide” Feature that allows users to brew along with the instructions
  • “Dictionary” Feature that provides users with definitions of common terms used in the industry

Tools used

Affinity Publisher, Figma, Discord, OBS

Project role

UX Designer (Research, Visual Design, Interaction Design, User Testing)

View Prototype

Empathize

Secondary Research

Research Goals:

  • Identify the user.
  • Identify the user’s goals, needs, frustrations, and motivations when making coffee
  • Discover how users go about making coffee
  • Discover major trends in the coffee industry
  • Find out competitor’s strengths and weaknesses
  • Empathize with the users in order to best serve the users.

Research Assumptions:

  • Demographic is of all ages and genders of those who drink coffee, however millennials and gen z are the ones that have the most interest in third-wave coffee
  • Users are introduced to coffee making through friends
  • Users tend to search YouTube for tutorials as their main method in gathering information
  • Beginners are more focused on the tools rather than the beans when first starting

Research Questions

  • What are key things required for making coffee?
  • What are the most prevalent methods for making coffee?
  • How can an application simplify the process of making coffee?
  • Who are the main competitors? (What are their strengths? Their weaknesses?)

Research Methodologies

Secondary Research:

  • Market Research: Look at existing research on Coffee and the Coffee Industry in order to gather data on the demographic as well as upcoming trends within the space.
  • Competitive Analysis: Identifying key competitors in the space and to learn about their strengths and weaknesses.

Primary Research:

  • User Interviews: Talking with potential users and learning about their specific habits as well as uncovering potential needs or frustrations with regards to coffee and the making of coffee.

Competitive Analysis

In the competitive analysis portion, I discovered five applications that all provided, in their own way, information or features that helped newcomers to specialty coffee.

Provisional Personas

Based off of the market research, I found that, while those aged 30 and up tended to be the majority of the population that consumed coffee, those under 30 were the dominant majority when it came to interest in third-wave coffee in both areas; coffee shops and home-brewed.

Primary Research

User Interviews

One of the key methods of research for this project was the user interviews. Early on, I ran into a problem in that my scope for the users was too wide. This led to the interviews involving participants outside of the intended selection. To remedy that, I ended updating the questions as well as included a few screener questions in order to select participants that more accurately fit the provisional personas created.

Empathy Map

After conducting the user interviews, I created an empathy map using the transcripts from the recorded interviews. From that process, I uncovered four distinct patterns that majority of participants

Insights

  • Users don’t know where to begin when making coffee
  • Users know what kind of coffee they like, but are disappointed with what they get
  • Users enjoy time spent with others over a cup of coffee
  • Users want the process to be fast

Needs

  • Users need to have basic information provided
  • Users need to learn what affects the taste of coffee
  • Users need to understand coffee ratio for brewing
  • Users need a way to jump immediately into brewing coffee

Persona

Using information retrieved from the empathy map and the market research conducted, I was able to create a persona that roughly represents the overall goals, needs, frustrations and motivations of POR’s customers. This provides a reference for future design choices and lends itself to creating the overall project goals.

Define

POV Statements & HMW Questions

In order to better flesh out the problems that I’m looking to solve, I used this POV & HMW chart.

Brainstorming

After creating the “How Might We” questions, I began brainstorming different ideas and solutions for each question. In order to do that, I set a timer for 4 minutes for each question, and created mind maps during that time.

  • 4 HMW Questions
  • 4 minutes/question

Potential Solutions:

  • Provide information on necessary equipment (to provide Jack with basic information for brewing coffee)
  • Provide information based off of feedback on taste of coffee to help with adjustment of grind size (to help Jack learn what affects the taste of coffee)
  • Create a section wholely for the  sake of listing info on coffee ratios (to help Jack understand coffee ratios for brewing)
  • Provide step-by-step guides for popular brewing devices (to help jack jump immediately into brewing coffee)

Project Goals

Referencing the Persona along with the Project Brief, I created a venn diagram of the combination of the User Goals, and the Business Goals which were outlined in the brief.

Ideate

Feature Roadmap

The Feature Roadmap is great in laying out a path forward. Using the research data as well as the Project Goals, we are able to better flesh out our priorities when it comes to features presented.

Application Map

With the feature roadmap created, the next step was to create an application map. One of the major things I focused on was prioritizing the step-by-step feature, thereby trying to reduce the number of actions it would take to get to that feature.

Task Flow

Referencing the UI Requirements document, I created the task flow for each task outlined. By laying out each action and screen involved with each task, I was able to get a better understanding of the necessary screens that would need to be created when designing the wireframes.

User Flow

Following the Task Flows, I expanded the flow by adding in decision points, and the user flow not only helps showcase potential points where a user may abandon the task, but also provides information on the ease of the flow when performing said tasks.

Sketches

Based off of my UI requirements along with the Task Flow, I drew up some sketches to represent each screen that would be crucial for the completion of the tasks listed

Mid Fidelity Wireframes

With the low-fidelity sketches in hand, I created the mid-fidelity variants with the intention for testing.

Prototyping

Mobile Prototype

With the mid-fidelity wireframes in hand, I created a prototype within Figma using the tasks as a guide to direct the prototyping path. This portion of the project was especially important. As a new application, it was important to get feedback on not only problems with the design, but also general design changes.

Testing Goals:

  • Test the Information Architecture to see if placement of information makes sense to the users.
  • Test the usability of the app.
  • See if application is providing necessary information for target users.

Testing Methodology:

Moderated Think-Aloud Method: I will conduct this method over Zoom or the appropriate Voice Call Software by asking participants to verbalize their thoughts and actions all while completing the specified tasks through their screen-share. All sessions, both video and audio, will be recorded via OBS with consent.

Testing Procedure:

  • Scenario #1: Your friend gifted you a Chemex for your birthday however you have never used one or anything like it before so you’re a bit lost.
  • Task #1: In order to get started with the Chemex, you first need to know what tools you need. Find out what tools are necessary for you to begin brewing.
  • Scenario #2: So you’ve checked out the necessary tools. Everything for the most part makes sense, but there is one thing you’re unfamiliar with.
  • Task #2: Look up the definition of “gooseneck kettle” so that you know what you need to buy.
  • Scenario #3: After a week of waiting for your purchases to arrive, you’ve finally assembled all the necessary parts for brewing a Chemex. However, despite having all the necessary equipment, you still aren’t completely sure on how to brew a cup of coffee with the Chemex.
  • Task #3: Figure out how to brew using the Chemex and brew 30 grams of coffee for you and a friend.

View Prototype

Testing

Test Results

After conducting the user tests, I took the recordings and transcribed both the participant’s words and actions in order to make sense of the information. From those transcriptions, I was able to discover three patterns, two of which led to users committing errors during the test.

  • Participants had a hard time finding the “what you need” menu because they all assumed that it was a settings icon.
  • Participants didn’t realize that the brewing adjustment vector was interactive.
  • Participants tried tapping on the gooseneck kettle text in the “what you need” screen when asked to look up the definition of gooseneck kettle.

These insights led themselves to potential solutions that led to the final revisions for our prototype.

These are the potential solutions that I ended up suggesting, in accordance with the feedback received from the usability test participants. Here,  they are arranged in order of priority, based off of impact and cost:

  • Priority #1: Make the tools section much more obvious by providing a button rather than the tools icon for an overlay with that information.
  • Priority #2: Implement a slider for adjusting the amount of coffee with a visual.
  • Priority #3: Add an overlay with the definition when the text is pressed.

Priority Revisions

Based off of the priority revisions, I updated the mid-fidelity prototypes to reflect the changes that will hopefully increase the usability of the application.

Branding

With the revisions finished, I moved onto creating the branding for POR. This will help set the tone and the design for the high-fidelity wireframes later on.

Mood Board

Brand Words: Warm, Elegant, Craft, Minimal

Mood Board

Style Tile

UI Kit

High-Fidelity Wireframes

Desktop

Tablet

Mobile

Reflections & Next Steps

Reflections

This project was definitely challenging especially in the early steps of the project. Compared to the other projects I’ve worked on, this one required the most research, especially when it came to discovering the proper potential user base. This was where I did end up getting stuck on, and because of the nuance of it, I had to revise my interview questions as well as add on screener questions to be more selective in the interviewing process.

Next Steps

  • After conducting the tests, and creating the High Fidelity Prototype, this project will be ready for handoff to developers, following the feature roadmap in terms of order of development.

Reflections & Next Steps

Reflections

This project was definitely challenging especially in the early steps of the project. Compared to the other projects I’ve worked on, this one required the most research, especially when it came to discovering the proper potential user base. This was where I did end up getting stuck on, and because of the nuance of it, I had to revise my interview questions as well as add on screener questions to be more selective in the interviewing process.

Next Steps

  • After conducting the tests, and creating the High Fidelity Prototype, this project will be ready for handoff to developers, following the feature roadmap in terms of order of development.