Charting Library - Case Study

charting library hero.png

About

Nasdaq's charting library is an interactive web platform that we use internally to reference and standardize our charts and chart components. We also use it as an education tool. The charting library explains each chart type along with its use case. This allows us to tell accurate data stories across our products.


Problem

Each designer, originally, had their own approach for coming up with the charts they used. Because of this, we couldn’t track how our data was being displayed across our products  - which led to a lot of disparities. We needed a way to standardize our charts, and we needed to be able to share this teamwide.


Process

sketch.png

To start, we created a small research campaign to contact other design teams and inquire about their process around displaying data across their products. As a result, we uncovered a disjointed process similar to ours. Most teams either had no way to standardize their charts, or used third party solutions. 

With this information - and a full audit of our products -  we created use cases, made a list of features, and sketched out and finalized a concept. 

 

 
home snippet.png
bar snippet.png
 
 

We tested this concept both internally and externally to gather feedback.  After we distilled the feedback, we decided to focus on 2 areas.

The first area being content structure. Our chart profiles are content heavy. We needed to make sure we had distinct hierarchy for scannability. So we reworked our previous structure to make sure it’s easy for a user to find what they are looking for. To take it a step further, we created visual elements that further expressed and supported our content. 

 
Do's & Dont's .png

For example, we decided to add visuals to the do's and dont's instead of displaying this information in a paragraph content block.

 
 

The second area being interactivity. We decided to incorporate a feature that allowed users to test the different chart types using their own data. This ensures that the chart chosen correctly communicates their data story. 

Artboard - Code Plugin.png

After we incorporated these elements we retested our concept both internally and externally. We discovered that the overall usefulness and usability levels increased. 

 
 
pie chart.png

This library is currenty in use internally!