The Chartio Application

Visualizing data is great because sometimes raw numbers just don’t communicate enough. I realize I’m a visual person by nature, but I believe we can all benefit from being able to see some groups of numbers, especially when spread out over a dimension like time. Chartio is a web-based application aiming to help companies visualize their business data.

The Challenge

  • Identify areas of the Chartio application to improve
  • Consider the effort required to implement each improvement and which would have the most impact for customers
  • Maintain what customers were already building and able to do

When I joined the team, Chartio had a chart creation interface which was the core of their product. Charts generated here could be saved to dashboards, and these dashboards all lived in a dropdown menu in the navbar. There were also links for the settings and support pages.

The chart creation interface when I first started at Chartio.

Initial Research

There were some little things I wanted to fix. Like how changing the data source dropdown within a layer changed the list of tables available to drag in, from outside the layer.

Little things like this made it difficult for new customers to learn the interface.

The team was ready to make bigger changes though, and rightly so. Early customers loved how easy it was to make charts, but they quickly were trying to build more and more complex queries. Unfortunately the interface was hitting its limitations. For example, data could be blended together from different sources, but the “merge” was forced to happen at a very specific and early point in the process. Many people wanted to edit the data returned from thier queries a bit and then merge things together.

There were also a lot of common actions the team felt we could somehow help customers do – like grouping and extrapolating data – but there was nowhere in the interface for snippets or canned actions. A customer could manipulate the underlying data table in the the Formulas section, but changes were permanent and limited to basic actions that had clear effects, like adding a new column based on existing ones.

Another problem with this section was when someone would come back to a chart weeks or months later, and usually couldn’t remember all the fancy data maneuvers they had done. Or worse, someone else on a team would want to see how a chart was built, perhaps trying to learn how to make their own charts, but it was difficult to impossible to determine how the original creator had arrived at the underlying data table.

Essentially, people wanted the steps used to build a chart to be visible, hopefully editable. Enter, the Data Pipeline.

The redesigned chart creation interface of Chartio.

Pipeline Results

The introduction of the Data Pipeline was a pretty big change to the interface. Some would call it a redesign. We put the querying section (with that dropdown I mentioned earlier now moved) in the left half of the screen, and the final resulting chart to the right. For a lot of simple charts which don’t need transformations, this is all you need. The right half is fixed so the final result is always visible. The left half scrolls to show the actual Pipeline, which replaces the Formulas section and allows for steps to be added and removed independently of one another. These steps do simple things like add a column or hide a column, but also allows for the fancier things the Chartio team dreams up.

The “Add a Step” menu gave us a place to put all the cool things we could help customers do with their data automatically.

In this interface, the merging of data is just another step, so transformations to the data can be made before and after data gets blended together. There are also some less noticeable, but still very powerful interface changes, like the addition of the “OR” filter button.

Improvements and Challenges

By default the Filters zone uses AND logic, so data must match all the conditions to be returned. This has always been the case. However, once at least one field has been added, the user can now click a new OR button to create a new dropzone, which will use OR logic in relation to the other zones. OR buttons will continue being added as long as one keeps adding a column to each dropzone. This simple feature took a lot of consideration and collaboration. The team and I looked to more advanced users who were writing their queries by hand to determine what our interface needed to allow and what would be nice to have.

Considering New Customers

One great feature we were able to add with the Pipeline is the Input & Output displays for each step. This expands a preview of the data table going into and out of any step in the Pipeline. For many, it is helpful when learning the more complex transformations when there is a before and after image of the data to compare.

The data input and output of each Pipeline step can be shown to help understand how each step works.

In fact, I tired to consider any place I could add helpful information. Another example of where I was able to is when a user picks a chart type that can’t be made with the current data table they’ve created. Instead of displaying an error, we now show a description and simple example of what you need to make your data table look like and why.

In addition to the helper text and example table, small question mark links are placed throughout the app taking a customer to a related documentation page.

Improving Dashboard Arrangement

On the other side of the product were the dashboards which the charts eventually were saved to. Some early user-testing sessions with Chartio revealed an issue a lot of new people trying out the app hit: they didn’t know how to edit the dashboard. There was a button labeled Arrange Mode among a few others, like Add a Chart. Once the button was toggled, all the charts had handles and could be moved around and resized. The charts were even responsive and would adapt to just about any size box you made for them. The issue was if you missed the button, well you were out of luck.

Testing, Testing, One, Two

People wanted, and expected, to be able to edit charts without toggling into Arrange Mode. I was pretty sure the button had to go and be replaced with some kind of hover state. I also knew it would be a delicate balance getting something to look obviously draggable, but not obnoxious when someone is just looking at data. I partnered with a developer and created draggable prototypes with basic HTML/CSS/jQuery. We tested our prototypes with teammates, friends and strangers to hone in on what it took to communicate “you can grab me anywhere in this area”, or “grab and drag from this corner to resize me”, and of course “click here for a big ol’ menu of options for this chart”. And at the appropriate times.

A final chart at rest.
When hovering over the chart, the tooltips with additional data are still accessible, but now sublte interactive areas become visbile on the chart.
Clicking and draggin the top portion of the chart moves it around on the dashboard. Dragging the bottom-right corner resizes the chart. The grid granulation has also been doubled, and is now visible with guides while moving or resizing.

Finding Dashboards

A long time ago, the only way to get to different dashboards in Chartio was through a dropdown menu in the top navigation bar. Customers were often surprised the logo in the nav bar took them to the main settings page. They were also starting to have rather long lists of dashboards, which were simply sorted alphabetically. People needed more than a dropdown list.

Another thing we noticed was customers would sometimes forget what a dashboard was called, or maybe they didn't know the exact name in the first place (imagine your boss says “check the marketing dashboard” rather than the exact title). We knew we could make the small list into a page, with more sorting options, but we also wanted to add ways to discover popular dashboards or cool charts others had made. An obvious answer seemed to be adding some kind of thumbnail view for dashboards, but this was actually much harder to pull off than we expected. Many customers were very sensitive to the idea of images of their data being saved automatically (fair), and generating dashboards full of charts on the spot for previews was more or less impossible.

Challenges and Workarounds

We tried introducing the idea of saving a snapshot of your dashboard as a way to keep a history of your dashboards. Customers would often want to compare an entire dashboard to what it looked like last month, for example. This worked, and had the happy side effect of leading to the Snapshots feature, but even then we had to settle for making the feature opt-in. To make up for the lack of a real screenshot for some dashboards, we now generate an image using dummy charts for each chart type (like pie or bar charts) as stand ins for the charts. In a lot of cases, this can still help recognize a dashboard visually if you've seen it before, and prevents a homepage of gray boxes.

The new in-app homepage is a great improvement over the previous nav dropdown list. Customers can filter by category, see who's viewed or edited dashboars recently, and get thumbnail previews.

This new view of dashboards also featured several new options for sorting, like “Viewed by Anyone” allow customers to see what other people in thier organization find important and are watching.

Conclusion

I love being able to work with our customers, see all the different ways they use our tool and help make it even better. Recently, I’ve been working with the team to improve a customer's first-time experience even more. We’re experimenting with ways to offer people the right advice at the right time when getting started, like a guided tour of the chart creation interface.