David J. Archuleta

CourseworkResumeDesign IndexInfo

Designing a B2B web app for data analysts in the wine industry

2021

For this project, I was part of a team of designers who were asked to find usability improvements that could be made for a desktop data analytics web application oriented toward the wine industry.

Our objectives were to understand existing product and identify opportunities for improvement in the user interface, implement improvements into a clickable prototype, and provide next steps and suggestions for the client.

The company we worked for is called Winosaurus, and they're concerned with matching suitable wines to consumers using a machine-learning model and user-defined terms or descriptors. For example, a customer can input “fruity” or “smoky” and receive wine recommendations associated with those flavor profiles.

They offer two connected products:

Firstly, a business-to-consumer recommendation application that can be embedded onto winery-operated e-commerce websites to assist with natural language processing when customers browse for wine.

Secondly, a business-to-business data analytics web application. An existing version of this product was our focus for this project. Analysts are meant to use this app to organize wine data and help guide business strategy.

Competitive Analysis

During this analysis, we wanted to consider attributes that were important both to our client’s business and quality of utility and experience for the users.

I aimed to survey the most depended-upon heuristics dashboard interface design as employed by others in the analysis market.

While looking at the competition, we found that many of our direct competitors didn't provide many core features that were mentioned during our initial information interviews with analysts. This opened up possible avenues for Winosaurus to take advantage.

Proposed User Flow

After five initial informational interviews with data analysts, we created some flows and wireframes to model a typical sequence of actions an analyst might take when using this software.
We organized a simple path for the user which aims to highlight essential screens each house the main features of the app:

- A home dashboard screen
- An intuitive graph builder for the creation of visualizations
- A data dashboard screen

The navigation between these screens resulted in this user flow:

User Interviews

To question the target audience, we aimed to recruit data analysts preferably with experience working in the wine industry. Our key insights were as follows:

1: Users wanted to see expanded functionality to support an exploratory interface where users can come with questions.

2: The UI was difficult to navigate for many of the participants- certain functionality was expected (and provided in the app) but weren't easy to find.

3: We also found that many elements of the visual design didn't provide adequate contrast, which posed several readability and accessibility issues for users.

Design Solution

After 3 rounds of user testing with low- and mid-fidelity prototypes, we reached a solution that was proposed to the client.

The sign-in page featured art that maintains the Winosaurus brand image with previously commissioned illustrations.

One of the suggestions we offered our client was to integrate standard social account links for third-party verifications, such as a Google or Facebook sign-in.

Below is an example of the graph editor in which an analyst would direct data sources to create a particular visualization for their needs.

We chose to incorporate a geographical visualization for the prototype, though we learned through testing that we probably should’ve gone with a simpler graph such as a bar graph. The final product would support most graph types, but here we wanted to illustrate something a winery might be concerned with, such as regional sales.

For the interface, we included many features normally found in data analysis tools, such as scope definition across dimensions. This was an important heuristic that was expected from the users we interviewed. At the very least, they expected to be able to express a time margin through which they could filter data through.

We offer many of the standard visualization types in the right side panel, which is designed to auto-update to suggest appropriate models depending on the type of data initially selected.

This is the main dashboard for user-created visualizations. Each graph represented here would be organized by the user toward the goal of monitoring a particular business endeavor.

In our prototype, we arranged for the visualization on the previous screen to be added to this collection. This was also meant to illustrate that many graph types could be placed on a particular dashboard in a customizable manner, directly addressing the user needs to be expressed during our interviews.

We also included a global time filter for this view, which would override any time filter specified on any individual graph.
directly addressing the user's needs
We also addressed the need for analysts to share their dashboards with co-workers either by sending a link or exporting the data to CSV formats per data set.

In hindsight, this project was an incredibly insightful dive into the world of information dashboard design. This was the first time my team handled such a project, and although we learned quite a lot in a short amount of time, I was compelled to supplement my understanding through further research in this area.

There are several considerations to review when designing information visualizations, and I have since learned much from the works of Edward Tufte (graphical expression), Stephen Few (the actual utility of dashboards), and Alberto Cairo (graphic integrity).