Course Hub

Project Overview

Before Course Hub, Rutgers lifelong learning programs — from government services training to professional master’s offerings — lived in separate, siloed systems. Students bounced between disconnected sites. Admins duplicated work across departments. Registration paths were inconsistent and hard to maintain.

Course Hub solves that by combining multiple departments into one unified application with shared navigation patterns, centralized course management, and a registration flow designed to move users confidently from browsing to checkout.

Role: UX Designer & Co-developer

The Problem: Siloed Departments, Fragmented Experiences

Each program area operated like its own island — different layouts, different admin workflows, and no consistent way for users to discover courses or complete registration. That created friction for students, admins, and stakeholders maintaining separate tools instead of one scalable platform.

One Architecture, Many Departments

Instead of rebuilding the experience for every school, Course Hub uses a shared application architecture with department-specific branding, filters, and permissions. CGS, MBS, and other programs feel distinct to users — but run on the same patterns underneath.

Click any image to view it larger.

Center for Government Services (CGS)

The CGS landing page brings 17+ program areas into one browsable hub with shared seasonal navigation and a consistent path from program discovery into course listings.

Siloed government training programs now share one entry point — same layout, same navigation model, department-specific content.

Siloed government training programs now share one entry point — same layout, same navigation model, department-specific content.

Master of Business & Science (MBS)

The MBS Fall 2026 catalog shows how the platform scales to filter-heavy, high-volume course browsing without breaking the shared experience.

MBS uses the same catalog architecture as CGS — concentration filters, sortable columns, and inline registration — adapted for a more complex course inventory.

MBS uses the same catalog architecture as CGS — concentration filters, sortable columns, and inline registration — adapted for a more complex course inventory.

Filtering, Sorting & Responsive Course Tables

Course discovery had to work for both quick lookups and deep browsing. The filter bar supports concentration, location, room, title, course number, and instructor — with sortable table columns so users can reorganize results without losing context.

Multi-criteria filtering keeps large catalogs scannable across departments.

Multi-criteria filtering keeps large catalogs scannable across departments.

Flexible course cards stack on smaller screens and expand into sortable rows on desktop.

Flexible course cards stack on smaller screens and expand into sortable rows on desktop.

Design decisions:

• Filtering and sorting on every major column — title, meeting days, location, instructor
• Color-coded concentration tags so users can scan program areas at a glance
• Responsive table layout that reflows from card stacks to full data rows without hiding critical fields
• Inline Register actions that keep users in the browse-to-checkout flow

Effective Color Coding

Color carries meaning across the product — not just decoration. Concentration tags, alert types, override states, and primary actions each use a distinct palette so users and admins can read status quickly.

• Program tags — teal and blue pills distinguish concentrations and course types
• Primary actions — yellow Register and Search buttons draw attention without breaking Rutgers branding
• Override states — amber “Currently Overridden” badges signal admin-edited listings
• Alert banners — warning, info, and success types map to consistent background colors in the admin panel

Browse → Cart → Checkout

Registration flow was prototyped, polled, and A/B tested before shipping. The cart keeps course details, pricing, and checkout actions in one lightweight overlay so users don’t lose their place in the catalog.

Cart overlay with item count badge, clear pricing, and a direct path to checkout.

Cart overlay with item count badge, clear pricing, and a direct path to checkout.

Cart layouts and payment options were tested through Figma polling to find the clearest checkout experience before development.

Cart layout variations tested through polling to reduce confusion at checkout.

Cart layout variations tested through polling to reduce confusion at checkout.

Payment method selection designed to keep users confident through the final step.

Payment method selection designed to keep users confident through the final step.

Admin Control Panel

Admins needed more than a course editor — they needed a control panel for banners, overrides, user management, and audit trails. The admin experience mirrors the public site’s clarity: sidebar navigation, typed actions, and guardrails before anything goes live.

Site-Wide Banners & Notices

Create and manage banners that appear across all department pages — with alert types, rich text, and character limits for time-sensitive announcements.

Create and manage banners that appear across all department pages — with alert types, rich text, and character limits for time-sensitive announcements.

Manual Course Overrides

When course data needs to change fast — cancellations, schedule updates, pricing corrections — admins can override listings inline. Override state is visible on both the admin side and the public catalog.

Manual overrides surface with a clear badge and dedicated Edit / Clear Override actions — so staff know exactly what's been changed and can revert when needed.

Manual overrides surface with a clear badge and dedicated Edit / Clear Override actions — so staff know exactly what's been changed and can revert when needed.

Version Control & Revision Logs

Every admin save requires a change log message. Combined with a dedicated Revision Logs section in the control panel, teams get a paper trail of who changed what, when, and why — critical when multiple departments share one platform.

Required change log messages and revision logs create accountability across admin editing — no silent updates across shared department data.

Required change log messages and revision logs create accountability across admin editing — no silent updates across shared department data.

Design & Development Process

1. Discovery — mapped siloed department needs and overlapping user journeys
2. Prototyping — HTML/Tailwind/JS prototypes for stakeholder testing
3. Figma polling — checkout flows, cart layouts, filter patterns, and admin edit states
4. A/B testing — validated listing layouts and registration paths
5. Build & launch — Next.js 15, React 19, TypeScript, Tailwind CSS v4, PostgreSQL

Technical Stack

• Frontend: Next.js 15, React 19, TypeScript, Tailwind CSS v4
• Backend: PostgreSQL, Prisma, Next.js API routes
• Accessibility: Semantic HTML, ARIA labels, WCAG AA color contrast

Key Features

• Unified multi-department platform with department-specific branding and permissions
• Dynamic URL-based filtering with query params for program areas and concentrations
• Sortable, responsive course tables that scale from mobile cards to full desktop rows
• Color-coded status and program tags for faster scanning
• Admin manual overrides with visible override state and clear/revert actions
• Version control through required change log messages and revision logs
• Site-wide banner management with typed alerts across all department pages
• Shopping cart and checkout flow tested through polling and A/B testing
• Season-based navigation across Spring, Summer, Fall, and Winter offerings

Outcome

Course Hub replaced fragmented program experiences with a single, scalable platform — making it easier for users to find courses, for admins to manage them with accountability, and for Rutgers to grow lifelong learning programs without rebuilding the wheel for every department.