Reporting Dashboard
Codecademy for Business
Context
When Codecademy initially launched its enterprise product, the account services team manually created custom reports that they sent to client administrators as CSVs. These monthly reports included large amounts of learner activity data that admins would often customize within Excel to track learner progress and understand the value of their subscription.
Shortly after, the team launched a user-facing reporting feature that offered admins the ability to track progress and get insights on how effectively their team was learning in real-time.
Problem
The in-product reporting data was limited and, for many of our clients, could not serve as a full replacement for the manually created reports.
While it was possible to answer their most common questions with the available data, the structure of the reports made core tasks overly complex and time-consuming.
Internally, we had accrued significant design and tech debt from solving problems in a one-off manner. We were struggling to introduce new data and functionality to the reporting feature without compromising overall usability.
Goal
Design a scalable reporting dashboard structure that can help admins more efficiently answer a wider range of reporting queries.
Process
Problem discovery and definition
Design sprint workshop
Rapid prototyping
Usability testing
Prioritization
Engineering kick-off
Design refinement
Assumption prioritization
Moderated testing
Iteration
Tools
Figjam
Figma
FullStory
UserTesting
Sheets
My Role
Product design
System design
Workshop facilitation
User research
The Solution
We took a phased approach to deliver incremental value to our users and better inform iteration through continuous learning.
This first phase focused on increasing data availability and organizing it in a meaningful way.
The focus after the initial release would be on surfacing higher-level insights, followed by flexible, semantic filtering capabilities.
A task-based organizational structure
Information is organized to expedite users’ core tasks by meeting their needs within a single view
The default report provides a snapshot of their team members’ usage and recent activities to meet users’ most common needs
Column order and default sort are based on relevancy to ensure each table’s initial view is valuable
Interaction patterns that optimize for large data sets
A fixed first column allows users to read across large data sets without losing sight of the most critical information
Zebra striping makes it easier to read across wider table rows
A flyout overlay will enable users to drill down without losing context
A systematic approach to scaling usable data tables
Core table elements are standardized and built with flexibility to easily accommodate the addition of new information
Components are paired with usage guidance for design and engineering to ensure a cohesive experience