Tracking Academic Progress on CalCentral

Academic Progress Report and planner redeisgn





Jul. - Aug. 2022
Web Application
UX Lead: Rachel Hollowgrass
UX Research, Wireframe,
Hi-fi Mockup, Program Demo,
Figma Prototyping
Design Overview

Preview And Full Display

The report includes a navigation tab positioned at the top, enabling users to easily switch between various academic plans. Within each plan, the use of accordions effectively communicates the satisfaction status of individual requirements. By collapsing excessively detailed information, the accordions prevent overwhelming the users with unnecessary content.

Visualizing Progress Data

Visualized data aids students in efficiently and directly tracking and comprehending their academic progress. The visualizing methods we applied include progress bars, histograms, pie charts, and ring bars.

Status Tag

To assist students in quickly identifying unsatisfied sections, each section and degree is labeled with status tags. By providing clear and direct visibility of unsatisfied sections, students can prioritize their efforts and focus on addressing those specific areas in order to meet the necessary requirements.

Graduation Time Warning Card

On the academic planning page, we have introduced a Graduation Warning Card that provides an estimated expected graduation time for students based on their academic history. If a student's projected graduation time exceeds four years, a pop-up window will appear when they open the degree planner. This feature aims to alert students about potential delays in their graduation timeline, allowing them to proactively address any issues and make necessary adjustments to their academic plans.

Supportive Resource Card For Degree Planning

We also added an Academic Path Resources card on the academic planner page. This card includes a collection of frequently used links that students often refer to during their academic planning process. Students can easily navigate to important tools, guides, or information that can assist them in making informed decisions about their academic path from this card.

Design Context


CalCentral unifies the once-confusing online Berkeley experience for students, instructors, and staff. CalCentral brings together student data into a personalized, mobile-friendly dashboard and digital assistant, drawing from dozens of campus sources. 

CalCentral already has a student academic progress report and academic progress planner, but lots of students are still having problems on monitoring and planning academic progress.

Previous Academic Progress Report in CalCentral

🤔 So, What's the problem?

Around 25% students are spending longer than four years to finish their bachelor's degree

Users' Needs

Improvement in the Academic Progress Report and the Degree Planner can make degree tracking and planning efficient.



Before commencing the design phase, I created a lightweight user persona to identify our target audience for the Academic Progress Report. This persona served as a valuable tool in screening and understanding our users' motivations and needs.

Semi-structured Interview Synthesis

After drawing the persona, we conduct interviews with five students to get a better understanding of the progress-tracking problem. Here is the problem that we found.

Design Process


After the user research, I did a brainstorm to conclude features that students need and draw a task map for tracking degree progress and making academic plans.

I sorted out three main features from the brainstorming, which are
1. Tracking degree progress
2. Identify unsatisfied sections
3. Making academic plans for degrees

I also drew this task map of tracking degree progress and making academic plans. Even though these two main tasks seem sequential, several pieces of data are required in both of them. And there are two pain points.

1. To finish all tasks, users have to navigate back and forth.
2. Users can not find the graduation requirement directly on APR


After that, I draw a wireframe based on three main features, data visualization ideas, and the task map.

Heuristic Evaluation

After I finished the first version of high-fidelity screens, we conducted a Heuristic Evaluation base on the NN Group's 10 Usability Heuristic Principles. We found several issues on the wireframe and revise our design according to those issues.


After I finished the first version of high-fidelity screens, we conducted a Heuristic Evaluation base on the NN Group's 10 Usability Heuristic Principles. We found several issues on the wireframe and revise our design according to those issues.

Usability Test

1. Multiple navigation bars are confusing for users
Users are confused with two back buttons on Academic - the "back to academic dashboard" button and the "back to academic progress report" button

2. The Alert badge is not alert for users and didn't fulfill the requirement of accessibility
When users first land on the academic planner page, the alert badge can't attract their attention. For one participant with color weakness, he can barely see the red and green color difference for the alert message and safe message

Reflection & Learning

What would I do differently?

1. Let developers be involved in the design process at an early stage.
Lots of our ideas on visualization were inspired by developers. They gave the UX team a lot of suggestions on how to illustrate data and what kind of graphs could be coded. Collaborating with developers at an early stage could make the design process more efficient.

2. Evaluate the design system before starting the design.
We spent a lot of time on issues caused by the design system, such as the warning message and styles of cards. We had to revise the design system and the design of the academic progress report at the same time. If we had a chance to redo this project again, I would evaluate the design system when we found the first issue caused by the design system.

Next Step

1. Narrow in on live academic requirement monitor when making academic plans.
Although we add a Graduation Term card to the academic path planner, we didn't dig into the design of the tracking of units requirement card. There are also some technical difficulties behind tracking the required units lively should be considered in the design.

2. Interviewing and designing for transfer students.
We didn't interview and consider the needs of transfer students. The reason is transfer students have different academic levels and backgrounds which makes most of them usually don't expect they can still finish the whole undergrad study in 4 years. However, for most of people, finishing college as soon as possible is always good and cheaper. Interviewing them helps us better understand their needs and motivation of them to use APR and the academic progress planner, and take further design action to improve academic progress reports.


Will be iterated more and coded after the new CalCentral launch. 🥳