Jaden Snyder

Path&Penn

Streamlining Enrollment for an Intuitive Student Experience

Disciplines

Human Interaction Guidelines

Interaction Design

Visual Design

Timeline

January - February 2024

Team

Two UI/UX Designers

Senior Product Manager

providing context

What’s Path@Penn?

In spring 2024, I collaborated with UPenn as a UI/UX Designer to redefine the Path@Penn platform—a centralized student portal for course registration, academic records, and degree planning. Infamously known for its outdated and confusing interface, Path@Penn left students frustrated and struggling to navigate their academic planning process efficiently.

My role was to transform this platform by reimagining the homepage and enrollment process, as well as creating a responsive mobile experience. The goal was to develop a streamlined, intuitive interface that aligned with Penn’s brand identity while making course planning and resource discovery accessible to all students. Through strategic updates in information architecture, responsive design, and visual language, I crafted a solution that modernized Path@Penn and enhanced its usability across devices.

THE CHALLENGE

How can I help college students at Penn easily navigate their academic journey and access the resources they need to succeed?

High-Level Goals Defining My Process

1: Prioritize ease of access to essential features for efficient course planning.

2: Align design with accessibility standards to meet diverse student needs.

the Solution

Empowering students to explore any of their academic aspirations

To address the frustrations students faced with Path@Penn, we redesigned the platform with a user-centered approach. Our solution focused on streamlining navigation, decluttering the interface, and making essential features more accessible on both desktop and mobile.

Homepage

The new Path@Penn homepage gives students a quick snapshot of their day-to-day academic life, with schedules, due dates, and announcements all in one place. This organized layout allows students to see what’s coming up and manage their time more effectively without digging through multiple pages.

Degree Planning

The redesigned degree planning section provides students with a clear, organized view of their academic progress, displaying core, major, and minor requirements at a glance. Visual progress indicators help students quickly assess their completion status across various curriculum requirements.

Calendar Integration

The integrated calendar feature allows students to view and manage their course schedules, due dates, and personal events in one place. With options to add custom events and reminders, it keeps students organized and on track. This centralization helps students balance academic and personal commitments effortlessly.

Mobile Optimization

The responsive mobile design ensures users can access the same features as the desktop version on the go, without losing functionality. From degree requirements to profile updates, the mobile layout is streamlined for quick navigation and easy readability. This optimized design allows students to stay connected to their academic progress, no matter where they are.

PROBLEM DISCOVERY

Identifying key challenges in the Path@Penn platform

Path@Penn’s outdated design and functionality created significant barriers for students trying to navigate their academic journey. Taking a deep dive into the platform we identified three primary issues:

PROBLEM 1

Outdated design system

Path@Penn’s outdated design lacks cohesiveness and usability, making it difficult for students to navigate and find essential information.

Excessive empty space contrasts with key information cramped into one corner, creating a cluttered feel.

PROBLEM 2

Confusing organization/navigation

Repetitive links and an overwhelming number of menus and submenus disrupt user flow and could be consolidated for a smoother experience.

PROBLEM 3

Unresponsive mobile

Opening Path@Penn on mobile displays the desktop layout, forcing users to zoom and pan. Selecting a hidden “Mobile” button reveals a completely different and inconsistent interface.

DESIGN PROCESS

Following the Double Diamond model

To guide my problem-solving and solution development, I deployed the Double Diamond design model. This iterative framework, ensured a comprehensive user-centered approach while maintaining flexibility throughout the project.

RESEARCH

Three main discovery pillars for our research phase

Prioritization

What features do students use? Are any left untouched?

Access

How do students discover interesting classes and keep track of their requirements?

Habits

How do students manage their four year plans?

What internal/external resources do students use and what do they need to make their enrollment process easier?

To properly identify the specific pain points and user needs, I conducted in-depth user research, gathering both quantitative and qualitative insights through surveys and interviews of over 50 undergraduate students from 1st years to 4th years.

Survey findings:

Prioritization

Students indicate that the four main features regularly used are their schedule, searching for a course, registering for a class, and checking their academic calendar.

Organization and Efficiency

Students struggle to easily discover resources provided by the university because the organization of content is overwhelming, sending users down a rabbit hole of external pages.

Interview findings:

Accessibilty

The text sizes and colors make readability difficult, especially for users with visual impairments.

Functionality

The degree progress tracking feature does not accurately display the students course requirements.

Usability

Many important action items require unnecessary clicks to reach.

DEFINE

Using my research insights, I formed "How Might We" statements to guide the design:

Eliminate and reorganize redundant information to streamline the user experience

Apply accessibility guidelines to develop new fonts, colors, and button styles

Incorporate class and professor ratings along with a customizable calendar that integrates with Google Calendar

Design a responsive mobile version that provides the same level of information and functionality as the webpage

Restructuring the sitemap

To begin restructuring the content of PennInTouch based on my user research insights, I created a sitemap of the current desktop and mobile versions of the homepage. This exercise revealed several issues, such as redundancy, outdated links, and inconsistencies between the web and mobile versions of the site.

I then removed and rearranged some content based on the user research insights to visualize a redesigned Path&Penn, ensuring a solution that addressed navigational challenges without compromising system functionality.

develop

Guiding our early wireframes with resaerch

Homepage
My homepage objectives centered around prioritizing key features and simplifying the overall content presentation.
Enrollment Page
To simplify course selection, the search functionality now spans half the screen, with the calendar occupying the other half, allowing instant visibility of scheduling changes.
Mobile Optimization
I created a responsive mobile design, ensuring users could access the same features as the desktop version without loss of functionality.
Homepage
My homepage objectives centered around prioritizing key features and simplifying the overall content presentation.
Enrollment Page
To simplify course selection, the search functionality now spans half the screen, with the calendar occupying the other half, allowing instant visibility of scheduling changes.
Mobile Optimization
I created a responsive mobile design, ensuring users could access the same features as the desktop version without loss of functionality.
Homepage
My homepage objectives centered around prioritizing key features and simplifying the overall content presentation.
Enrollment Page
To simplify course selection, the search functionality now spans half the screen, with the calendar occupying the other half, allowing instant visibility of scheduling changes.
Mobile Optimization
I created a responsive mobile design, ensuring users could access the same features as the desktop version without loss of functionality.
Homepage
My homepage objectives centered around prioritizing key features and simplifying the overall content presentation.
Enrollment Page
To simplify course selection, the search functionality now spans half the screen, with the calendar occupying the other half, allowing instant visibility of scheduling changes.
Mobile Optimization
I created a responsive mobile design, ensuring users could access the same features as the desktop version without loss of functionality.

DELIVERY

How has the feedback we gathered helped us arrive at our solution?

After implementing these changes, I conducted usability testing with students and faculty to validate our approach. Positive feedback confirmed that the new layout made navigation smoother. However, users questioned the need for the “quick actions” section, which we removed in favor of a more optimized menu.

Design system development

My primary goal in developing the new design system was to create a dashboard that provided a calming visual experience. To uphold Penn’s established branding, I used the same base colors and similar font choices. However, I introduced vibrant colors and modern button styles to achieve a cleaner and more contemporary aesthetic.

FINAL DESIGNS

A streamlined interface that empowers students to navigate all their academic pursuits

Our solution created an effortless enrollment process and simplified degree organization, enhancing users ability to easily navigate their curriculum, understand outstanding requirements, and adjust their schedules directly through the platform.

Login page

Clean and minimalistic login page to quickly access any information a student is in search of.