Project 3 - Catalyst Redesign
Project 3 - Catalyst Redesign
Embedded Files
Project Description
Project Description
In our project, created in Svelte and JavaScript, we designed an updated interface for the My Academics page within Catalyst. We first researched and defined the issues within the current interface, and then correlated these results to define a clear set of design goals. Following this, we implemented the design goals into the specific components of the interface.
Project GitHub Link: https://github.com/pbuterba/cs5167-proj3
Public Application Link: https://cs5167-proj3-catalyst.netlify.app/
Click the link above to view the design work for this project!
Click the link above to view the interface description and functionality!
How We Implemented this Application
Components
To better tailor our project’s core components, we decided early on to develop a concise yet versatile component library. This library includes elements like custom buttons, popovers, text inputs, checkboxes, accordions, and more. Some of these components are simple wrappers around existing HTML elements with added styling, while others are entirely custom or enhance an element with a unique visual touch. The components are defined in an npm package, called kiwi-nl.
By establishing this component foundation, we significantly sped up the implementation of multiple layouts in our interface. Our final interface required two distinct utility pages, and we divided the workload, with each team member responsible for building different sections of the pages. With a shared library of components that would be used across all pages, we didn’t have to worry about visual consistency as long as everyone utilized the same elements. This approach not only saved us a great deal of time but also ensured a cohesive look and feel throughout the project.
Libraries and APIs
This project uses the Event Calendar library for the implementation of the calendar. This library is used for displaying the calendar on the landing page of My Academics. The GitHub site can be found here.
Additionally, this project uses the Circle Progress Bar library for the implementation of the progress circle. This library is used for displaying the percentage of academic completion shown in the flyout. Online documentation can be found here.
Use of AI
Chat GPT and GitHub Copilot were used throughout this project for simple debugging, boiler plate code implementation, and general data creation.
Data Infrastructure
Our infrastructure model consists of three preset datasets: schedule data, student data, and tab data. The schedule data is utilized in the calendar component, the student data in the flyout, and the tab data along the header. This project did not include any global stores like our last, as there is little data manipulation done throughout the redesign.
Future Work and Ideas for Further Implementation
Redo each subpage within the My Academics page in Catalyst, not just the Academic Progress section.
Completely redesign the entire interface of Catalyst, not just the My Academics landing page.
Include a section with quick links or favorites that the user can set for their most used or most active tabs.
Give the user feedback and alerts about scheduling deadlines, holidays, university closings, or other important dates and events.
Include a customizable dashboard in which the user has options of layout, color schemes, and other design elements.
Remove lesser used options or make them more difficult to find to give more prominence to more frequently used options.
Add options to search for elective options directly from “Academic Progress” page.
Add an option to scroll forward to future semester schedules, which gives an option to register for classes for that semester if not done so already.
Demo Video
Page updated
Google Sites
Report abuse