HCI Course Project · Research to Prototype

SwampPath

A student-first UF course planner that combines a live schedule builder, prerequisite awareness, and multi-semester planning into one streamlined experience.

Scope HCI course project, research through high-fidelity prototype
Team Vanessa Serrano + 2 collaborators
Stack React, Vite, TypeScript, CSS, Local Storage

Student-Centered UX

Designed around the real pain points of planning schedules during high-pressure registration periods.

Unified Planning Flow

Brought class search, schedule building, and future-semester planning into one system.

Academic Clarity

Added prerequisite awareness and saved planning paths to reduce confusion and repeated effort.

Overview

What the project does

SwampPath is a course-planning tool built for University of Florida students who need a faster, clearer way to build schedules and think ahead across semesters. Instead of separating class search, schedule building, and planning into disconnected systems, SwampPath brings those tasks together in one flow.

The product combines a live weekly calendar, selected course list, prerequisite awareness, and multi-semester planning so students can make more informed scheduling decisions with less friction.

Problem

Why the existing experience was frustrating

ONE.UF separates core planning tasks in a way that makes schedule building slower and more stressful. Students often have to jump between class lists, calendars, requirements, and personal notes just to answer basic planning questions.

  • Students juggle multiple tabs and spreadsheets to compare time conflicts and options
  • Calendar context and course selection are disconnected
  • Prerequisite awareness is not surfaced clearly during planning
  • Exploring “what-if” semester plans takes extra effort and mental overhead

The opportunity was not just improving course search — it was creating a planning experience that made schedule decisions feel faster, clearer, and less stressful.

Solution

Designing a better planning flow

SwampPath was designed to support how students actually plan, not just how courses are listed in a system. The interface centers around a live weekly schedule view paired with selected classes and future planning tools, giving users immediate feedback as they build.

  • Browse and search the course catalog
  • Add sections and instantly see them in a weekly calendar
  • Detect time conflicts visually while building a schedule
  • Flag prerequisite issues before registration attempts
  • Save and revisit multi-semester plans tied to a student profile

Research

What we learned

Research showed that students do not think about schedule planning as a single isolated task. They are often balancing degree requirements, professor preferences, time conflicts, and future-semester strategy all at once.

  • Students use outside tools to keep track of requirements and compare options
  • Discovery often starts from requirements, timing, and professor preferences, not just course codes
  • Students benefit from saving alternate semester plans before registration opens
  • Seeing schedule conflicts immediately reduces repeated trial-and-error planning

My Role

What I contributed

This project was developed as part of an HCI course team. My contributions focused on UX thinking, interface structure, and helping shape the product into a more usable planning experience that felt practical for students.

UX Design

Helped define user needs, planning flows, and interface structure around real student pain points.

Interaction Design

Focused on how the weekly schedule, class list, and planning tools should work together on one screen.

Prototype Direction

Contributed to translating research insight into a clearer high-fidelity student planning concept.

UX Decisions

How the experience was designed

A major design goal was reducing the mental overhead of planning. The interface needed to make schedule consequences visible immediately, so users could understand conflicts and possibilities without constantly switching context.

Side-by-Side Builder

Placed the live weekly calendar next to selected classes so changes were visible immediately.

Conflict Awareness

Used clearer conflict cues so overlapping sections were easier to identify and resolve.

Prerequisite Warnings

Surfaced prerequisite issues during planning instead of after a failed registration attempt.

Future Planning Support

Added multi-semester planning so students could think beyond the current term.

Profile-Linked Planning

Connected saved plans to a student profile concept to support continuity over time.

Student-Familiar Visuals

Used a university-oriented visual language while keeping contrast and readability clear.

Demo

Prototype walkthrough

Technical Implementation

How it was built

Frontend

Built with React, Vite, and TypeScript to support a responsive planning interface.

State Management

Managed selected courses, weekly schedule data, and saved plan behavior in the demo environment.

Prototype Logic

Included mock catalog data, prerequisite rules, and saved-plan loading flows.

Persistence

Used local storage for saved plan behavior within the prototype.

The technical work focused on making planning interactions feel immediate and understandable. A core part of the build was linking selected courses, calendar rendering, and saved plan behavior into one interface.

  • Live weekly calendar rendering
  • Selected course state and add/remove behavior
  • Prerequisite warning logic for demo scenarios
  • Saved multi-semester planning via local storage

Results

What the project improved

In pilot evaluation, the side-by-side builder reduced clicks and made planning faster than the existing campus workflow. More importantly, the product concept helped reduce uncertainty by making prerequisites, conflicts, and long-term planning easier to see.

~40% Fewer Clicks

Compared with the more fragmented planning flow in ONE.UF during pilot evaluation.

Faster Planning

Users could make schedule decisions more quickly with side-by-side feedback.

Prerequisite Clarity

Warnings reduced confusion around whether a course path was actually valid.

Lower Stress

Saved future-semester planning reduced “where does this fit?” uncertainty.

Takeaways

What this project taught me

SwampPath reinforced how much better student tools can feel when they are designed around workflow, not just system structure. The biggest value came from reducing context switching and helping users understand the consequences of planning decisions in real time.

  • Designing interfaces for complex, high-frequency student workflows
  • Turning research pain points into concrete planning features
  • Using interface structure to reduce cognitive load
  • Balancing immediate schedule building with long-term academic planning