Desktop

Mobile

Course Project

Penn InTouch Redesign

My Role
UI/UX Design, User Research

Timeline
8 weeks (Sep - Nov 2021)

Tool
Figma

A redesign of the user interface and user experience of Penn InTouch, a website that serves as the primary course planning and registration system at the University of Pennsylvania

01 | Problem

Course planning and registration is an essential part of college life — fulfilling the necessary credits to graduate on time and successfully registering for the right courses can contribute to a more fulfilling academic experience for students. Penn InTouch is notoriously confusing to navigate and painstaking to use, leading to a frustrating and stressful course registration experience before the start of each semester.

How can I adapt principles of user-friendly design to transform course planning and registration into an easy, efficient, and stress-free experience for students at the University of Pennsylvania?

(A closer look at the current Penn InTouch dashboard)

02 | Process - The Double Diamond

Discover

• Analysis of current design
• User research (interviews)

Define

• Synthesize research to identify major pain points

Develop

• Wireframe and prototype
• Create design system

Deliver

• Present designs for feedback and revision

03 | Current State

For the scope of this project, I focused on the course registration process, which currently spans across 5 different tabs.
‍
Below, I’ve mapped out the user journey for creating a mock schedule. This task alone takes at least eight steps. One reason why the user journey is so cumbersome is the continuous back-and-forth between clicking into the course search page and back into the mock schedule page.

04 | User Research

In order to discover Penn InTouch users’ major pain points and wishes, I interviewed undergraduate students at Penn from across 4 separate schools. I also wanted to identify the features users primarily used so I could later reduce the information clutter.
‍
(Access a more detailed summary of my user research here)

Method

30-40 min
in-person and virtual interviews

4
Penn students from separate schools

Goal
1. Determine functionalities PiT users find most useful
2. Understand users' pain points and wishes

Key Questions
• Rate your experience on PiT - what would increase that rating?
• Which features are easiest to use? Which are most difficult?
• What do you primarily use PiT for? Can you walk me through how you achieve that task?

Findings

1️) Redundant Information

• Causes clutter
• Small font makes text difficult to read
• Users miss important information

2️) Confusing Navigation

• Unconventional navigation
results in less frequent use of academic planning worksheet

3️) Unneeded Components

• Inefficient allocation of space
• Large profile picture has no function and makes user uncomfortable

05 | Ideation

After synthesizing my user research, I drew up some low-fidelity wireframes in Figma. Below, I chart some of the key issues users brought up and the features implemented to address those issues.

Dashboard (Mid-semester)

Too many navigation tabs

• Nav bar condensed to 3 tabs based on features users stated were most useful

Information clutter

• Organized info into two sections
• Allow users to check off action items to keep track of them and encourage completion

Large profile picture

• Replaced picture with profile icon on top right

Hidden academic calendar

• Made calendar immediately viewable and set it as the first block of content

Course Registration (Mid-registration)

Too many separate pages need to be accessed for registration

• Condensed four separate pages into one by displaying the course search next to the mock schedule, and academic requirements and saved courses below.

Course registration takes too many clicks

• Added one-click register button for all courses in the mock schedule

Course Registration (Completed)

Uncertainty over whether courses have been registered

• Added a confirmation message to indicate that registration was successful

Stress over registering for filled courses

• Added a waitlist and allow students to see where they are on the waitlist (successful registration currently depends on who can register the fastest after a student has dropped the class)

07 | Final Designs

I incorporated my design system and created final designs from my wireframes for the dashboard and the course registration page.

📒 In one screen, students can search for courses, save them, and see them added to their mock schedule
‍
📗 Disabled buttons and course names in gray serve as a quick indicator that a course is closed
‍
📙 Integration with Penn Course Alert allows students to receive notifications when a full course has available spots
‍

📕 Students can directly add courses that satisfy major, minor, or general education requirements instead of searching them up on a separate site
‍
📘 Students can register all desired courses in one click and receive a confirmation once they have registered

📔 A waitlist shows students how close they are to getting a spot on a currently filled course
‍

08 | Conclusion

Through the Penn InTouch redesign, I learned to discover user needs, develop solutions to address those needs and mock up my design solutions. I also learned to think about the consequences of these design choices and create new solutions to improve them.

Reflections

Looking back, there are a few steps I would have done differently during the design process. These are areas of improvement I can tackle as I work on more designs in the future:

📎 Think broadly during the beginning of the design process (ideating and wireframing) to allow exploration of multiple different solutions

📎 When conducting user research, choose a more diverse sample that holistically reflects the users of the web app to make a more inclusive design

📎 Collect more user feedback during and towards the end of the design process

Next Steps

➡️ Design the "Academic Planning" and "Grades" pages

➡️ Conduct usability testing
‍
➡️ Work with developers to prepare the web app for deployment‍