Course Visualization
Introduction
The UC Davis Catalog provides a list of classes a student needs to take to complete a degree for every major and minor. However, this list does not highlight all the prerequisites necessary for each of those classes. UC Davis’ Schedule Builder, only shows classes for the current and upcoming past quarter and Oasis does not show prerequisites. Course visualization is a partner project project with course planning, both teams worked with our stakeholder Matt, who is a UC Davis faculty.
The Team
Leads
Chris Gaw
Shruti Sengottuvel
Designers
Britney Sun
Youngki Moon
Developers
Catherine Chen
Kaitlyn Vo
Brandon Zarate
David Song
Vikram Penumarti
Timeframe
Oct 2023 — Jun 2024 | 22 weeks
Tools
Front-end: React.js, Next.js, React Flow
Back-end: MongoDB, Node.js, Express.js
Design: Figma
Design
Research
Our research was guided by the following objective: “to learn more about student needs when scheduling classes to fulfill their academic goals.”
During the process, we conducted multiple phases of research:
- Collected 31 surveys
- Conducted three 15-minute user interviews
- Performed market research on existing Davis websites
- Created user personas to better understand our audience
Through survey and interview questions, there were common pain points from students when describing their degree planning experience:
We found that our student groups could be categorized from different levels of experience with academic scheduling tools. To reflect this, we created two personas for students with different major goals and frustrations.
Our Key Findings Include:
- 48.4% of students reported feeling unsatisfied of current tools and resources provided by UC Davis to track degree progress.
- Students typically only utilize schedule builder at the start of each quarter when scheduling classes. Whereas to ensure that they are on track to graduate, they rely on tools such as OASIS and MyDegree. Both of which have inaccurate information at times.
- Students highlighted degree worksheets and prerequisite information as the two main needs in a scheduling platform.
Applying our research to future designs, we wanted our designs to address the problems brought up by students. To do so, we wanted to prioritize the design of intuitive and reliable degree worksheets, accurate prerequisite tracking, and a seamless integration with existing scheduling tools to enhance the overall user experience and ensure students can effectively plan their academic journey.
Initial Sketches
Following our initial user research, we digitally sketched various screens for the application. Above, are examples of our home page and visualization tool as we first began to brainstorm. During this stage, we were mainly trying to think about how to orient classes on such a complicated degree web.
Lo-Fi Stage
When transferring our sketches into low fidelity designs, we continued to experiment with new layouts to display courses. At first, utilizing a vertical orientation seemed to make more sense when thinking of a “pathway” in our heads. However, we realized that a horizontal layout allowed for a more comprehensive overview of an entire academic plan when scrolling on a computer screen. Key changes that we implemented by the end of this stage was: (1) including horizontal arrows to connect each course in a pathway (2) labels to indicate categories of classes.
Mid-Fi Stage
Above is our finalized frame for the mid-fi stage and things we have changed throughout this process was deciding between the horizontal and vertical view of the visualization tool. Going into what features are shown in the mid-fi frame is the top portion displays the student’s name, major, minor, and overall degree completion percentage. The middle section allows students to filter the courses displayed based on whether they want to see design courses only or all courses. Below is a list of courses that the students can take with markings to show if they have completed the course or if they are currently enrolled in it. We also designed a navigation bar that was shared with the course planning team so that we could start the process of combining the two teams together.
Above is the home page that we worked on with the course planning team’s designer and the goal of this home page was to show both the tool’s key features as well as our mission that explain what this web application plans on achieving for the users.
This frame was created to allow students to change their majors/minors to visualize the percentage they are at with completing a specific major and minor, as well as, being able to see what courses that they have already took fulfill a certain major requirement.
Design System
In order to pull our brand together, we collaborated with our sister team “course planning” in order to develop a cohesive design system composed of the following: typography, colors, and icons. The final product reflects the gold and blue colors of UC Davis in order to provide a familiar feeling to students.
Final Designs
This is our final hi-fidelity frames for the course visualization tool and features that were slightly modified were adding the description of each column on the tool and adding a box in the “edit degree information” page to help create a list of all the added majors and minors. We also conducted mock user tests to help us visualize what it would look like when we use different majors/minors.
Development
Software Architecture
The front-end of our project is managed by React and Next.js. The authentication is using NextAuth.js, which uses email and password for the credentials. The back-end is managed by Express, where API requests are sent to MongoDB to store and retrieve data. MongoDB is our database, which store data such as our user, chart, course, and department information.
React Contexts
Throughout the project, we used React contexts to propagate and update data between components. We are able to initialize, add, edit and delete information and communicate that change throughout all components. The main object we needed contexts for was the User object.
Edit User’s Major
Users can edit their major(s) by clicking on an icon next to their current majors in their profile. They will then be directed to a page where they can add or delete majors, and search for other majors with a search bar and B.A./B.S filters. The user’s information in the database will be updated upon clicking the update button.
Reactflow
We used Reactflow to represent the user’s graph containing all their requirements. Reactflow offers extensive customization options for individual nodes, giving users many choices for their layout. This high level of customization allows users to be creative with their graph, or they can opt to use the default template if they prefer.
Generate Chart
We also created backend routes to recursively find and generate a list of all prerequisites for a specific class for the visualization tool. These routes have to be recursive because we needed to find the prerequisites for the prerequisites, if there were any. For example, in the image below, DES 112 has prerequisites DES 14, DES 15, and DES 16. These three prerequisite classes also have a prerequisite of DES 1.
Takeaways & Challenges
Designer Takeaways:
- Collaboration is essential and interactions are expected: Through this project, we learned that we should always be prepared to iterate designs based on feedback from developers and stakeholders
- Technical feasibility: Knowing that all design ideas can’t all be translated perfectly into code and being open to finding solutions within technical limitations is important.
- Stakeholder priorities: Balancing the needs of the user with the goals of the stakeholders is important.
Developer Takeaways:
- A challenge many of the developers faced was learning new technologies. We learned how to create schemas for the back-end, how to create scalable vector graphs for front-end components and learn how to add user authentication to the project.
In addition, thank you to our stakeholder Matt for guiding us throughout the project.
