Tracking Academic Progress on CalCentral

Academic Progress Report and planner redeisgn




Product Design, UX Research,
Front-end Program Demo
July, 2022 - August 2022




Chenyi Zhang, Mingxiao Wei
PC Web Application
UX Research, Wireframe,
Hi-fi Mockup, Program Demo,
Figma Prototyping

Design Background

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, but lots of students are still having problems on monitoring and planning academic progress.

Around 25% students are spending longer than four years to finish their bachelor's degree because of lacking assistance in academic planning and tracking.

Academic Progress Report in CalCentral


What's wrong with the degree tracking and planning?

Current Painpoints

Diverse academic program plan and flexible major switches make it hard to tracking and planning academic degree in advance for students. Over 20% of undergraduated students, now are taking an extra semester or extra years to finish thier degrees. (The most recent four year greatduation rate is 76%)They need help from the campus to help them track and plan thier degree progress.

Users' Needs

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


So, what exactly is the problem?

Who are our users?

Before we started user research, I proto a lightweight user persona to screened out our target audience for Academic Progress Report. We also get a better understaing of our user's motivations and needs from the persona.

Semi-structured Interview Synthesis

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


Building a new academic progress report for students!


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

I sorted out three main features from the brainstrom, 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 are seems sequential, several datas are required in both of them. And for current APR and degree planner, 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

Heruistic Evaluation

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

Usability Tests

We also conducted usability tests with students twice and refined our design beased on the tests' results. Here are Two main synthesises we found from the tests. After that, I refined our deisgn according to the feedback we recieved.

1. Multiple navigation bars are confusing for users

Users are confused with two back button on Academic - "back to academic dashboard" button and "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 fisrt land on the academic planner page, the alert badge can't attract their attentions. For one participant with color weakness, he can barely see the red and green color difference for alert message and safe message.

Design Decison

Tracking Degree Progress with Visualized Data

Supportive Resource for degree planning

We also added a Academic Path Resources card at the academic planer page, which provide several links that students always use currently when they are doing  academic planning.


So, what exactly is the problem?

Students Feedback

“The visuallization, especially the prograss bars are very helpful. ”

Academic Progress Report

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


What I learnt from this project

What would I do differently?

1. Let developers involve in the design process at 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. Collaboraing with developers at an early stage could make the design process more efficient.

2. Evaluate design system before start design.
We spent a lot of time on issues caused by the design system, such as the warning message and styles of card. 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 plan.
Although we add a Graduation Term card on the academic path planner, we didn't dig into the design of the tracking of units requirement card. There are also some technologies difficulties behind tracking the require units lively should be condisered 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 understands the needs and motivation for them to use APR and academic progress planner, and take further design action to imporve academic progress report.