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. The dashboard actually went through a few transformations. The first version is the only one that was used internally. The other versions are just updates I’ve done on my own. I make it a hobby to habitually go back to certain projects and see how much I’ve changed/improved.
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.
Breaking down the UI into segments 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 Matthew Ström’s post about the best ways to present data, and data tables.
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.
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.
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.
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.