Project 3 - Catalyst Redesign: Interface

Interface Description

The goal of our interface was to provide a simple, more organized My Academics page in comparison to the current output of Catalyst. After analyzing the flaws of the interface and defining our design plans, we defined the following as our redesign plans:

• The Catalyst redesign will remove any unnecessary features a common undergraduate user will not need. 

• The Catalyst redesign will consist of formal, standardized fonts, elements, and features that are consistent throughout the entire application.

• The Catalyst redesign will include simple navigation frameworks to move from one section to the next, with an easy way to move back to the home page as well.

• The Catalyst redesign will highlight the components noted as most used within the survey, such as calendar, GPA, and grades. 

• The Catalyst redesign will include a progress section showing the percentage of classes taken and what classes should be taken next to stay on track, as indicated by the interview results. 

• The Catalyst redesign will include clear instructions and helpful pop-ups to help the user navigate within the system, reducing complexity.

We designed the landing page of the "My Academics" page in Catalyst, along with a subpage titled "Academic Progress". The details of the features are defined below.

Our application contains two different pages, the landing page of My Academics and the Academic Progress page. Within the My Academics page, the following components are described in detail below: the header, the calendar, the class list, the flyout, and the curriculum progress graph within the flyout. Additionally, the Academic Progress page is described as well. 

The Header within the My Academics page contains a home button, the My Academics title, several drop-down tab options, and a profile button. It lies within the layout page of our implementation, so it remains consistent across all pages. 

In real practice, the home button would link to the main landing page of Catalyst. For simplicity and to avoid the Catalyst authentication window, this has not yet been implemented. 

Each overarching dropdown tab represents a real tab within Catalyst with variation to fit the user defined needs from our research. Several of the links, such as anything relating to the medical and law degree programs, were deemed not usable by common undergraduate students, and therefore removed. Additionally, many links were combined or renamed for simplicity. For example, the Calendars and Deadlines tab was altered to Student Tools, which includes a link to the university calendar page. Also, the Graduation/Commencement tab in Catalyst was removed, with the idea that once a student is eligible to graduate, the tab will populate to reduce clutter when it is not yet needed.

Finally, the profile button opens a flyout on the page containing student specific details. See the flyout component section below for more information.

To display a student’s class schedule, we drew inspiration from Catalyst’s ‘schedule’ view, which is one of the platform’s most frequently used features. Recognizing its importance, we prioritized making this functionality prominent, user-friendly, and visually intuitive. Our goal was to create a streamlined experience that delivered all the essential information users value, as confirmed by our research.

The foundation of this feature was the event-calendar library, which provided extensive customization options. This allowed us to integrate a robust, calendar-based component without having to develop the intricate functionality from scratch. Although the library is designed as a full-featured event planner, its advanced capabilities exceeded the needs of our project. To tailor it for our use case, we implemented custom modifications to disable unnecessary features.

The final product offers a clean and intuitive weekly view of a student's schedule for a selected semester. To make it easier for users to quickly identify their classes, we implemented a color-coded scheme, enhancing both functionality and the overall user experience. The calendar also highlights the current day and time, providing users with a convenient visual cue for upcoming classes.

Our research revealed that the calendar sections on Catalyst often included irrelevant information, which cluttered the interface and distracted users from what they needed to see. To address this, we streamlined the design by surfacing only the most essential details directly on each class card. For additional information, we added an interactive popover that users can access for further details, ensuring the interface remains clean while still accommodating deeper insights when needed.

We also introduced a simple and efficient way for users to switch between semesters, making it easy to view upcoming courses or review classes taken in previous semesters. This functionality provides users with greater flexibility and accessibility, significantly improving the user experience compared to the current system’s implementation.

This component displays the student’s classes for the current semester. Hovering over the information icon shows more information about its corresponding class. The class list updates when the student changes the displayed semester for the Calendar view. The class list is being populated from the preset student data in PresetStudentData.js. It should be noted that some classes appear in this list multiple times to account for how many days of the week it is scheduled. To account for this, the class list component checks for duplicates in the list, and merges the duplicates so that they only appear once. 

The flyout component is used to store important information pertinent to the user. Our research dictated that personal student information, such as GPA, are referred to most often throughout the academic . Therefore, the flyout serves as a one-stop place to store all academic and advisor information. The flyout is defined within the header, so it is available across every page in the implementation. The flyout also contains the percentage of curriculum progress completed in a graph, which is described below. Beneath this graph, a button labeled View Progress links to the Curriculum Progress page. 

This component, which is homed in the flyout tab, displays the current percent of classes the student has completed for credit towards their degree. This component is inspired by the Svelte Circle Progress Bar example in Svelte Docs. Enhancements made from the existing feature include displaying the percent complete inside the circle as well as adjusting the colors to be consistent with the color scheme of the site. This component does not take the currently viewed semester into account and displays the cumulative total complete. This design decision was made for the sake of overall clarity. 

The Curriculum Progress page can be accessed by selecting the profile picture at the top to open the student’s general academic information, and selecting the “View Progress” button beneath the progress circle which shows how far the student is towards completing their curriculum.

The Curriculum Progress page shows the student’s full curriculum laid out chronologically, with an accordion layout for each academic year, and columns in each accordion for each semester. Each elective requirement is slotted into the schedule in its recommended location, so that the student can see the recommended schedule for each semester, as well as which specific classes, and elective options are a part of the curriculum.

Each class listed in the curriculum shows the class name and number, as well as its current status. The status is indicated both in text at the bottom of the tile representing the class, and with a colored indicator on the left side of the tile. Green indicates that a class has been completed (the student has passed the class, in which case the student’s final grade is also shown). 

Blue indicates that the class is currently in progress (the student is registered for the class during the current academic semester), while gray indicates that the student is currently registered for the class in a future semester. Finally, purple indicates that the student has yet to register for that class (or potentially has registered in the past but withdrawn or failed the course). 

There are different types of classes that may be represented in a student’s schedule. The most common kind are specific, major classes, which are particular classes that the student is required to take. Some curriculum requirements however, allow the student to choose between a few different class options to fulfill the requirement. Electives and BoKs allow the student to pick from a large variety of classes to satisfy the requirement, which may vary from semester to semester. For these latter two categories, if the student has already fulfilled that requirement, the number and name of the class used to fulfill that requirement will be shown underneath the name of the requirement (as seen above with a “Breadth of Knowledge Class” that is currently in progress. If the student has yet to register for a class that fulfills the requirement, no specific class will be shown. For requirements that have a couple of standard options to fulfill them (such as Science Elective or Senior Design), a list of the acceptable classes is shown. For electives and BoKs which have an impractically large number of classes that satisfy the requirement, which may change from year to year, no list is shown, instead just the words “To be fulfilled”. Examples of both are pictured below.