A four year planner for ucsb Students

GauchoGraduate

Team

Selena Zeng, Taedon Reth, John Kim, Jaren Lowe, Chiran Arumugam, Vala Bahrami, Kade Williams

Role

UX Director, Frontend Developer

YEAR

2025

View Site

Demo Video

Github

Introduction

UCSB Students have difficulty planning their courses for graduation long term on UCSB's current registration platform, GOLD. Currently GOLD only allows planning one quarter in advance when the registration period opens.

Timeline

2.5 months.

Current UCSB GOLD UI:

Can only see schedule for one quarter in advance. Cannot see schedule for multiple quarters at once.

Searching for courses must be done on another page.

Progress check must also be run on a different page — Very inconvenient and difficult to read.

User Story: Student

As a student, I want to be able to search for classes to add to my calendar so that I can plan out my schedule.

As a student, I want to be able to add classes to a four year calendar to visualize my graduation path so that I can see when to add or drop classes.

As a student, I want to be able to see if my proposed schedule matches my graduation requirements so that I can stay on track to graduate.

As a student, I want to be able to see if my proposed schedule is possible/likely based on course enrollment history so that I don’t add classes that aren’t offered in a quarter.

As a student, I want to be able to save my proposed schedule to my Google Account so that I don’t lose access to it from a different computer.

Solution

Introducing GauchoGraduate!
Our app aims to allow students to have easier course planning in future quarters and make it easier to follow with more straightforward features. Students can put in their major and create a personal 4 year plan making sure it follows the requirements. Much easier and quicker to use compared to GOLD.

This webapp is built using Next.js on Typescript. Install Node (v23.6.0) and NPM (v10.9.2) first.

Tech Stack: React, Next, Postgres, UCSB API, Google OAuth

Roles and Permission

Restricted the user base to @ucsb.edu. Allowed us to reach only our target audience, which is UCSB students.

Design Process

Reasons behind key design decisions:

Defining the Core Purpose as a 4-Year Course Planner for UCSB Students with a Focus on Graduation Tracking

Many students struggle with planning their coursework effectively, leading to delayed graduation.
The planner provides a structured, long-term view of course sequences, ensuring students stay on track.
Graduation tracking was a consistent high-priority request from users, making it a critical feature.

Emphasizing Intuitive Drag-and-Drop Functionality for Course Planning

Users wanted a user-friendly and flexible way to adjust schedules without complex manual inputs.
Drag-and-drop interactions make schedule modifications quick and intuitive.
This design choice was based on positive feedback from initial usability tests, where users found it easier to engage with the planner interactively.

Designing a Dashboard UI for Clarity and Ease of Use
A well-organized dashboard ensures students can quickly assess their progress and adjust plans as needed.

A clear visual layout of quarters and course sequences prevents confusion and enhances usability.
The goal was to make the planner approachable for students of all technical backgrounds, focusing on readability and structured organization.

Integrating Real-Time Progress Tracking to Show Graduation Status Dynamically

Students need to instantly see how changes impact their graduation timeline without manual recalculations.
The progress tracking feature reduces uncertainty by providing a real-time, up-to-date status of degree completion.
This was a frequently requested feature, ensuring that students always know their standing toward graduation.

I built the planner around the core needs of UCSB students to improve graduation planning. By simplifying course management through intuitive design, providing clear visual feedback, and integrating dynamic tracking, we ensure students can efficiently navigate their academic journey. Our choices were driven by user feedback, common pain points, and a focus on automation to enhance usability and effectiveness.

Contribution

I designed the frontend UI/UX for both laptop and mobile views using Figma, establishing the branding, layout, and color scheme to create a user-friendly experience. I also designed the logo and sign-in page to align with the overall branding.

The design process followed low-fidelity wireframes with user flows into high-fidelity mockups, to enhance clarity and usability. Once finalized, we translated the designs into responsive code.

For the Progress Tracker, I built an interactive component that visually represents a student's General Education (GE), Major, Extra, and External units. It dynamically fetches user course data via API calls and updates in real-time using React state management (useState, useEffect). The tracker also supports external units, ensuring accurate degree progress tracking.

To ensure universal usability I implemented a separate mobile layout. On larger screens, the layout consists of a three-panel structure:

Course Catalog (Left Panel)
Four-Year Plan (Center Panel)
Progress Tracker (Right Panel)

Each panel can collapse independently, and adjusts dynamically using CSS Flexbox and Tailwind CSS classes like transition-all for smooth animations.

For mobile devices, I designed a completely different layout optimized for smaller screens. I implemented a tab-based navigation system where users can switch between:

Course Catalog
Four-Year Plan
Progress Tracker

This was achieved using state management (useState) and conditional rendering. I also added slide animations to create a fluid transition effect when switching views, making navigation more intuitive. The transitions were handled using CSS transforms and conditional class-based animations.

User Flow

High Fidelity Wireframes

Made with Figma.

Deployed Website

