While working at Atomic Jolt last March, I was onboarded to a new client project. Initially I was in my native development role, but our designer became tasked with too many projects. As a result, I was asked to evolve within my role and pivot tackle both design and development for the project.
The client for this specific account was the U.S. Air Force - more specifically their academy, Air University. As many other organizations do, this university heavily relies on Canvas as their learning management system. The client approached our team with a request for a different, more intelligent tool. They hoped for an interface designed to gather metrics on student and teacher activity that would then display the information in a digestible and helpful manner. The intent of this tool was to better understand the effectiveness of the curriculum and instructor engagement. These specific metrics included time logs, scores, number of assignments completed, etc.
This project consisted of two main phases: the design phase and development phase. At the start of my involvement in the design phase, I received a laundry list of metrics and analytics the client wanted incorporated.
Available Metrics Spreadsheet
A major highlight of this process was the amount of discussion and debate around how to best implement and account for information hierarchy. Between the nomenclature and sheer amount of data, this was a daunting task. Our main breakthrough came as we discussed the opportunity we had to modularize the all the information users could access. Over the course of a few weeks following this discussion, many of my hours were specifically dedicated to sifting through all of the available content and better understanding the purpose it could serve the user.
With the client’s approval, we landed on the implementation of a dashboard filled with interactive and dynamic cards, with three specific types of cards. The first card elements we introduce mimicked a widget, but they were crafted with intentional design and new capabilities to display and filter through a near hundred different metric buckets.
The second card we pushed was dedicated to processing average scores and contrasting them with other adjacent metrics.
Our third card element was a trend card. This card was designed and developed with the intelligence to communicate a series of values over any given period of time.
Metric Visualizations
By the end of the project, I had established a framework that displayed each metric in a simple, easy to process manner, as opposed to the original that would quickly overwhelm anyone who interacted with it. In addition, I took the design work that was passed along to me and implemented a component system to unify the project and ensure consistency across all the design elements.
Metric cards with real data
Once we had all of this designed and refined, I was able to deliver a prototype to the client. This prototype is fully interactive and showed the all the intended, new functionality.