Building A Web App To Track Inventory, Wastage and Analytics For Breweries— UI/UX Case Study

A complete dashboard experience for breweries to track their inventory and analyze consumption patterns of their beers.

Image for post
Image for post

TLDR;

This a case study of a web application that I designed from scratch for a client called “BeerTech.”

Overview

Before designing the web app, the client used to provide these huge amounts of data using spreadsheets to breweries and there was a huge loss of data lost in translation and also it wasn’t the easiest way to consume and digest all that data.

So, the client approached me to design the dashboard interface for the service and there began my journey.

FYI, this is the first ever product design project I’ve ever worked on — this project acted as my transitional bridge from graphic design to product design.

Up until this point, I had been practicing graphic design for about a couple of years professionally and this project is a second company of one of my former clients. He trusted me with this project even though I’ve never worked on product design before based on the trust I had established through my previous projects with him.

Now, the real challenge began — understanding how to design a web app, how to prioritize functionality over form, how to pick the right typeface, how to design scalable and reusable components and the biggest challenge of them all:

How do I design a dashboard that is completely filled with data and graphs in a way that it’s easy to consume and digest for the user?

Understanding the service

My role and design process

  • Understanding the user.
  • Understanding different actions that the user would want to accomplish using the site based on priority.
  • Creating a site map and establishing a clear information architecture.
  • Creating roughly sketched wireframes to visually plan the whole interface.
  • Researching to understand if there are products like this that exist and what are some of the best case practices.
  • Designing the entire interface and presenting it to the client for feedback.
  • Working on the changes and testing the design with some users.
  • Working with the developer to bring this application to life exactly as it was designed.

Research

Diving deep into the details

“Why is this service necessary?”

“How will this service help breweries?”

“What is the alternative for this service?

“How much time and money does this save for our user?

“How much value does this add to our user’s business?”

After understanding everything about the value that the service provides and its by products I dove deeper into questions about the content on the dashboard.

Even thought my client had a rough plan of what needed to go on to which page and an overall structure to the dashboard, we started on a white page again. First we put down the most important things that needed to be on the dashboard, then we added some good to haves, then added more things that enrich the already existing experience of being a brewer and owning a brewery.

After completely understanding the service we then moved on to understand the user in-depth.

Understanding the user

Image for post
Image for post

Even though there are different types of users, the use cases for all the users are pretty much the same so I designed the entire experience keeping just this one user persona in mind.

Information Architecture

Image for post
Image for post

User Flows

The most common use cases are pretty straight forward. The user logs in and based on whether she/he wants to check the consumption statistics or track inventory or take note of the last 5 dispenses — they’ll be able to find it as soon as they log in. But there are some complex flows that a user might have to go through like adding a new batch/beer or archiving an existing beer so I identified 3 such use cases and planned their flows.

Image for post
Image for post

Wireframing

Visual Design and Prototyping

This part of the design process took me the longest time as it was my first ever UI/UX project. I had to do a lot of research and look at references from numerous other web applications to get a sense of how good button should be designer and how different sections should be laid out. I spent a good amount of time observing some good case practices by other companies and took notes on what works and what doesn’t to improve the usability of the interface.

After trying 2–3 different styles of layouts for the home page, I finally decided to go with the below attached style.

Image for post
Image for post

I started working on the web design first and then I spent time making the design responsive at all breakpoints.

Even though I worked on both web and mobile versions of the design, for the sake of this case study I’m going to take you in-depth into the design decisions using the mobile version as the reference.

Home

Image for post
Image for post

In that same order of priority, the first thing the user sees as soon as they log in are the inventory statistics. Starting with a bar that shows how much percentage of the batch is left both in percentage and in liters followed by more information on how many liters have been dispensed, when was this batch brewed, how long has this batch been in storage for and an expected date that the batch will run out by — for each beer. This section also showcases average consumption rate of each beer for the day.

Following this section, the user is presented with information about the last 5 dispenses in the brewery and it is then followed by the beer analytics (individual) and consumption statistics for the day.

Analytics

Image for post
Image for post

When talking to the users about the problems with the current analog scale to measure inventory — most of them complained about firstly the inaccuracy of it and secondly that it’s an absolute number so I tried to recreate the storage tanks visually for the inventory analysis and the users reacted very positively about that.

Bar Specific Analytics

Image for post
Image for post

Daily Consumption

Image for post
Image for post

This screen helps the brewers understand the consumption rate of their beers and plan their offers and deal accordingly. This screen also provides an option to the user to select any specific range that the user would like to see the analytics for.

Chat

Image for post
Image for post

So, I designed a chat system into the dashboard where you can also create different channels like Slack to differentiate various different topics. This way brewers could be on a different channel to talk about just their stuff and the brewery owner could be on a more general channel just to make announcements not having to bother everyone with everything or having to personally text each person.

Settings and Profile

Image for post
Image for post

The Profile screen is something we realized we needed after testing the initial designs with the users where we found out that most brewery owners owned multiple breweries and they needed a way to shift between breweries on the app without having the log out and log in each time. So I added this new section which lets the owner easily switch between multiple breweries.

Inviting brewers on-to the dashboard

Image for post
Image for post

As this was one of the main things that the user will be opening the app for, I added an invite button on the home screen itself instead of keeping this in the settings tab.

Record cleaning and adding a new batch of beer

The current flow to add a new beer looks like this: Home>Edit>Record cleaning>Input batch details>Add beer (or as seen in the gif below).

Image for post
Image for post

When I was planning the flow for adding a beer with the client, we realized that if we could add a way to record the time taken for the whole process of cleaning the beer storage units and adding the beer — that data can really help the user in optimizing their process of cleaning and adding a new batch.

So, I created this flow where the brewer could add a new batch only after he/she records the cleaning process and until then all the fields will be greyed out. Once the cleaning process is recorded, the brewer can then proceed with adding more information about the batch.

Archiving a beer

Image for post
Image for post

So I decided to design this in a way that the user could just archive the beer instead of deleting it completely and when they are adding a new beer, if necessary they could pick an already archived beer instead of creating a new beer every time which in-turn saves a lot of time for the user.

Navigation

Image for post
Image for post

But the reality differed from my assumptions, after testing the design with some customers we instantly realized that the navigation bar was way too thin for the users to interact with comfortably and the users in the majority of the cases expected the Activity section to be on the left most place so I iterated the navigation further more and even added rounded edges as that matched the whole visual style and language of the application better.

Developer Handoff

What went right?

  1. The client who commissioned this project was an old client who I’d worked with in the past so he trusted me with all the design decisions I took and let me design with complete freedom which also meant that I alone was making these decisions and was responsible if something doesn’t work so I double checked everything I designed and I always kept the user in mind while designing each and every screen.
  2. The distribution of all the data into smaller chunks and different sub-sections really made it easy to consume and use for the user and we received great feedback on the design.

What could have gone better?

Conclusion

Having said all that, none of this was easy — there was a lot of researching, understanding, planning, sketching, moving rectangles, figuring things out through the process and that’s what made me realize that designing digital products is what I want focus on.

Image for post
Image for post

Written by

Product Designer • Host — Talk Design To Me Podcast • Has a cat • BLR, IN • srinivasteja.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store