A New Tool for Data Visualization

The following is a Framer prototype that I built and designed to test a new tool for creating data visualizations.  This beautiful tool allows the user to customize their workspace with a very unique modular design.

Watch the short video below to learn more or scroll down for a write up.

 

The design goal: 

The goal of this project was to simplify our existing data visualization tool and allow for easy customization of the workspace.

 

Context around the problem

Below is a screenshot of what this feature looked like before I began working on it (sorry for the poor quality). 

So what are you looking at? Let me give you some context.

There is a reason to the all the madness here. Domo is a BI tool that helps analysts store, analyze, share, and visualize their company's data. This tool in particular is one of Domo's core features. It is what helps analysts build beautiful data visualizations/dashboards for the rest of their company. But in order to get to this beautiful end product, there are lots of decisions to be made. For example, here is a quick list of some of the decisions an analyst might need to make:

  • What column of data should be displayed on the x axis and y axis?
  • What type of chart should I use? Map, Bubble, Pie, Funnel, Line, Stacked Line, etc
  • What columns of data can I include with this data set?
  • Should I filter my data by year, month, or day of week? 

So, in order to help the analyst make these types of decisions, the existing design seemed expose every single feature the tool had in order to say to our analyst - "yes we can do that, and that ... oh ya and that too". 

So how do you keep all of our features without overwhelming the user?

What this feature started to look like was a pilot's cockpit.

The obvious problem with the existing design is that it is extremely overwhelming. But similar to a pilot's cockpit, each of those features is necessary for the analyst to do his or her job.

The Solution

We knew the first thing we had to do was get rid of as many things as we could that were not critical to the analyst doing his or her job at that moment. 

So the first thing we did was get rid of the top navigation. 

We did this because we knew that analyst would spend anywhere from 30 minutes to a few hours building their charts, so the need to navigate to other pages in our product really wasn't useful. 

Full Screen

So what did instead was place the entire feature inside a full screen modal that did a complete takeover of the screen. 

Ok cool, but there are still way too many features on the screen right?

Ya, you are probably right there. This is a problem we kept running into (just like the pilot in his cockpit). Each feature was needed, so we couldn't just get rid of the features. But we asked ourselves, is there a way to hide them until the user needs them?

Less Cockpit, More Minority Report

We really liked this idea of a modular design where the Analyst could control what he/she wanted to see at any given time. We joked later that we took our inspiration from the movie "Minority Report." Remember that cool screen that Tom Cruise would control with his gloves?

We bought into this idea that we could hand over the controls to the user to customize his or her space. So what we did is put each feature of the tool into this collapsable drawer.


This allowed the analyst to fully customize his/her space. Clicking on each tool would toggle the feature on/off giving the analyst more space to work if needed. This made it easy for the analyst to make the workspace as simple or as complex as he/she wanted. 

We also carried this design over to tablet as well.

Conclusion

We took this design and built a framer prototype for user testing. In the end, this design really performed well and analysts loved the fact that they could now customize their space. Ultimately, it was rolled out to all of Domo's users.  Shoutout to everyone who worked on this, especially my design mentor at Domo Ken Baldwin, with whom I worked on this. I hope you enjoyed it.

Marketing Video