UX Research UI Design Figma HTML / JavaScript Individual Project

Registration Portal Redesign

Students were calling IT support because they couldn't figure out how to register for classes. I found out why, designed a fix, and built it.

Role UX Researcher & Designer
Tools Figma, HTML, CSS, JavaScript
Overview

The problem with the existing portal

Judson University's registration portal put every possible piece of information on one screen — with no visual hierarchy, no urgency signals, and no clear path to action. Students consistently got confused and called support instead of completing registration themselves.

The core problem

"The dashboard attempts to be everything to everyone. Instead, it should contextually adapt to what each student needs."

Original registration portal Fig. 1 — The original Judson University registration portal

Four competing content panels with identical visual weight. Critical action buttons buried next to low-priority links. A Choir/Ensemble banner consuming 25% of screen space relevant to less than 5% of students. A course schedule presented as a table — not a calendar — making time planning nearly impossible.

Phase 1 — Research

Listening to real students

I gathered insights through informal conversations with peers during registration periods. Three distinct patterns emerged, each revealing a different kind of failure in the existing interface.

Student 01
The Overwhelmed Senior
Logging in 2 days before registration opens
  • Confused by four content areas with identical visual weight
  • Clicks "View Details" under schedule out of habit
  • Misses the red "Holds" button — it's below the fold
  • Can't locate their registration time ticket
Result: Unnecessary call to the registrar's office
Student 02
The Confused Freshman
Registering for the first time, alone
  • Immediate overwhelm — no clear entry point
  • Reads entire FAQ section looking for "how to register"
  • Doesn't realize the Student Registration box is where actions live
  • Assumes the site is broken
Result: Calls IT support
Student 03
The Efficient Planner
Optimizing schedule before registration opens
  • Needs to see registered and planned courses side-by-side
  • Current table only shows administrative data
  • Must navigate to separate page for weekly calendar view
  • Can't compare "registered" vs "planned" in one view
Result: Inefficient back-and-forth navigation

The common thread across all three profiles: the interface forced users to hunt for information rather than surfacing what they needed based on context. A student with a hold needed to see that immediately. A student planning their schedule needed a visual calendar. The original portal gave everyone the same cluttered view regardless of their situation.

Phase 2 — Analysis

Four root failures

I annotated the original interface to trace each user frustration back to a specific structural or visual design decision. Four distinct issues accounted for the majority of confusion.

Annotated analysis of the original portal Fig. 2 — Annotated analysis of the original portal identifying four root UX failures
# Issue Evidence
No information hierarchy All 4 dashboard sections compete for attention with identical visual weight — there is no clear path through the page
Action discoverability failure Critical buttons ("Holds", "Registration Clearance") are styled the same size as passive links ("Register", "Course search")
Administrative schedule view Table layout shows course codes and meeting times in rows — useful for admins, not for students trying to visualize their week
Low-relevance content, high screen cost Choir/Ensemble banner consumes ~25% of total screen real estate, relevant to under 5% of users
Root cause

"The interface presents all possible information simultaneously, forcing users to parse irrelevant content to find their specific need — instead of adapting to what each student actually requires."

Phase 3 — Design

Designing the solution in Figma

The redesign focused on one core principle: surface what matters right now for this student, and get everything else out of the way. I designed two key states — registration open, and registration closed with holds — to address the most critical moments students face.

🎯
Clear information hierarchy

Registration status card is the first thing students see — large, prominent, with a clear status indicator and primary action button.

⚠️
Holds surfaced immediately

When a hold exists, it's shown as a high-contrast alert with a direct "Resolve Hold Now" link — not buried below the fold.

📅
Visual weekly calendar

Replaced the administrative table with a time-grid calendar. Students can see their week at a glance and understand scheduling conflicts instantly.

🔀
Registered vs. Planned side-by-side

A sidebar shows both registered and planned courses together, with color coding — solving the back-and-forth navigation problem directly.

Figma — Registration Open state Figma design - registration open
Figma — Registration Closed with Holds Figma design - registration closed with holds
Phase 4 — Prototype

Built in HTML — not just Figma

I translated the Figma designs directly into a working prototype. The portal is fully interactive — the registration status can be toggled to simulate both open and closed states, including holds and advisor clearance alerts.

State A — Registration Open Final prototype - registration open
State B — Registration Closed with Holds Final prototype - registration closed with holds
Open Live Prototype

Once open, click "Registration Is Now Open" to toggle between the open and closed states of the prototype.

Reflection

What I learned

This project taught me that the gap between a frustrating interface and a clear one is rarely a matter of aesthetics — it's almost always about information priority.

What worked well

Grounding every design decision in specific user observations kept the redesign focused. When I felt tempted to add features, I'd ask: "which student profile does this solve for?" That constraint produced a cleaner, more intentional result.

Building it in HTML rather than leaving it as a Figma prototype forced me to confront edge cases — like what happens when registration is closed but the student has no holds — that pure design work would have glossed over.

If I were to continue

I'd build this in React with a lightweight backend pulling live deadline data from the university's API. I'd also run formal usability testing with actual students — having three people observe a task completion flow would surface issues my own analysis couldn't catch.

An accessibility audit would be a priority next step — color contrast, keyboard navigation, and screen reader support were not formally evaluated in this version.

Next project
Coming soon…
Back to all work