/

PATH@PENN

/

PATH@PENN

/

PATH@PENN

Improved System Visibility
& Course Registration Flow

Improved System Visibility& Course Registration Flow

Improved System Visibility & Course Registration Flow

TIMELINE

6 Weeks

Spring 2025

TIMELINE

6 Weeks

Spring 2025

TIMELINE

6 Weeks

Spring 2025

ROLE

Product Designer

ROLE

Product Designer

ROLE

Product Designer

TEAM

Solo Project

TEAM

Solo Project

TEAM

Solo Project

TOOLS

Figma

TOOLS

Figma

TOOLS

Figma

SKILLS

User Research

Systems Design

Information Architecture

SKILLS

User Research

Systems Design

Information Architecture

SKILLS

User Research

Systems Design

Information Architecture

/

OVERVIEW

/

OVERVIEW

/

OVERVIEW

Path@Penn supports 23,000+ students across registration and academic planning

Path@Penn is the universityโ€™s central portal for searching courses, managing schedules, tracking degree progress, and accessing academic records. It is a high-traffic system used every semester by all undergraduate and graduate students across its 11 schools.

Path@Penn supports 23,000+ students across registration and academic planning

Path@Penn is the universityโ€™s central portal for searching courses, managing schedules, tracking degree progress, and accessing academic records. It is a high-traffic system used every semester by all undergraduate and graduate students across its 11 schools.

Path@Penn supports 23,000+ students across registration and academic planning

Path@Penn is the universityโ€™s central portal for searching courses, managing schedules, tracking degree progress, and accessing academic records. It is a high-traffic system used every semester by all undergraduate and graduate students across its 11 schools.

/

PROBLEM

The current UI is dense and UX is overwhelming

Students struggle to find the information they need due to cluttered layouts, limited filters, and unclear course details.

As a result, many rely on third-party tools to evaluate course difficulty, compare schedules, and plan their semesters.

/

PROBLEM

The current UI is dense and UX is overwhelming

Students struggle to find the information they need due to cluttered layouts, limited filters, and unclear course details.

As a result, many rely on third-party tools to evaluate course difficulty, compare schedules, and plan their semesters.

/

PROBLEM

The current UI is dense and UX is overwhelming

Students struggle to find the information they need due to cluttered layouts, limited filters, and unclear course details.

As a result, many rely on third-party tools to evaluate course difficulty, compare schedules, and plan their semesters.

/

OUTCOME

My redesign focused on student priorities

The updated system improves search and filtering, clarifies course requirements and availability, and introduces new planning tools to help students make confident registration decisions without leaving the platform.

/

OUTCOME

My redesign focused on student priorities

The updated system improves search and filtering, clarifies course requirements and availability, and introduces new planning tools to help students make confident registration decisions without leaving the platform.

/

OUTCOME

My redesign focused on student priorities

The updated system improves search and filtering, clarifies course requirements and availability, and introduces new planning tools to help students make confident registration decisions without leaving the platform.

/

RESEARCH

/

RESEARCH

/

RESEARCH

I conducted 4 interviews to better understand student priorities

I asked students across majors and schools to learn where the system succeeds, where it fails, and how students navigate complex registration tasks.

I conducted 4 interviews to better understand student priorities

I asked students across majors and schools to learn where the system succeeds, where it fails, and how students navigate complex registration tasks.

I conducted 4 interviews to better understand student priorities

I asked students across majors and schools to learn where the system succeeds, where it fails, and how students navigate complex registration tasks.

FULL INTERVIEW TRANSCRIPT

FULL INTERVIEW TRANSCRIPT

FULL INTERVIEW TRANSCRIPT

quotes

quotes

quotes

From there, I found the following key takeaways:

From there, I found the following key takeaways:

From there, I found the following key takeaways:

GOALS

Graduation Comes First

Students choose classes primarily based on what fulfills their degree, major, or minor requirements.


They want a system that clearly shows what courses count instead of relying on external tools.

DECISIONS

Attributes, Availability & Difficulty

The top factors influencing course selection are whether a class meets specific attributes, if it's open, and how hard it is perceived to me.


These details need to be surfaced to help students make informed decisions.

CLARITY

Transparency Builds Trust

Students want clear visibility into a course status โ€” if permission requests are required or how long the waitlist is.


Transparency allows students to curate their courseload with confidence.

/

INTERFACE ANATOMY

/

INTERFACE ANATOMY

/

INTERFACE ANATOMY

So, how did I translate these takeaways into a new interface?

So, how did I translate these takeaways into a new interface?

So, how did I translate these takeaways into a new interface?

Let's walk through the redesigned UI

Scroll to continue

Search Results

Scroll to continue

Course Details

Scroll to continue

Section

Scroll to continue

One-Click Course Adding

Scroll to continue

Cart

Scroll to continue

Insights

Scroll to continue

Progress

Scroll to continue

See insights in action.

