Path&Penn
Streamlining Enrollment for an Intuitive Student Experience
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?
the Solution
Empowering students to explore any of their academic aspirations
Homepage
Degree Planning
Calendar Integration
Mobile Optimization
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
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.
What features do students use? Are any left untouched?
How do students discover interesting classes and keep track of their requirements?
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:
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.
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
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.
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.
Homepage
Clean and minimalistic login page to quickly access any information a student is in search of.
Dashboard Customization
Integrated calendar functionality to keep planning efficient throughout the school year and stay on top of coursework.
Degree Planning
Users can easily track and manage their course curriculum across major, minor, and elective requirements. The updated system automatically stores active and upcoming classes that satisfy each student’s specific requirements, helping them stay on track with their academic goals.
Responsive Mobile Design
The mobile-optimized Path@Penn provides seamless access to all key features, mirroring desktop functionality. Students can quickly navigate schedules, degree requirements, and profile updates on the go.
CONCLUSION
Final Thoughts
This project, my first real-world UI/UX work, was incredibly enriching and allowed me to delve into various aspects of interface design, from site mapping to developing design systems. This experience underscored the importance of thorough user research and designing with accessibility in mind.
Given more time, I would extend the redesign to encompass the entire Path@Penn system, particularly focusing on improving the course search and registration pages. The valuable insights from my professor and classmates were instrumental in guiding me through this project and helping me grow as a designer. Thank you for taking the time to read about my work!