Eric Dai
Penn InTouch Redesign

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.

Penn InTouch Design Process

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.

Penn InTouch Stakeholder

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.

Penn InTouch User Flow

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.

Penn InTouch Current State

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.

Penn InTouch Primary Users

Research Overview

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.”

– Business and design student interested in marketing

“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.”

– Senior Pre-Med student interested in med school

“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.”

– Senior Pre-Med student interested in med school


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.

Penn InTouch Wireframe Desktop
Penn InTouch Wireframe Mobile

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.

Penn InTouch Design System

Components

I applied the typography and color system to the design of Penn InTouch’s components.

Penn InTouch Components

Final Deliverables

Penn InTouch Deliverable Desktop 1

Penn InTouch Deliverable Desktop 2

Penn InTouch Deliverable Mobile 1
Penn InTouch Deliverable Mobile 2

___ ## Reflection

Iterative Design

In terms of the design process, I learned that it is incredibly important to not focus on the aesthetics of the design from the beginning stages. It is crucial to go through the design process of researching, creating a wireframe, and creating a design system while receiving feedback from peers to create a usable and enjoyable product. Feedback allows me to realize flaws in my product that I missed initially.

Presenting Design

I really enjoyed sharing my work and presenting it in front of my peers. I like the fact that I was able to gain more exercise in explaining my design approach and my thought processes in front of others. Furthermore, I really loved viewing other people’s work. Seeing how other people are tackling the same design problem is incredibly inspiring for me because I always see great ideas that I have not thought of.

Step Back

Through this project, I learned that sometimes it is important to step back and let go of what you have initially built. The ultimate goal is to build a great product, not just a product that only I am satisfied with. Therefore, when I do receive feedback or have a really great idea that involves going back a few steps, it is important for me to be okay with that because my final product will be in better shape because of it.