RoastPATH - Schedule Builder

UX / UI Design Project Case Study

RESEARCH

Proto Persona

We created an archetype to help us better understand the type of user who we hope will use our product. One tricky thing about designing technology for coffee roasters is that roasting has always been a very analog process that relies a lot on sensory cues and skilled techniques to really master. It was key that our design be very intuitive as it was going to be for people who don’t typically use a lot of technology.

Research Question

It was important for us to distill what we were trying to figure out into a single question to really focus our research. For this, we came up with:

How do coffee roasters plan their individual roasts and their daily/monthly roasting schedules?

Research Objectives:

1. I'm looking to understand how users plan for a roast and how they use notes from other roasts to inform their process.

2. I'm looking to understand how users plan out their day and organize their work so they can move smoothly from one task to another.

3. I want to figure out how roasters handle their workload in a month and what pain points they encounter.

Interview Question Examples:

“ How do you plan out your roasts for the day?”

“How far in advance do you plan your days out?”

“Have you ever made changes to your planning process?”

Research Findings

We found that many roasters write out their schedules using handwritten notes to track orders. Larger roasteries that have multiple people roasting simultaneously will write out the schedules on whiteboards. We also found that most roasters will roast in full batches and add any extra coffee to their stock.

Competition Analysis

It was important to analyze RoastPATH’s main competitor was handling this feature. That competitor is called Cropster. To really understand how they organize the roasting process, I did a thorough analysis of their planning process by watching a YouTube tutorial and documented it with a modified version of a user flow. I included screenshots from the video to better illustrate the process.

The most interesting finding from this analysis, to me, was the different way Cropster handles post-roast blends and pre-roast blends. These are coffees from different origins that are combined either after they are roasted or combined and then roasted together, respectively. Post-roast blends are handled very similarly to single origin. The option to do a pre-roast is actually a significantly different process entirely and includes building recipes and storing them to be selected quickly.

Standing Apart

Our stakeholders wanted RoastPATH’s roast scheduling to vary from Cropster’s by including a way to look at orders assigned to specific customers. While Cropster just looks at coffee as a product that gets roasted and then assigned elsewhere, RoastPATH should pull in orders and show how much coffee each person ordered. This data could then be transferred elsewhere to calculate billing more easily.

IDEATION

When it came to ideating, I had a pretty good understanding of what we needed to include, but I needed to sort out where it was all going to go. I used stickie notes in Miro in order to breakdown the phases of what needed to happen and where those tasks would logically be categorized.

• Project Screen: Where users see when orders where created, their status, how much of what products are assigned etc

• Sort Screen: Takes the data from the project screen and totals up all the coffee required (12 lbs bags, bulk, etc) so that individual batches of coffee can calculated

• Batches Screen: Shows the schedule and a quick overview of what green coffee is required for each. Batches can be viewed based on the day, week, or month

• Settings: Important things to consider in how coffee orders could be sorted

DESIGN + ITERATION

I always want to work from a user flow. Even though this process only takes a few screens, it’s important to understand everything the user is going to be doing on each of them and in what order.

User Flow Diagram V1

The screens I created broke down as Orders, Batch Calculator, and Schedule. The idea being that the user goes through each of these screens to plan their workload before roasting.

User Flow Diagram V2

I revised this initial user flow because I failed to account for how orders could be converted from package sizes to total lbs or kgs instead of requiring the user to do those calculations on their own.

Low Fidelity Wireframe Sketches V1

Low Fidelity Wireframe Sketches V2

There were a number of key improvements I wanted in a new iteration of the Low Fi wireframes. Primarily, I wanted to look at these as full-screen layouts and do a bit more for how products are displayed.

High Fidelity Wireframe Sketches

What we ended up in the high fidelity version had a few key differences:

• More color to explain ideas at a glance

• More reliance on icons to signify certain features

• An icon to add roasts in the spot where they will appear

“YER A WIZARD, HARRY!”

I never liked the navigation for these pages and after some testing and meetings I revisited this project. It occurred to me that the solution to my problem was to add wizard navigation to give the user an instant overview of the process. They know where they start and they know where the last step is.

I also added a final PICK & PACK step so the person can sort and package their coffee when their coffee is all roasted.

Zoom In + Out

Now that this process had been more formally organized I was able to zoom in and really organize the details. I started working on a screen where a user can create a Customer’s Account to store order and shipping information. I also laid out how the modal windows would open on every page and how each page could be navigated to and from.

NEXT STEPS

The next phase of this project will expand on RoastPATH’s greens and coffee sections to include inventory- how it is sorted, where specific inventory is at, and how it changes from week to week.

Thank you for reading!

More Case Studies