A web application built for Cardinal Spirits that allows users to track sales and view sales analytics in a clear and informative way.

PROJECT TYPE
Sales Analytics
Website

TOOLS
Figma
Adobe Illustrator
Adobe XD

MY ROLE
UX Designer
UI Designer
Front-End Developer

TEAM
Eric Uhde
Andrew Laslo
Nick Leisure
Nikita Sahoo

TIME
May 2017 - October 2017

Cardinal Sales is a web application that was created for Cardinal Spirits, a distillery located in Bloomington, Indiana.

Stakeholders at Cardinal Spirits needed a way to track the sales made by the company, and they needed a clear way to see and understand the sales data in order to help them make decisions for the company’s products and business operations. Before developing the app, stakeholders were relying on spreadsheets to track sales data, and they found that spreadsheets were frustrating and arduous to use.


ABOUT CARDINAL SALES

In Brief

How might we help users understand and track sales data in a way that positively influences their business decisions?

Design Challenge

Solution

We designed Cardinal Sales, a web app that processes and presents sales data to the user in a comprehensive and informative way. The app provides an intuitive user experience that includes clear and detailed data visualization and customization options. It also enables users to quickly set sales goals and see how close they are to achieving those goals.

Quickly find important information with ease

With a quick glance, you can find principal sales information and have an understanding of where the company’s sales currently stand. See the total number of products sold, and set goals and track your progress towards them. You can also compare current sales with sales from the previous year by looking at the rolling average.

Track and compare product sales trends

The Sales Trends graph allows you to compare and analyze company sales over a given period of time. You can select which products, suppliers, and distributers are shown in the graph.

View top selling products and distributers

With a quick glance, you can find principal sales information and have an understanding of where the company’s sales currently stand. See the total number of products sold, and set goals and track your progress towards them. You can also compare current sales with sales from the previous year by looking at the rolling average.

PHASE 1

RESEARCH

Surveys & Interviews

We created a survey to learn about the different ways users currently track sales and how they feel about these methods. After the surveys, we conducted semi-structured interviews with the stakeholders to dive deeper into the current methods being used to track sales, and what exactly users want in a sales app. It was important for us to understand why users felt that their current system for tracking sales needed to be improved.

We created an affinity map as a group to organize and distill interview data, and to identify relevant themes.

Insights

  • Users want to see how product sales are changing over time.

    • How are total sales trending over long periods of time? (rolling average)

    • Users want to compare sales trends between different products, suppliers, and distributers

  • It’s important for users to be able to quickly find the sales information they need without feeling overwhelmed. (“I’d like to have an idea of where our total sales are currently standing without having to dig through a bunch of data.”)

  • Users want to be able to see detailed product and account information

    • What are the top selling products and accounts?

    • How many cases of a product / account have been sold this year?

  • Users want to create sales goals and track the progress towards those goals

PHASE 2

DESIGN

Ideation

With our research findings in mind, our team brainstormed solutions together. We attempted to come up with as many ideas as we could about different possibilities for organizing and presenting sales data that would be helpful to the user. “What kind of graphs could we use?” “Can sales trends all fit on one customizable graph, or will we need multiple?” “What are the crucial pieces of data that a user needs to see in order to quickly get an idea of where sales currently stand?”

We then went through the ideas and discussed which of them would best support the main purpose of the application: How can we help users understand and track sales data so they can make better business decisions?

After our team completed discussing our ideas and distilling them down, I organized them into the following roadmap:

I use roadmaps because they tend to help me and my teammates keep our ideas organized, and they serve as reminder of what the main purpose of the app is. Whenever I get stuck or feel a bit overwhelmed by a project, I’ve found that reminding myself of the project’s main purpose can provide a bit of clarity and guidance.

We settled on the following core functionalities:

Track sales trends for total sales, products, distributers, and locations using a line graph

View detailed product or account information including total cases sold, percentage of total sales, and more

Set sales goals for a given time period, and track the progress towards meeting that goal

Provide lists of top products, distributers, and their respective number of total cases sold for the current year

Allow users to upload CSV files, and automatically update the app to reflect the new sales data

Use a search function to quickly find the sales data for a product, distributor, or location

Sketches & Wireframes

We created the following wireframes and brought a Figma prototype to our potential users for feedback.

User Feedback & Revised Design Goals

All users liked the Sales Trends graph, and it become more clear that this would be the most used and most important feature of the application. Most of the users liked the overview page, but there were some doubts about how effective it was in presenting the most important information in a clear way.

Informing and Empowering our Users

Some of the users felt that the overview section was overwhelming or cluttered. We also noticed that the users prioritized the sales trends graph over everything- some users were immediately scrolling past the overview section to get to the sales trends graph. These two functions serve purposes that are more separated from each other than we originally thought. A user might prioritize the overview section in a situation where they want to quickly get an idea of where sales are currently standing, and how much progress is being made on the yearly sales goal. In a different situation, a user might want see how sales are trending between two products.

For these reasons, we decided to move the sales trends graph onto its own dedicated page. We also took another look at the overview page, and tried to figure out how to make it more informative and effective while reducing clutter.

High-Fidelity Design - Iteration 1

For the first iteration, our primary goal was to validate whether the design helps users track and compare sales trends, quickly view sales goals and progress, and make business decisions faster. We used Adobe Illustrator to create high fidelity mockups, and Adobe XD to create and test an interactive prototype.

PHASE 3

Evaluation

User Testing Process

With the goals I had for this iteration in mind, I moderated user feedback sessions with 5 users with varying preferences towards sales data and data visualization methods, and different levels of familiarity with interacting with sales data. Here's a brief overview of the process:

  • Introduce the project goal.

  • Describe the scenario, set up the context, and let users use the app while thinking aloud.

  • Ask follow up questions and gather feedback.

  • Let users fill out a questionnaire. Thank them for participation.

Results

I was able to gather a lot of feedback on the prototype, from users with different time constraints, different preferences towards viewing sales data, and different familiarity levels with interacting with sales data. Here's a summary of how people rate their own confidence in understanding the sales trends data, their speed in finding the particular sales data they’re looking for, how frequently they will look at sales data compared to how frequently they do now, and their confidence in making business decisions based on their knowledge of the sales data from using the application.

Reflection

What I Learned

Designing this application helped me understand that in order to create a system that works, it’s important to start with a simple system that meets initial selection tools before improving it over time: “A complex system that works is invariably found to have evolved from a simple system that worked.”

We made the mistake of designing the application with a focus on having a lot of features and different kinds of data visualizations. After many iterations we continued to simplify and distill the app