Penn InTouch Redesign
Scope: Course Project
Duration: 4 weeks, October 2021
Tools: Figma
Skills: Journey Map, Persona, Wireframing, Prototyping, User Testing, User Flow, UI Design
Deliverables: 6 High Fidelity Screens (3 Mobile, 3 Desktop)
Overview
Problem
PennInTouch is intended to be the University of Pennsylvania’s one-stop site for all student needs from course registration to financial aid. However, Penn InTouch has a clumsy interface that hasn’t been changed since the 90s and poor navigation, so students are forced to use three other sites just to get ready to register.
Goal
To redesign the current interface for the University of Pennsylvania's course scheduling and student hub, Penn InTouch. Complete all steps of redesigning - conducting user research, creating wireframes, establishing a design system and visual identity, and designing 4 High Fidelity Screens (2 Mobile, 2 Desktop). Presenting findings to the Department Head and guest UX Designer.
Design Process
I divided my project into four different phases, as shown below.
Stakeholder Maps
Undergraduate students, graduate students, professors, Penn Offices, as well as academic advisors, are the primary users of Penn InTouch. However, other important administrations, parents, and student organizations all have both influence and a stake in the success of Penn InTouch.
Upon conducting a stakeholder map, I understood that while there are other players involved, the main user group I need to design for is the students. Students spend the most time on Penn InTouch doing course registration and planning, therefore my redesign needs to be focused on the student experience.
User Flow
Starting with a current state journey, I explored the multiple steps a user must go through to register for classes, from logging into the Home Page to examining the final course schedule.
The pink highlighted steps involve navigating between two separate pages - ‘course research’ and ‘register for courses’ - which shows that the user journey involves extra navigation. For my redesign, I wanted to cut the number of steps and pages needed and streamline the flow to be simpler.
Current State
I examined the current state of Penn InTouch to identify potential pain points and rooms for improvement.
I identified 6 potential pain points and rooms for improvement.
- The navigation is confusing.
- The page is crowded with uneven margins.
- The design system - font and color scheme - and is not refined.
- The organization of information is poor.
- The course search and registration process have too many input fields.
- There is too much white space.
Primary Users
To conduct research on the user needs, I defined the key primary user groups for Penn InTouch.
Research Overview
Primary User Quotes
“There's a lot of whitespace. And there are a lot of unused links on the right hand side of the page. Center feels underused?”
– Senior engineering student interested in grad school PEER Advisor who advised freshmen
“I think it'd be nicer if course search looks more like an online shopping place where you can like do filter and sort instead of like this whack format, all vertically.”
“Registering for courses, like the fact that it's separated like two things like course search, and then register for courses. Like, I'm surprised that won't just be one thing.”
“It's too many buttons. And I feel like the biggest thing about making something user-friendly is trying to limit buttons and things to go through to get to the page that you're looking for.”
Main Themes
Pain Points
Design Elements - Font Choice - Layout - Interactivity - Too many clicks - Lack of responsiveness
- Information hierarchy and organization ### Site Areas - Announcement section - Navigation menu - Schedule display - Course research filters - Course Planning Sheet - Quick Links - Top bar on the landing page
Wishes
- Aesthetic design - Interactive design - Responsive elements - Responsive layouts - Simplified design - Mobile design - Simpler user journey - Images and icons - Customizable
- Tutorial for new students - Integration with academic handbooks - Appointment scheduling - Schedule details - Better button designs
Metrics
Positive - Uptime - Completion rates - Time saved per task - Recommendations feedback - User satisfaction
feedback - Usability feedback - Retention rate ### Negative - Crashes - Clicks - Error Rate - Time Outs - Log-in time - Back and forth mouse movement
User Need Statements
As a(n) ____ I need ___ in order to ___.
As a freshman, I need to easily see my major requirements in order to register for the right choice of courses.
As a senior, I need to easily download my transcript in order to have updated grades for my job applications.
As a student club member, I need to be able to export my schedule in order to share my schedule with friends.
As a senior, I need to easily schedule appointments with advisors in order to check on my graduation progress.
As a low-income student, I need to easily see my financial aid information in order to plan my finances.
As a junior in work-study, I need to easily complete onboarding tasks in order to get started in my job role.
Wireframes
I created wireframes for the landing page as well as the course registration page of Penn InTouch. For the landing page, I wanted to improve information hierarchy as well as organization such that the page is simplistic and easy to navigate. For the course registration, I wanted the page to be intuitive but also comprehensive, such that the page includes all of the functionalities needed to register a course without being overwhelming for the user.
Design System
In redesigning Penn InTouch, which is an existing platform for the University of Pennsylvania, it is important to adhere the University's existing branding guide, which guided my font and color palette selections.
Components
I applied the typography and color system to the design of Penn InTouch’s components.
Final Deliverables
___ ## Reflection