Improving Path@Penn

Overview

The site every Penn student loves to hate

User Research

Listening to the people who actually use it

Interview Insights

Key Insights

From these interviews, I distilled 6 key insights and main user pain points while using Path@Penn.

Insight Statements

From these insights, I developed insight statements that drove the direction of my redesign — narrowing down to the 2 that captured the core problems most clearly.

Screenshots from my brainstorm board

Ideation

Color palette, fonts & early directions

Color Palette & Fonts

Working within Penn's existing brand guidelines, I maintained the primary Penn color palette and introduced a subtle secondary blue to support the visual hierarchy where needed. For typography, I prioritized Roboto which already exists in the current Path@Penn site, and introduced EB Garamond (a serif used across other Penn sites) with 2% spacing to reduce visual density.

Low-Fidelity Wireframes

I considered 2 different design directions which focused on different aspects of the experience.

This design featured a permanent calendar that stood in the main page of the site. It felt familiar to existing class registration platforms and included an add/drop and class search section positioned to the right of the page. Although I liked this version, I wanted to reimagine what Path@Penn could be while still meeting students' needs and introducing a more distinctive design flair.

Swipe to view all screens →

This direction centered the experience around search, with the calendar appearing as a preview pane when a course is selected. I wanted to reimagine the registration flow as something closer to an e-commerce shopping experience — where courses feel like listings you browse, add to cart, and check out. This approach felt more modern and reduced visual clutter, while still keeping the calendar accessible when students actually need it.

Swipe to view all screens →

Final Design

I ended up going with Design Consideration #2 as the foundation, but combined the best parts of both directions. The result is a search-centered experience with the calendar integrated as a live preview, so students can see how courses fit into their schedule in real-time as they browse and add them.

Featured Screens

The landing page puts the search bar front and center with only the filters students actually need (based on interview findings). A "Recommended for you" section allows quick course additions, while the semester sidebar shows current enrollment and registration status at a glance.

As students type in the search bar, results populate instantly with real-time availability indicators like "3 sections available", "currently enrolled", or "Not offered in Spring 2026". This way, students know exactly what's open before they even click into a course.

Each course page is designed to feel like a product listing, inspired by e-commerce interfaces that students are already familiar with. The calendar preview sits alongside course details so students can always see how a section fits into their week. Section cards clearly show availability, and prominent "Add to Plan" and "Go to Checkout" buttons make the next step obvious.

One of the biggest pain points from research was that students couldn't tell if their course registration actually went through. The redesigned confirmation page solves this with clear status labels for each course, whether it's registered, pending approval, or requires a justification. Warning messages stand out so students always know where they stand before and after submitting.

Course confirmation page with justification prompt for courses requiring approval

Post-submission view with clear registration status and pending approval indicators

Final Flow

The complete registration experience from start to finish, across all 10 screens.

Swipe to view all screens →