Our Work with Data Voyager: Designing for Fast Data Exploration

Recently, we announced our Knight Foundation Prototype Grant to work on Data Voyager, a tool for exploring the breadth and depth of a particular dataset with ease through automated visualization recommendations.

Data Voyager was originally created as a research project by Jeff Heer’s Interactive Data Lab at the University of Washington (with implementation led by Kanit Wongsuphasawat and Dominik Moritz). The Data Vis Team at Bocoup was wowed when Jeff presented this tool along with many others during the OpenVis Conf keynote and knew we needed to get involved.

You can try out the new and improved Data Voyager now!

Our goal is to encourage data exploration for all, and so we wanted to focus on improving Data Voyager to make it a valuable addition to people’s data analysis workflow. To that end, we decided to focus our time on four impact areas:

• UX/UI improvements
• First-use experience
• Custom Datasets
• Speed improvements

Creating a More Welcoming User Experience

We did user testing at the start of the project to identify opportunities for functionality improvements, and we quickly learned that users could be a bit intimidated by the tool. This is understandable as most of the site visitors have little-to-no experience with developing data visualizations, and Data Voyager packs a lot of visual punch! One of its main functions is to recommend lots of charts, which can be a bit overwhelming to see all at once.

While the original design was functional, we thought we could improve user experience by improving visual hierarchy and reducing clutter. Our amazingly talented in house Open Web Designer Jess Klein created mockups and a plan for how to make Data Voyager’s interface really shine.

We used color to bring a clearer definition to the different sections of the application. The darker color draws the user over to the field panel on the left and then back toward the visualizations in the central panel. The top toolbar is simplified and highlights the core interaction features of the tool, shifting all of the secondary functionality to the footer. The different types of visualization recommendations that Data Voyager displays are more clearly explained and delineated in the main panel. And to top it all off, the project now has an awesome new logo, which helps to pull the visual refresh together.

Some of the elements in the mockup, such as the user account indicated in the upper-right, point to what Data Voyager might look like in the future as these additional capabilities are developed. Even so, we were able to implement most of the structural UI changes that significantly improve the user experience and bring polish to the application.

Designing a Good First-Use Experience for Everyone

As a tool developed in an academic setting, Data Voyager typically reached new users through an in-person tutorial led by the program’s creators. While this approach certainly gets users familiar with the tool quickly, it doesn’t scale all that well. We knew we wanted to design a great first-use experience into Data Voyager so that new users who came to check it out would understand immediately its power and usefulness without needing hands-on training.

Jess Klein worked with the team to define a set of learning objectives to describe what first time Data Voyager users should be able to accomplish with the tool. We then took these objectives and used them to develop an initial welcome screen and in-application tutorial to onboard new users through Data Voyager’s various features.

Making Drag and Drop Data Discoverable

Another big issue that came up in our user testing was how to look at custom datasets. On startup, Data Voyager presents the user with a look at a pre-loaded dataset about cars. This is great for getting a feel for what the tool can do, but there is only so much you can glean from information about cylinders and horsepower. Eventually you are going to want to get your own data in here to explore.

While it was possible to load your own data into the tool, it wasn’t obvious what kinds of data were supported, or how to access the different data loading options. We completely redesigned the data loading experience to improve its discoverability and ease of use. Now, you can just drag in a CSV file, and bam, your data is uploaded and ready to explore.

A Speedy Delivery!

As they say, a data exploration tool is only as good as the size of the data you can explore (“they” say that, right?). While Data Voyager worked fine for smaller datasets, there were lots of performance bottlenecks that added up to a non-optimal user experience when dealing with anything with a significant number of rows or columns. We thought we would be able to lend a hand in speeding things up to ensure people could use Data Voyager no matter the size of their data.

Our resident speed demon KAdam White delved into this task and found lots of areas where things could be improved. With these changes in, Data Voyager is faster both with the included small sample datasets and with custom data sources. As a bonus, on account of the architecture of the project, many of these improvements will be coming to Data Voyager’s companion tool Polestar, which implements a Tableau-style interface using Open Web technologies.

Bon Voyage for Now

We really enjoyed working with Jeff, Kanit, Dominik, and the rest of the UW Interactive Data Lab. While this is goodbye for now, we continue to be excited about Data Voyager and the rest of the tools such as Vega and Lyra this group is developing to bring data analysis and visualization capabilities to everyone.

Check out Data Voyager now, and let us know what you learn on your own data voyages!