header image mockup.png

SAVOR

A coffee cupping app.

VIEW PROTOTYPE →


Role

User Research
UX/UI Design
Visual Design
Prototyping
User Testing

Deliverables

Competitive Analysis
User Survey
User Stories
User Flows
Personas
Lo-Fi Wireframes
Clickable Prototypes
Brand Identity
Hi-Fi Wireframes
A/B Testing
Usability Testing

Tools

Figma
Google Forms
Adobe Photoshop


 

Overview

The project was to create a mobile coffee cupping application. Coffee cupping is used by producers and buyers around the world to check for quality. Coffee is scored using an SCAA Cupping Sheet, which measures aspects like acidity, cleanliness, sweetness, mouthfeel, and aftertaste.

Scope:

  • An app for logging cupping information on an SCAA-like cupping form 

  • Ability to log many coffees at once

  • Notes section

  • Give total score at the end for review

Constraints

  • Time: 3 week Design Sprint

  • Budget: There was no budget for the project, which meant I had to be resourceful throughout the entire project, from the survey to recruiting users for testing.

Problem

The roasters, baristas, green coffee buyers, and importers have had to rely on printing out SCAA Cupping Sheets in order to log and track their information. Paper sheets can be wasteful and almost no one saves them or keeps them organized for looking back at later. The coffee industry lacks some software such as a cupping app which would enable people to log information without the need for printed sheets.

Solution

The solution is an application that provides a variety of users the opportunity to log their cupping information within an app instead of the need to print out paper. The application allows users to quickly set up a cupping and log their information as they go. The hope is that SAVOR will meet a need that was not being filled and allow for people all over to begin using their phone for cupping and saving information easily. In the future, I hope SAVOR will allow people interested in cupping to learn how to do it and how to log the cupping sheet so they can begin understanding that process if it something they are interested in - allowing for accessibility to everyone.

 
cuppingsessionmockup.png
 
 
 

Log Cupping Information and Notes

Easily log your information using the sliders and add tasting or other notes at the bottom to reflect on later.

 
 
 
 

Easily Add Multiple Coffees

The app allows for users to enter multiple coffees to each session fo allow for cuppings big or small.

 
 
 
cuppingapp-cupping sheet mockup.png
 

Process


 

01 Research

Competitive Analysis
Survey
Interviews
Personas

02 Design

Sketching
Wireframes
User Feedback
Hi-fi Design
Interactive Design

03 Evaluate

Usability Testing
A/B Testing
Design Iteration
Presentation

 

Research

Competitive Analysis 

I began the project by looking at what other coffee cupping apps exist in order to understand what was currently available. As a green coffee buyer and roaster, I knew that the options were scarce and that Cropster was one of the only ones that provide an app for cupping. I use Cropster on a weekly basis for green coffee inventory and roasting and they are one of the primary tech companies developing products for the coffee industry, however, I know from experience that the cupping app falls short in multiple ways. In addition to Cropster, I found one called Angels' Cup, which is a cupping platform geared toward beginners and is very simple to use.

logocompetitiveanalysis.png

