Bringing Training Data to Life


PROJECT: Analytics Portal

Company: New York Stock Exchange Governance Services
Role: Head of Design
2016

Analytics_story.png
 

The Analytics Portal allows clients to monitor progress, completion, and answer choices from their training courses on a live dashboard. It also supports configurable reports via PDF export, and filtering based on user-supplied HR data. (This is especially notable, since our CTO found a way for this sensitive data to display for the user without ever touching NYSE servers or compromising security/visibility.)

The streamlined navigation and experience contributed to a shortest-yet testing phase at True Office/NYSE GS and multiple clients volunteering to test as part of the beta release. It quickly became a key differentiator in the compliance industry - most competitors could only offer hard file reporting at the time.

AnalyticsPortal.png

Final Output: Released Build


Process

 

Initial Concepts

The first set of work that our in-house designers, Danny Silva and Jason Cardarelli, were tasked with was to simply improve the way clients downloaded data reports from their training course (first image). Fortunately, conversations between the executive team and the design team led to a more ambitious approach: bringing our reports online. The core question quickly shifted from “how can we get clients a nice report?” to “how can we bring report data to life?”

 

Alpha

This step involved tackling a layer of complexity we knew we would need, but were unsure of how to solve just yet: data comparison. The default setting of the analytics portal would clearly show performance results for your entire user group, but we also needed to allow clients to dig deeper – how does a particular segment of the company stack up against the overall average? How about the team in one city versus another? Did Marketing get through the course more easily than Accounting?

And so a dedicated ‘Compare Mode’ was born. You’ll see here that it began life as a fairly large and complex module on the right side of the screen. We soon found ways to streamline this for the Beta though…

 

Beta

Anonymous user testing sessions, based on a clickable version of the black and white Alpha designs suggested that we were largely on the right track, but there was still some confusion regarding our Compare Mode feature.

Then it clicked: Compare Mode is just a fancy way to use the filters! So the designers developed a way to merge the Filter and Compare functions, all based on arranging filter “tags” in the left sidebar. The rest of the cycles were spent reducing the page count to a minimum and ensuring clear nav.

Besides giving feedback at all of these steps, I also created the site map in order to capture the full complexity of the data that could come in and out of this tool, and the pages needed. This freed Danny and Jason up to focus on the layout and eventual styling of the pages for maximum clarity.