Portfolio Home
More Projects

Product Design for Illume Students

Powerful Predictors Chart Redesign

Civitas Learning

by Julia E. Durall
ILS Powerful Predictors Chart after redesign


Civitas Learning creates software for the higher education industry, which enables institutions to use machine learning with their existing data to identify the best ways in which to improve student outcomes such as retention and graduation rates.

The Illume Students product is intended to provide insights to the institution regarding which student groups are succeeding and which need special attention to help them persist. This is done both through filters and what we call “Powerful Predictors”, which are a compilation of frequently used criteria that can be a shortcut to insights.

The Powerful Predictors chart is a focal point of the results of these inquiries, and it needed an update for accessibility and better usability, as well. I worked on the design for this with guidance from a senior designer on our team.

ILS Chart original design

Updating Fonts

Since much of the accessibility was centered around the text being too small, I decided the first priority was to increase the font sizes throughout, also making sure that the contrast level was high enough. These are the notes I made for the front-end developer regarding how these updates would look.
(Click to enlarge)

ILS Chart Font Updates

Changes to Data Representation

Next, I worked on the visual design of the various chart components, beginning with the data lines. I was instructed to continue with the style of chart that we already had, but was given the liberty to make changes within that style. After doing some research regarding colorblindness and how charts are perceived, I felt that the lines were too thin and the data point symbols were too similar. This led to a series of explorations with different line colors and symbol shapes. The first version that made it into the product used our "Civitas Blue" as the blue line. After a while, though, we decided to change it to a darker shade, which was the same blue we use for our buttons and links.
(Click to enlarge)

ILS Chart Line Updates

A New Concept for the UI

While adjusting the layout of the legend and labels, I designed a new interaction on the chart. Since one of our goals was to get the user to insights more quickly, I felt that it would be beneficial to highlight the points of highest and lowest persistence. After speaking with one of our user education experts who trains new users on the product, he suggested that it was a good idea, but that he didn’t think it was a priority. Our product manager agreed because it added complexity that our development team didn’t have time for, so we didn’t go with the idea.
(Click to enlarge)

ILS Chart New UI Concepts

Data Box Updates

The original data box, which pops up when you hover over a data point, wasn’t accessible and didn’t convey what users wanted to know most. I consulted again with our trainer to find out what the users really need to know, and discovered that the most important data was hidden at the top of the box, in small type that was obscured by information that was less important. Rearranging this hierarchy then became my priority. At the same time, I wanted to coordinate the visual design with the updated chart design because I felt that the dark box was too heavy.

After several iterations, I presented my work to the product manager and the developers and they were all on board, with a note to increase the drop-shadow to add more distinction between the tooltip and the chart. However, it would be at least two sprints before it would be worked on. This wasn’t seen as a higher priority than some other work we were doing, so it kept getting put on the back burner.
(Click to enlarge)

PP Chart Final Design

Fortunately, the delay gave us an opportunity to reassess the design before it was implemented. I met with the product manager and senior designer on my team to go over it again, and the designer had recently done research on tooltips. He said that the current best practice was to have a contrasting background to separate the tooltip from the chart. Then, we discussed whether or not all the information from the original box needed to be there. We concluded that the “Persistence Rate” and the “Distance from Average” were the most important pieces of information, and that the number of students was secondary and not required. So, I simplified the contents of the box to show only those components, and adjusted the colors to match our other tooltips, which had a darker color scheme. I was pleased that the smaller box made the darker color seem less heavy than it originally did.
(Click to enlarge)

PP Chart Final Designs

Final Design

These designs were implemented in stages by one of our front-end developers over the course of three production sprints. When the time came to implement the data box design, our regular front-end person was out of the office, so a different developer was filling in. She and I worked together to make sure her work lined up with mine, and we added text-wrapping to accommodate longer labels than I had in my mockups. After the design went into the staging environment, it became apparent that the label wasn't needed and the overall scale was too large, so we made one more adjustment before finalizing the work for production. Later, in a subsequent sprint, we were able to add a link to a tutorial video to help our users better understand the chart.
(Click to enlarge)

ILS Powerful Predictors Chart

See below for the chart in context of the entire home page of Illume Students:
(Click to enlarge)

ILS PP Chart on Laptop