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.
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.
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.
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.
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.
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.
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. The design is currently in our staging environment, and we will be removing the text label so that just the range of numbers shows on the top line, as well as scaling down the overall size of the box. I will update the images below once that's completed.