Skip to content
Gabriel Garcia
  1. Overview
  2. The brief
  3. Research
  4. How might we
  5. The idea
  6. The design
  7. The schedule
The redesigned Path@Penn course workspace: a weekly calendar filled with color-coded course blocks beside a Course Search panel of results, under a red navigation bar with Calendar, Course Search, Course Cart, Course Information, Degree Audit and Explore Programs tabs.

Path@Penn Redesign

Penn’s registration site hid courses behind tabs that closed whenever you went back, so comparing two courses meant starting over. I redesigned it around a workspace of windows you can keep open side by side.

Role
Researcher and designer, class project
Scope
User research, UX and UI

The brief

The class asked us to reimagine course registration at the university. We researched the pain points with our peers, then used those insights to propose a new version of the site.

Research

Five insights came out of that research:

  1. 01Path@Penn provides many functions that users never access.
  2. 02Students heavily value the opinions of previous students enrolled in the courses they are considering.
  3. 03The landing page is rarely used, but users still complain about the layout.
  4. 04The tab system has many shortcomings that slow down users.
  5. 05The calendar function is valuable but is confusing to users.

How might we

  1. 01

    Streamline the navigation of course search

  2. 02

    Make searching for courses quicker and more intuitive

  3. 03

    Give students the information they value in a course

  4. 04

    Put the primary functions first, other tabs in reach

The idea

Every expanding tab closed the ones after it, so students couldn’t hold two courses side by side. I replaced the tabs with movable windows: a student opens only the information they care about and keeps it on screen, so they can compare two courses without losing their place.

Hand-drawn pencil sketches of a movable, resizable window system for course search and course information, annotated with attributes, sections, professor, times, enrollment, permits and syllabus.

The first sketch: movable windows in place of expanding tabs.

Wireframe · welcome
A grayscale wireframe of the welcome screen: “Welcome [Student]! How can we help?” above two main buttons and four grouped panels.
Wireframe · workspace
A grayscale wireframe of the course workspace, with the calendar, search results, cart and course information panels tiled together.

The design

A landing page that points two ways

Registration and your profile lead the welcome screen, and the rest of the site sits in four grouped panels and a full menu, so rarely used tabs stay one click away.

Welcome
The redesigned welcome screen over a tree-lined campus walk in autumn, with red Course Registration/Schedule and View My Profile buttons above four resource panels.
Menu
A full-height red menu opened over the welcome screen, listing the site’s sections in two columns.

Compare courses without losing your place

Search, course information, the cart and the calendar open as windows in one workspace, and the cart warns you when a course still needs a recitation.

Course information
The workspace with Course Information open for DSGN 2570, beside the Course Search filters and results.
Recitation alert
The workspace with one course in the cart and a pink warning under it: “Alert! This course requires a recitation”.

A check before anything is final

Submitting, removing a course and clearing the cart each ask once more, with a clear way back.

Submit
A dark dialog before registering, with a green Submit Registration button and a red “No Take Me Back!”, over a filled calendar and a six-course cart.
Done
A green banner reading “Congratulations! Your registration has successfully been submitted!” above an Okay! button.

The schedule

The finished workspace shows the week’s schedule beside search, and a degree audit tracks progress against each requirement.

Schedule
The finished workspace: a weekly calendar of color-coded course blocks beside the Course Search panel.
Degree audit
The Degree Audit panel showing progress as percentages against the degree’s requirements.