I found that: 

  • Cupping apps lack customization

  • Expensive

  • Too simple - does not offer an SCAA cupping sheet (Angels' Cup)

  • Cannot cup coffees unless they are loaded into your Cropster account or already in the Angels' Cup database

Because of these aspects, I decided that I was going to ensure that the app I created met the needs of roasters, green coffee buyers, baristas, and beginners by sending out a survey to understand what they thought was important and then interviewing people I knew within the industry in order to better understand what the needs were for different users. 

Survey

I created a survey through Google Forms and deployed the survey to friends of mine who work within the coffee industry in order to gain insight into user behaviors and needs within a cupping app.

The survey allowed me to make some important decisions on what needed to be included within the MVP.

Screen Shot 2020-11-06 at 9.23.07 PM.png

After conducting the survey, I gathered and analyzed the data to summarize the findings.

 
SAVOR - Cupping App Presentation.png
SAVOR - Cupping App Presentation (1).png
SAVOR - Cupping App Presentation (2).png
 

Key Findings: 

  • 46% said they cup coffee for work

  • 26% said they cup for fun

  • 100% of users would like an easy/familiar way to log cupping information, such as an SCAA Cupping sheet

  • 93% said that they would like to be able to share the cupping information with others and/or allow others to join a session

  • 80% said that they would like to be able to save their sessions

Interviews

Following the survey, I really wanted to understand some of their problems and hear in their own words what they thought would be beneficial in a cupping app. It always helps me to sit down with people and hear them talk about their experiences and ideas, it lets me dive deeper into topics I wouldn't have thought about otherwise and really helps me understand some of the pain points at a deeper level. 

During the interviews I learned that users would like to see these features the most: 

  • Easy way to set up a session

  • Easy cupping sheet for logging the information

  • A place for writing additional notes

  • The app will calculate the score and present it to you on the summary page

  • Ability to have many coffees in one session

  • Ability to have multiple people on the same session - group cupping

Personas

After I had conducted all of the research, I created a persona that gave me a deeper understanding of who the primary user/customer would be. Creating a persona has proved to be a vital step in my design process and allowed me to design with empathy.

Persona.png

User Journey

Following the persona, I began thinking about the user stories and user journey. Based on the research I knew that the app needed to be accessible and easy to use for everyone. I knew that I wanted the app to be approachable for beginners and meet the needs of professionals. In the journey below you’ll see what it would look like for Jared who cups coffees on a daily basis to discover and begin using the app.

Journey Map.png
 

Design

I was able to wrap up with the research portion and take everything I had learned about the user to begin designing the product. But before diving into the screen design I wanted to figure out how the user would flow through the app, so I created a user flow to guide me through the design.

User Flow

 
 

Sketching

After all of the research and creating a user flow, I began sketching out ideas on paper to start generating ideas. I find sketching to be such a great way to start getting ideas on paper and quickly draw things out and change them if I need to. This step also allowed me to quickly share ideas with my client.

 
IMG_0061+2.jpg
IMG_0064.JPG
IMG_0062.JPG
IMG_0063.JPG
 

Wireframes

After sketching and somewhat nailing down my design idea, I transferred it all into a wireframe using Figma.

 
wireframes-portfolio.png
 

Designing the Cupping Sheet

Example of an SCAA Cupping Sheet -

Screen Shot 2020-10-22 at 2.44.38 PM.png

After analyzing the cupping sheet above I created the first variation of the cupping sheet for the app.

V1 Cupping Sheet.png

After designing the first iteration of the cupping sheet, I was not entirely content with the look and decided to craft a second version utilizing a grid to see if I could create a more balanced cupping sheet. During usability testing, I conducted an A/B test on these two sheets to see which people preferred.

Cupping Sheet-SAVOR.png
 

Prototype - Version #1

I built this version specifically for testing, it was a low-fidelity prototype to test the concept and idea with users. I wanted to confirm that the idea was worth pursuing further.

prototype-portfolio.png
 

Evaluate

Usability Testing

I conducted user testing with three users.

The goal was: 

  • Get feedback from users about the app

  • Find out if there were any major usability issues

  • Measure success with setting up a cupping, adding a coffee, and filling out the cupping sheet

Key Findings:

  • Some of the smaller icons needed additional padding for the button

  • The participants liked the look and feel of the app

  • The participants loved the cupping sheet in general and liked how easy and intuitive it was to fill out 

A/B Testing

Cupping Sheet Version #1 vs. Cupping Sheet Version #2

A:B Test_cuppingsheet.png

Sidebar Menu vs. Drop-down Menu

A:B Test_nav.png

Results:

  • The users liked the second cupping sheet better than the first variation 

  • Users liked the drop-down menu as opposed to the sidebar - they liked the cupping sheet centered instead of a little to the right which allowed for the cup sidebar button

Branding

After fleshing out the wireframes it was time to pick a name, colors, and type for the application.  

I decided to name the application SAVOR because it’s a coffee cupping application and you are savoring and tasting different coffees.

Next, I chose colors and after doing some research on color theory with the idea of my application in mind I came up with the following colors.

I chose fonts that were web-safe and easy to read in order to allow for accessibility and readability.

Accessibility

I wanted to ensure that the application was accessible to everyone, even those with visual impairments, and to ensure this I checked the contrast of colors against each other to ensure they meet AA Normal across the board.

Screen Shot 2020-10-18 at 12.07.51 PM.png
Screen Shot 2020-10-18 at 12.07.05 PM.png

High-Fidelity Prototype 

Following the branding, I began creating a high-fidelity prototype that I could use to prepare for development.

Outcomes and Results

The result is an application that provides a variety of users the opportunity to log their cupping information within an app instead of the need to print out paper. The application allows users to quickly set up a cupping and log their information as they go. The hope is that SAVOR will meet a need that was not being filled and allow for people all over to begin using their phone for cupping and saving information easily. In the future, I hope SAVOR will allow people interested in cupping to learn how to do it and how to log the cupping sheet so they can begin understanding that process if it something they are interested in - allowing for accessibility to everyone.

Recommendations for SAVOR 2.0

  • In the next sprint, I want to create a login/sign up so that users can log in/sign up to save their cupping sheets for future reference. 

  • Create a tutorial for the Learn section on how to cup coffees so that beginners could learn how to cup and score coffees

  • Possible features - stopwatch for time, different cupping forms for production roast evaluation, add sharing capability, filter the summary section when in groups (either by coffee/person or both)

Lessons

  • Over the course of this three-week sprint, I learned how effective sketching is for conveying ideas to a client

  • I learned what working with a client is like and loved getting to work with my client on an app that will not only benefit them but something that I care deeply about

  • Iteration is important and the first design is not always the best

  • A/B testing is really helpful when you have multiple ideas

 
Previous
Previous

Needlepoint Junction

Next
Next

Commuter