Roth River

Allowing distilleries to track, collect, and analyze all their barrel data

Overview

Project timeline: 4 months
Roles: Product Design
Project Type: Contract

Introduction

Roth River is a startup that helps distilleries track, collect, and analyze the data of any spirit barrel within any given warehouse anywhere in the world. Historically, accomplishing these 3 tasks has been a major pain point for distilleries; and for some even impossible. So Roth River created software where all this information can be centralized in a single location.

The Challenge

Defining the major pain points

1. Tracking of inventory

Imagine the following scenario: Bacardi (a customer of Roth River), has massive warehouses of liquor barrels all around the world, and within each are thousands of barrels of not only their brand but of their subsidiaries as well. Within each of these warehouses, there is a labyrinth of different rows, sections, and subsections separated by brands, liquor types, and age of barrels. How do they track everything? Well, in short, it’s a confusing process.

2. Collecting data

As stated above, there are a multitude of metrics that liquor barrels need to be categorized by: producers, skews, locations, age, and more. Being able to have a centralized location where all this is collected and can be later found based on any specified facet is a herculean task that only an effective search capability can handle – and Roth River offers just that.

3. Analyzing Data

Collecting data is one thing, but even more importantly that data needs to be understood. Things like alcohol percentage, the temperature of barrels, and the ever-shifting volume within a barrel – understanding all this is essential. And Roth River has the ability to analyze barrel data on the most granular level.

My Role

My role as the designer was simple yet daunting: Ideate, design, and deliver an entire end-to-end solution:

An inventory browser page (coined the Inventory Analyzer”)
A data analytics dashboard needed to be designed
Customizable graphs
Custom grouped lists (think playlists on Spotify) of barrels where their data can be easily tracked over time
Ability to track barrel history
A global landing page

Ideate

User Persona

To begin the design process, I generated a user persona with the founders of Roth River to have a north star user we can always refer back to. This is essential so we can always answer the core question of “who is this for?”

Brainstorm

This is the lightweight user architecture flow that the founders of Roth River and I white-boarded while on a call scoping out this project.

Wireframe

A preliminary exploration of the major screens within the app. Before fleshing out the high fidelity I validated the designs with the founders of Roth River and potential customers by walking through every wireframed screen and carefully explaining the core interactions. Below is a sample of 6 of these screens.

The Design

Inventory Analyzer

The Inventory Analyzer is where it all begins. Through a simple yet powerful filtering convention, intuitively nested tables, and some visual magic that brings the eye towards what’s most important, the user can quickly discover a single barrel among tens of thousands.

Organizing the results

Organizing the tens of thousands of barrels within their appropriate categories and showing visual hierarchy became a point of central focus. There were so many data points to organize, so much information to show, and so many granular interactions to consider. Below is a list of a few key interactions that aided in making this page more digestible:

1. Decreased cell opacity

One pain point we ran into when designing this screen was simply how heavy it was. So the major question became, how do we focus the user’s attention on what’s most important? The simple solution I came up with was a pattern of decreasing the opacity for any cell that wasn’t currently open and brightening the shade, shadow and stroke of any cell that was.

2 & 3. Nested tables

The amount of data that needed to be sorted through was immense. So we began this process by defining the hierarchy of all the data. Once defined, I was able to take that and create tables that intuitively nested within each other.

Barrel filtering

After many iterations, in the end, we settled on simple drop downs. Why? For a multitude of reasons. 1.) It’s a simple pattern that people understand. 2.) This was an MVP, and filtering through these components kept it lightweight for the engineers. 3.) Because it didn’t take up too much space the tables were kept at the forefront of the screen.

1. Lock selected filters at top

When it comes to filtering, a requirement is that the user can quickly find what they have already selected. To accomplish this my solution was to have whatever the user selected to stay locked at the top of the menu – this allows for easy access AND minimizes the number of components on the screen.

2. Advanced filtering

