Portfolio Home
More Archived Projects

Product Design for Degree Map

Explore Degrees Results Screen

Civitas Learning

by Julia E. Durall
Explore Degrees Mockups


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 “Explore Degrees” section of our Personalized Pathways product had been problematic for quite some time. We had progress indicators that showed the students’ estimated percentage of completion toward a potential degree. These were designed as cards which could be clicked on to proceed to a full comparison of current progress toward that degree. However, because the percentages were only an estimate, it was confusing to our users when they would get to the next screen and see that the percentage didn’t match.

My role: UX/UI Designer

Goal: Reduce confusion on Explore Degrees page by eliminating percentage measurement and replacing with a different visual element

Timeline: 2 sprint cycles, 6 weeks total

Techniques used: Visual design with Sketch, Prototyping with InVision, Communication with Slack and Zoom

Challenges: Ambiguity of goal and lack of access to customer to test concepts

Explore Degrees Original Design

Explorations & Limitations

Over the course of this project, I communicated with the UX design team via Slack and also met with the product team at our weekly scrum meetings to get feedback on the multiple iterations of this design.

The general goal was to create ambiguity regarding degree completion, with little guidance to start with. I refined the concepts upon presenting the work to the product manager and other designers on the UX team.

Explore Degrees Early Concepts

Design Iterations

I narrowed down my early concepts with the help of another designer on my team to what we felt were the three strongest options, and provided these to the product manager to present to our partner/user.

Explore Degrees Round 1 iterations

After the first round of designs were presented and discussed, the product manager came back with feedback that they were close, but not quite there. She then requested three specific types of iconography to show the degree progress in gauges. These were a funnel, a circle, and square or rectangular segments. I presented these to the other members of the UX team, and we agreed that some of the gauges looked too much like volume indicators, and there was difficulty identifying the pattern of progress I'd created with the circles and squares.

Explore Degrees Progress

After some refinement, we presented these 2nd round concepts to one of our "power users". I sat in on the partner call to discuss these designs, and some of the feedback was that the icons that were segmented into four sections were assumed to be grouped into years of study (i.e. freshman, sophomore, junior, senior). For this reason, we concluded that three levels of visualization would be ideal.

Explore Degrees Round 2 iterations

More refinement was necessary at this point, and I played with the rectangular bars to make them look less like volume indicators. This resulted in squares, rather than bars, which were well-received by both the design team and the product manager. This third round of designs is what was presented to the product manager for approval.

Explore Degrees Round 3 iterations

Once these had been fine-tuned and mocked up for presentation, the users reacted most favorably to and ultimately approved the grouping of three squares in a horizontal row. In this submission, we also needed to provide verbal descriptors for the levels of progress that would resonate with our users. We chose to keep the language positive to provide encouragement to students who might not be far into their degree plans, which ruled out terms like "zero" and "no". This was a joint effort between myself and a couple of the developers on my team.

Round 3 Partner Submissions

Additional Designs

After implementing the approved icons into the design, I discovered that the card layout we’d been using wasn’t ideal for presenting this information. After doing some research, I confirmed that this data would best be presented in a list. This worked better for the icons we’d chosen, as well. Making this change created a domino effect, which led to a new layout for the screen, and a toggle to switch back to the original card format, which was requested by our users. For the toggle, we ultimately based them on the Material Design style guidelines.

Explore Degrees Table Grid Toggle

Final Designs

The designs approved by our Product Manager and partners are shown below. The table allows for sorting via the column headings, whereas the grid view required an additional dropdown to sort. We again used Material Design to guide the look of the dropdown, which is used throughout the application. These designs were implemented in the following sprint, and are now available in the product with the default view being the new table layout. (click to enlarge)

Explore Degrees Final Designs

Explore Degrees on Laptop