Scroll to continue

/

USER FLOWS

/

USER FLOWS

/

USER FLOWS

Add a Course + Write Permission Request

Add a Course + Write Permission Request

Add a Course + Write Permission Request

Remove a Course

Remove a Course

Remove a Course

Calendar Toggle

Calendar Toggle

Calendar Toggle

Compare Carts

Compare Carts

Compare Carts

/

COMPONENTS

Components that make up a system

Brad Frost's Atomic Design, the smaller pieces assemble the larger product. Starting from the smaller details.

/

COMPONENTS

Components that make up a system

Brad Frost's Atomic Design, the smaller pieces assemble the larger product. Starting from the smaller details.

/

COMPONENTS

Components that make up a system

Brad Frost's Atomic Design, the smaller pieces assemble the larger product. Starting from the smaller details.

/

DESIGN SYSTEM

Style Consistency Across Pages

/

DESIGN SYSTEM

Style Consistency Across Pages

/

DESIGN SYSTEM

Style Consistency Across Pages

/

COMPONENTS

Takeaway #1: Graduation Comes First

Brad Frost's Atomic Design, the smaller pieces assemble the larger product. Starting from the smaller details.

/

COMPONENTS

Takeaway #1: Graduation Comes First

Brad Frost's Atomic Design, the smaller pieces assemble the larger product. Starting from the smaller details.

/

COMPONENTS

Takeaway #1: Graduation Comes First

Brad Frost's Atomic Design, the smaller pieces assemble the larger product. Starting from the smaller details.

High-Context Course Preview

The previews after a search provide the most relevant course information first.

Progress Tracking

As you build your schedule, see how each course impact your schedule.

Quick Filters

The previews after a search provide the most relevant course information first.

Visually Differentiated Filters

The previews after a search provide the most relevant course information first.

/

COMPONENTS

Takeaway #2

Brad Frost's Atomic Design, the smaller pieces assemble the larger product. Starting from the smaller details.

/

COMPONENTS

Takeaway #2

Brad Frost's Atomic Design, the smaller pieces assemble the larger product. Starting from the smaller details.

/

COMPONENTS

Takeaway #2

Brad Frost's Atomic Design, the smaller pieces assemble the larger product. Starting from the smaller details.

Tooltip

Tooltips labels are activated by hovering over a component to communicates an icon's function.

Color-Coordinated Calendar

See what course corresponds with its calendar view with color coordination

/

COMPONENTS

Takeaway #3

Brad Frost's Atomic Design, the smaller pieces assemble the larger product. Starting from the smaller details.

/

COMPONENTS

Takeaway #3

Brad Frost's Atomic Design, the smaller pieces assemble the larger product. Starting from the smaller details.

/

COMPONENTS

Takeaway #3

Brad Frost's Atomic Design, the smaller pieces assemble the larger product. Starting from the smaller details.

/

BEFORE & AFTER

Path@Penn is a powerful tool that overwhelms its users

Path@Penn is essential to every Penn student, but it is dense, unfiltered, and difficult to navigate. This causes students to resort to third-party tools such as Penn Course Plan and Penn Course Review.

/

BEFORE & AFTER

Path@Penn is a powerful tool that overwhelms its users

Path@Penn is essential to every Penn student, but it is dense, unfiltered, and difficult to navigate. This causes students to resort to third-party tools such as Penn Course Plan and Penn Course Review.

/

BEFORE & AFTER

Path@Penn is a powerful tool that overwhelms its users

Path@Penn is essential to every Penn student, but it is dense, unfiltered, and difficult to navigate. This causes students to resort to third-party tools such as Penn Course Plan and Penn Course Review.

ENDLESS SCROLLING

ENDLESS SCROLLING

ENDLESS SCROLLING

TOGGLE

TOGGLE

TOGGLE

CONFUSING FILTERS

CONFUSING FILTERS

FILTERS

QUICK ACCESS FILTERS

QUICK ACCESS FILTERS

POOR HIERARCHY

POOR INFORMATION HIERARCHY

POOR INFORMATION HIERARCHY

POOR HIERARCHY

DEFINED HIERARCHY

DEFINED HIERARCHY

FILTERS

ENDLESS SCROLLING

ENDLESS SCROLLING

ENDLESS SCROLLING

CONFUSING FILTERS

CONFUSING FILTERS

CONFUSING FILTERS

POOR INFORMATION HIERARCHY

POOR INFORMATION HIERARCHY

POOR INFORMATION HIERARCHY

/

ITERATIONS

Style Consistency Across Pages

/

ITERATIONS

Style Consistency Across Pages

/

ITERATIONS

Style Consistency Across Pages

/

REFLECTION

STATEMENT

BODY TEXT BODY TEXT

/

REFLECTION

STATEMENT

BODY TEXT BODY TEXT

/

REFLECTION

STATEMENT

BODY TEXT BODY TEXT