clarity-ddn-dash-2017-02-mock.png

Seeker: Clarity Analytics Dashboard

Role
Product Designer 

Platform/Medium
Web

Goal
Improve upon the existing design of the Seeker data analytics dashboard.

Topics
Web Design, Concept, Product Design, Branding

Tools
Sketch

 

The Seeker product and analytics team required a means to view all of the statistics coming through the pipeline; thus, the Clarity analytics dashboard was born. However, the initial live design wasn't flexible—it couldn't scale with additions to the page. I took it upon myself to work in some proper user experience and break down the long initial dashboard into digestible parts.

Before:

 
 
 
 

This allows a method of navigation by section (rather than scrolling through an impossibly long page of data and charts) and segmenting proper information into their respective pages. The first design is approximately 7,500 pixels long and with an average of 400-600 pixels per scroll wheel on a typical analog mouse (information here & here), it would take too long to get to a certain section and even more to scroll back up. So when the data and UI expands, the new dashboard would be flexible enough for an engineer to add on, and easy enough for a user to navigate and view applicable information.

I found a lot of help through a Medium post about the best ways to present data, and data tables.

After (2016):

 
 
 

After (2017):

 
 

After a year of working directly in the field of UI design, I decided to revisit the Clarity dashboard and improve it since there were discrepancies, inconsistencies, and redundancy in the 2016 styles and UI. 

User interface and feature improvements naturally follow UX redesigns. A few examples are increasing text size for tooltips, unifying colors and styles, cleaning up charts, adding iconography, better spacing, and increasing contrast of elements.

 
Overview Page

Overview Page

Total Views page

Total Views page

 

Some curious things really stood out while reviewing the 2016 dashboard. One case was that the "Total views" module in the "Overview" page is the sum of views from other sources (Social and O&O); therefore as a user in product and analytics, I would want to know how the views are aggregated and segmented. Although I only included two, this bar could expand to include additional sources.

 
First page, "Overview"

First page, "Overview"

 

Another case was the line chart in the "Total views" section. This needed to be updated with correct dates. In addition, I decided to have dots along the lines to only appear upon hover for a better indication of which data you're viewing. 

 
Total Views line chart

Total Views line chart

 

Since there was a requirement to be able to see past data for comparison, I gave the option to view and hide it. The 2016 version kept the past data visible which made hovering over specific points on a line fairly difficult. Being able to hide it would give clarity (no pun intended) to which data you're viewing. 

Top 2016; Bottom 2017

Top 2016; Bottom 2017

In closing, these changes would've greatly improved the usability of the dashboard. I realize that there were many issues I overlooked in terms of general user experience and UI consistency during the dashboard's inception. Overall, recreating this dashboard (twice) was a great exercise and a comprehensive way to reflect on how I've grown as a designer in the immediate year.