CalCentral is UC Berkeley's student and staff portal where students can enroll in classes and check their financial aid while staff can check their class roster and assist students. The Pass/No Pass Calculator is an existing form in the academics page of the student CalCentral. Students use this form to determine if they can take a course for Pass/No Pass credit and still have the minimum required units to graduate.
CalCentral aims to simplify experiences for students to better support them in their academic journey. UC Berkeley administrators and some employees at the Berkeley IT departments brought up the concern that students seemed to show confusion when using the existing Pass/No Pass calculator. They were unsure what it was for, what the results meant, and how to use it.
The goal was to create a more effective and intuitive way for students to utilize the form. I was the lead UX designer on this project and worked the senior UX designer and developers.
I worked closely with my team over the course of 4 weeks. The project was kicked off with a meeting with the senior UX designer who conducted user research and usability testing on the form and the developer who will write the code to get a better understanding of the goals and feasibility of this project.
First, I needed a better understanding of the users, their needs, and the Pass/No Pass Calculator.
After looking at the ux research findings, I set out a few new research goals and decided on the best research methods to achieve them:
1. Learn as much as possible about the Pass/No Pass Calculator
heuristic evaluation
2. Understand current form designs commonly used by students
comparative analysis
The purpose of the heuristic evaluation was to quickly and easily find usability problems related to using the form. I used the Pass/No Pass calculator several times while assessing the site against Jakob Nielsen's 10 general principles for interaction design and Jakob Nielsen's top 10 recommendations for website form usability. Below are the key issues I discovered.
The indications of whether their pass/no pass unit meets requirements is unclear.
There is a lot of text on the page that can seem unclear and confusing to read.
The process of inputting values can be time consuming if users want to test out values.
Inconsistencies in terms of how the buttons and input areas work.
There are many variations of forms that calculate grades or that students use. I tried out those forms to see what made the designs intuitive and easy to use and found that:
At this stage, it was time to redefine the goal and narrow down its scope based on the insights.
Students need a form that is easy to gives clear instructions, has consistent actions, and provides clear results so that they can make better informed decisions about their grading options.
With insights and a re-defined problem statement in hand, it was time to come up with solutions and validate them.
I focused on the following improvements when redesigning.
One of the key differences in the updated designs was that form would auto calculate whenever a value was put in.
I met with the developer and my senior UX designer to discuss the new design changes I made. This was the feedback I received:
Using insights gained from design critiques and discussions with the developers, I iterated on the design. The following sections highlight key improvements that were made to the form.
I wanted to make sure the students would be able to easily access information about how the form calculates whether or not they can take a course as pass/no pass.
The original form required that students added in all their numbers and calculating a value before they could see the equations used to calculate it. This meant that the students were unclear about how the calculator works before using it. To address this problem, I wanted to add a space at the bottom of the form to easily give students more clarity and information about the form.
The new form has a show more/show less button at the bottom of the page. Students who are confused about how the form works can easily click on the button to expand for more information. This ensures that the main form isn't overwhelmed with text, but students can still access the information they want.
I wanted students to have clearer indications about whether or not the values they inputted projected a value that met Berkeley's requirements.
The new form now utilizes color to highlight the results of the form. The use of red and green in addition to the checkmark and exclamation point symbol seeks to add more clarity about the results and serve as an attention-grabbing indication of whether the students meet Berkeley's requirement.
Lack of clarity and too much informtion was an issue from the very beginning.
Students were confused about what the form was trying to calculate and what some of the terminology meant.
I added an information icon to the parts of the form that seemed to have the most confusion. Instead of having all the information on the form, it would pop up on the side for more clarity. That would also serve to de-clutter the form for easer navigation.
Some parts of the original form would auto calculate values while the estimation function required hitting the button for calculations.
After students inputted in their values, the original form would auto calculate the total units they would have taken. But the estimation still required students to use the "Estimate Percentage" button, which students didn't like.
I removed the "Estimate Percentage" button to make the form have more consistent actions.
The existing form wasn’t clear enough for students, so I combined the findings from past user research and my own research to redesign a more intuitive and simple form.
The updated calculator form is easier to navigate, provides clear explanations, and is easy for students to use.
In order to further improve the student experience using the Pass/No Pass Calculator, I these should be the next few steps: