IXL Diagnostic

This project was a data-intensive, new feature we wanted to add to the analytics tools available to teachers. I was the primary visual designer working with several senior and associate product managers. The goal was different than the standard analytics that already existed in the product—we wanted to present this new metric by which students’ progress and learning was measured.

We started with sketched wireframes of each section—an overview page, and individual subject pages—to turn the general ideas into something visual we could dissect, move around, and refine.

Preliminary wireframes of the new diagnostic.

Once we had a general direction for the individual subject dashboards, and a hierarchy of the data with which we knew we would be dealing, we moved onto lower-fidelity mockups exploring a wide range of interface elements and ways of presenting the data in an easily-digestible overview:

The low-fidelity mockups allowed us to see what worked, and what was simply distracting or otherwise unnecessary. As we refined the important UI elements, we narrowed in on an interface that showed only the data we deemed important.

In addition to the static data you would see on first load, we tested interactions to show multiple levels of information and alleviate certain edge-case UI issues, ie. no data yet, groups of students with similar/same scores, etc.:

Hover exploring some edge-case interactions.
Some context-specific hover candy.
The oft-used no-data state.
Multiple levels of data shown on hover.

With the data points and hierarchy in a good place, we refined the look and feel of each round of mockups to achieve a modern, professional look that would still be inviting and fun.

In the end, we came out with a fantastic new feature that received positive feedback from teachers. The UI continues to be refined and tweaked as feedback is received and new features are developed.

It was an educational experience dealing with so many minute data points, and the challenge of presenting them in a way that was logical and easy to parse, as well as visually engaging.

The final product of the initial design.