Sign in
Only UCSB students are allowed to sign in—ucsb.edu email required.
Update profile
Update your profile with your major and first quarter at UCSB to better customize your four-year plan. Your information will be saved so that you can continue your progress each time you log on.
Dashboard
Search for courses by name, department, or quarter, and easily drag and drop the course into your Four-Year Plan.
Update schedule
After drag and dropping courses into your Four-Year Plan, your course progress (General education, Major requirements, unit requirements) will automatically update on the right.
Course progress
Open up the tabs to see the specific classes you need to take for your major. Classes in your schedule will be automatically checked.
Prerequisites
If you attempt to add a class that you haven't met the prerequisites for, you will automatically be warned. Can be overridden by user.
Quarters
If you attempt to add a course in a quarter that it normally isn't offered in, you will be warned. User can override.
Course information
Click on a selected course to see the course description, units, prerequisites, and also input your grade. Your GPA will automatically be calculated in your Course Progress section.
Print four-year plan
Press "Print" to automatically generate and print a pdf of your four-year plan with units and grades. Show your counselor or have a convenient paper copy!
responsive layout
Universally responsive layout for mobile — accessible from all devices. Press the arrows to switch tabs and view either Four-Year Plan, Course Catalog, or Course Progress.
Sign in
Only UCSB students are allowed to sign in—ucsb.edu email required.
Update profile
Update your profile with your major and first quarter at UCSB to better customize your four-year plan. Your information will be saved so that you can continue your progress each time you log on.
Dashboard
Search for courses by name, department, or quarter, and easily drag and drop the course into your Four-Year Plan.
Update schedule
After drag and dropping courses into your Four-Year Plan, your course progress (General education, Major requirements, unit requirements) will automatically update on the right.
Course progress
Open up the tabs to see the specific classes you need to take for your major. Classes in your schedule will be automatically checked.
Prerequisites
If you attempt to add a class that you haven't met the prerequisites for, you will automatically be warned. Can be overridden by user.
Quarters
If you attempt to add a course in a quarter that it normally isn't offered in, you will be warned. User can override.
Course information
Click on a selected course to see the course description, units, prerequisites, and also input your grade. Your GPA will automatically be calculated in your Course Progress section.
Print four-year plan
Press "Print" to automatically generate and print a pdf of your four-year plan with units and grades. Show your counselor or have a convenient paper copy!
responsive layout
Universally responsive layout for mobile — accessible from all devices. Press the arrows to switch tabs and view either Four-Year Plan, Course Catalog, or Course Progress.
Sign in
Only UCSB students are allowed to sign in—ucsb.edu email required.
Update profile
Update your profile with your major and first quarter at UCSB to better customize your four-year plan. Your information will be saved so that you can continue your progress each time you log on.
Dashboard
Search for courses by name, department, or quarter, and easily drag and drop the course into your Four-Year Plan.
Update schedule
After drag and dropping courses into your Four-Year Plan, your course progress (General education, Major requirements, unit requirements) will automatically update on the right.
Course progress
Open up the tabs to see the specific classes you need to take for your major. Classes in your schedule will be automatically checked.
Prerequisites
If you attempt to add a class that you haven't met the prerequisites for, you will automatically be warned. Can be overridden by user.
Quarters
If you attempt to add a course in a quarter that it normally isn't offered in, you will be warned. User can override.
Course information
Click on a selected course to see the course description, units, prerequisites, and also input your grade. Your GPA will automatically be calculated in your Course Progress section.
Print four-year plan
Press "Print" to automatically generate and print a pdf of your four-year plan with units and grades. Show your counselor or have a convenient paper copy!
responsive layout
Universally responsive layout for mobile — accessible from all devices. Press the arrows to switch tabs and view either Four-Year Plan, Course Catalog, or Course Progress.
Sign in
Only UCSB students are allowed to sign in—ucsb.edu email required.
Update profile
Update your profile with your major and first quarter at UCSB to better customize your four-year plan. Your information will be saved so that you can continue your progress each time you log on.
Dashboard
Search for courses by name, department, or quarter, and easily drag and drop the course into your Four-Year Plan.
Update schedule
After drag and dropping courses into your Four-Year Plan, your course progress (General education, Major requirements, unit requirements) will automatically update on the right.
Course progress
Open up the tabs to see the specific classes you need to take for your major. Classes in your schedule will be automatically checked.
Prerequisites
If you attempt to add a class that you haven't met the prerequisites for, you will automatically be warned. Can be overridden by user.
Quarters
If you attempt to add a course in a quarter that it normally isn't offered in, you will be warned. User can override.
Course information
Click on a selected course to see the course description, units, prerequisites, and also input your grade. Your GPA will automatically be calculated in your Course Progress section.
Print four-year plan
Press "Print" to automatically generate and print a pdf of your four-year plan with units and grades. Show your counselor or have a convenient paper copy!
responsive layout
Universally responsive layout for mobile — accessible from all devices. Press the arrows to switch tabs and view either Four-Year Plan, Course Catalog, or Course Progress.