It’s too much to have 7+ filters on a screen by default, plus many filters won’t be utilized that often so it’s better to keep them secondary.

3. Nested facets

When it came to filtering by location there often times were multiple warehouses within one location, but creating an entirely new filter set for warehouses didn’t make too much sense in this case. Therefore, I settled on a convention where the user could expand a specific location and select warehouses within it.

The Dashboard

From the inventory analyzer, the user finds a specific barrel they would like to view the metrics of. Click into it and they are taken to this dashboard where the user can view the the barrels data with microscopic detail.

View the most important data

There are a lot of different possibilities for what could be shown on the dashboard, but after talking to customers (e.g Bacardi) the following information is what topped the list:

1. Barrel overview

These are the high-level barrel metrics. There was a lot we could show here, but it was decided that the most important data were the percentage breakdowns of the ingredients – so we used a visually engaging pie chart to bring the eye towards it.

2. Volume (and other custom queries)

For this MVP, the metric we tracked was the volume of liquor in a barrel over time (liquor evaporates over time in a barrel). The next step is to design a query builder where the user can visualize information by combining all sorts of data points that are tracked. We are currently working on designing this piece.

3. Location data

When it came to breaking down the data on this dashboard in an organized way, the location metrics presented a unique challenge because they can be broken down into 5 subcategories. So, to keep this dashboard as easy to digest as possible, we decided to keep the location data as a list that sits in a primary position at the top.

Smartlists

Smartlists allow users to create custom groupings of barrels they can track over time. Say they want to track 15,000 barrels that are all 5 years old – how can they do this without having to filter for those barrels on the Inventory Analyzer each time they return? Smartlists solve this issue. Think of it as playlists on a music app. People spend the majority of time shuffling their playlists, not a list of 10,000 songs. Smartlists serve the same purpose.

Adding Barrels to a Smartlist

Once users dials down to the barrels that they would like to track over time in the Inventory Analyzer, they have the power to add them to a Smartlist in an efficient and very intuitive manner. They can do it from the Inventory Analyzer or from the Smartlist itself.

1. Smartlist “Mode” banner

Once the user presses the “Smartlists” CTA on the top right, a visually prominent banner appears on the screen. This banner serves 2 major purposes: 1. it acts as a visual indicator that the user is in a “mode”, and 2. it offers contextual copy – by default it says “Select barrels to add to Smartlist” and gives a barrel count upon selection.

2. Bulk selection

We needed to create a way for the user to bulk select large quantities of barrels at once (imagine individually selecting 2000 barrels). So we allowed the user to select an entire parent – this allows the user to select an entire grouping of barrels that exist within it. In this example, the user can select all barrels that are 1-2 years old.

3. An intuitive, dual purpose menu

Once barrel selections are made, the user goes to the “Select Smartlist” dropdown and can select the Smartlist(s) they would like to add the barrels to OR they can create a new one. If they decide to create a new Smartlist, the modal below appears.

4. Tagging:

Users can add relevant tags to any Smartlist. The purpose of this is to organize Smartlist and be able to filter for them in the Smartlist list view. According to our users, they indicated that there would likely be many of these lists so a simple way to retrieve them was necessary.

Finding a Smartlist

1. Search & filter

As stated in the previous section, users informed us that they would likely have many Smarlists to keep track of. For this reason, a simple search and filter affordance was necessary. The user can do an open-ended search for keywords, filter by tags, or filter by owner.

2. Favourited Smartlists

Users need a way to quickly view the Smartlists that are most relevant. This follows the entire theme of the product – how do we create an experience that takes a large amount of data and cuts out the noise? The favourited lists live within this carousel component, making filtering for them unnecessary.

3. List/Grid view:

By default, the user sees a list view, but if they desire they can view it in a grid. The default is a list view because it is visually cleaner, but the grid view was added because this product already has so many tables – so we wanted to offer the user a view that is visually distinct from the rest of the app.

Inside a Smartlist