Catalyst Degree Audit Redesign — Project 3
Anne Ning, Amogh Silaparasetti, Jack Detrick, Jonah Carter, Kevin Long
Catalyst is notorious for being a nightmare to navigate and use. From broken buttons, random log outs, and an absolute mess of an interface, it has more than its fair share of usability problems.
As a result, when possible, people tend to avoid it like the plague.
This is a shame because, if you can get past all its quirks it actually has a lot of really useful tools and information.
One of the most useful pages, especially for Seniors like us looking to graduate soon is the Degree Audit page. This page provides an overview of the credits you have fulfilled so far and a list of what you still have left to graduate.
Since this page is so potentially useful to us now, this is the page we decided to redesign.
Design Stage
We performed interviews with students who’ve used Catalyst and gathered several responses. These were utilized in some of our design decisions:
| Interview Response | Design Response |
| Slow to access information (too much scrolling) | Easy to access views where different information categories are presented. |
| Information is dense and there aren't a lot of visual cues to differentiate GPA, Classes, co-ops, etc. | Separated the categories of classes into cards (missing classes, in progress, completed), and listed the individual classes separately within those cards. |
| The header was helpful, but too much information in too little space. | Converted header into a homepage with separate sections for missing and in progress classes. Also included a diagram to help visualize the information. |
| The interviewee wanted a separation of categories for the classes. | The sidebar was implemented for easy navigation between separate categories of classes. |
The two images above were two of our individual sketches. After presenting and discussing each of our sketches, the group worked on and finalized the sketches shown below.
The two images above show our late-stage sketches. We combined our individual sketches and discussed what we’d like to see in the redesign. Some of the key features include the “cards” showing summaries of your missing/in progress classes. As well as the sidebar, which allows for easy navigation between multiple views.
From these sketches we moved onto our Figma prototype:
We retained the sidebar navigation and the card-style summaries of the classes. We updated the navbar to fall in line with other UC applications (logos/symbols), and we also ensured we followed all of the UC color guidelines. The views for missing/in progress/completed classes are very similar. This was intentional as we didn’t want any jarring switches when selecting different views. We envisioned this as a more global redesign for catalyst, so we would assume other pages would follow the styling we utilized.
The App
In the home page, the users get a quick overview of their missing courses, in progress courses, and the pie chart indicating their degree progress. The navbar and the menu are at fixed positions even if you scroll down.
The back button on the navbar allows the user to go back to the last page before the current one.
In the side menu, users can navigate to other pages. The planned classes button pops up the link to UC Create my schedule in a new tab.
In the missing classes, users can look at the courses that they were supposed to take during previous semesters. Currently, the popup icon on the courses cards pops up the search for classes page in catalyst in a new tab.
In the future classes page, users can keep track of the classes they need to take on their upcoming semesters. The courses are sorted by the semester starting with the next semester on top.
In the completed classes page, users can keep track of the classes they have taken starting with the previous semester on top followed by the previous semester respective to it. The courses in this page also indicated the grade student got, number of units, professor, and when the course was taken.
View our demo video below!
Implementation Details
We implemented our app using SvelteKit.
We added the official UC colors from the branding guidelines as color styles in Figma and then created reusable components to keep our design consistent.
We used the Google Material Symbols for our icons.
Our pie chart uses D3 and is based on this example code.
We have a consistent layout with the navbar at the top and page navigation on the left.
Future Work
There are multiple things that we would love to implement if we had more time:
Add a search bar to search for courses
Integrate the database into the app
The courses will open their respective course details in catalyst on a new tab.
This is a part of a larger redesign of the catalyst. So we would update the pages to follow the same styling used here.