Signin page
Only UCSB students are allowed to sign in—ucsb.edu email required.
UPdate profile information
Update your profile with your major and first quarter at UCSB to better customize your four-year plan. Your information will be saved so that you can continue your progress each time you log on. You can also clear all the courses in your schedule to start over.
Dashboard
Search for courses by name, department, or quarter, and easily drag and drop the course into your Four-Year Plan.
Update schedule
After drag and dropping courses into your Four-Year Plan, your course progress (General education, Major requirements, unit requirements) will automatically update on the right. You can choose to Hide/ Show the summer quarter.
Course progress
Open up the tabs to see the specific classes you need to take for your major. Classes in your schedule will be automatically checked.
Prerequisites
If you attempt to add a class that you haven't met the prerequisites for, you will automatically be warned. Can be overridden by user.
QuARTERS
If you attempt to add a course in a quarter that it normally isn't offered in, you will be warned. User can override.
Course information and grades
Click on a selected course to see the course description, units, prerequisites, and also input your grade. Your GPA will automatically be calculated in your Course Progress section.
Print Schedule
Press "Print" to automatically generate and print a pdf of your four-year plan with units and grades. Show your counselor or have a convenient paper copy!
Responsive layout
Universally responsive layout for mobile — accessible from all devices. Press the arrows to switch tabs and view either Four-Year Plan, Course Catalog, or Course Progress.
Signin page
Only UCSB students are allowed to sign in—ucsb.edu email required.
UPdate profile information
Update your profile with your major and first quarter at UCSB to better customize your four-year plan. Your information will be saved so that you can continue your progress each time you log on. You can also clear all the courses in your schedule to start over.
Dashboard
Search for courses by name, department, or quarter, and easily drag and drop the course into your Four-Year Plan.
Update schedule
After drag and dropping courses into your Four-Year Plan, your course progress (General education, Major requirements, unit requirements) will automatically update on the right. You can choose to Hide/ Show the summer quarter.
Course progress
Open up the tabs to see the specific classes you need to take for your major. Classes in your schedule will be automatically checked.
Prerequisites
If you attempt to add a class that you haven't met the prerequisites for, you will automatically be warned. Can be overridden by user.
QuARTERS
If you attempt to add a course in a quarter that it normally isn't offered in, you will be warned. User can override.
Course information and grades
Click on a selected course to see the course description, units, prerequisites, and also input your grade. Your GPA will automatically be calculated in your Course Progress section.
Print Schedule
Press "Print" to automatically generate and print a pdf of your four-year plan with units and grades. Show your counselor or have a convenient paper copy!
Responsive layout
Universally responsive layout for mobile — accessible from all devices. Press the arrows to switch tabs and view either Four-Year Plan, Course Catalog, or Course Progress.
Signin page
Only UCSB students are allowed to sign in—ucsb.edu email required.
UPdate profile information
Update your profile with your major and first quarter at UCSB to better customize your four-year plan. Your information will be saved so that you can continue your progress each time you log on. You can also clear all the courses in your schedule to start over.
Dashboard
Search for courses by name, department, or quarter, and easily drag and drop the course into your Four-Year Plan.
Update schedule
After drag and dropping courses into your Four-Year Plan, your course progress (General education, Major requirements, unit requirements) will automatically update on the right. You can choose to Hide/ Show the summer quarter.
Course progress
Open up the tabs to see the specific classes you need to take for your major. Classes in your schedule will be automatically checked.
Prerequisites
If you attempt to add a class that you haven't met the prerequisites for, you will automatically be warned. Can be overridden by user.
QuARTERS
If you attempt to add a course in a quarter that it normally isn't offered in, you will be warned. User can override.
Course information and grades
Click on a selected course to see the course description, units, prerequisites, and also input your grade. Your GPA will automatically be calculated in your Course Progress section.
Print Schedule
Press "Print" to automatically generate and print a pdf of your four-year plan with units and grades. Show your counselor or have a convenient paper copy!
Responsive layout
Universally responsive layout for mobile — accessible from all devices. Press the arrows to switch tabs and view either Four-Year Plan, Course Catalog, or Course Progress.
Signin page
Only UCSB students are allowed to sign in—ucsb.edu email required.
UPdate profile information
Update your profile with your major and first quarter at UCSB to better customize your four-year plan. Your information will be saved so that you can continue your progress each time you log on. You can also clear all the courses in your schedule to start over.
Dashboard
Search for courses by name, department, or quarter, and easily drag and drop the course into your Four-Year Plan.
Update schedule
After drag and dropping courses into your Four-Year Plan, your course progress (General education, Major requirements, unit requirements) will automatically update on the right. You can choose to Hide/ Show the summer quarter.
Course progress
Open up the tabs to see the specific classes you need to take for your major. Classes in your schedule will be automatically checked.
Prerequisites
If you attempt to add a class that you haven't met the prerequisites for, you will automatically be warned. Can be overridden by user.
QuARTERS
If you attempt to add a course in a quarter that it normally isn't offered in, you will be warned. User can override.
Course information and grades
Click on a selected course to see the course description, units, prerequisites, and also input your grade. Your GPA will automatically be calculated in your Course Progress section.
Print Schedule
Press "Print" to automatically generate and print a pdf of your four-year plan with units and grades. Show your counselor or have a convenient paper copy!
Responsive layout
Universally responsive layout for mobile — accessible from all devices. Press the arrows to switch tabs and view either Four-Year Plan, Course Catalog, or Course Progress.