Penn InTouch

Redesign of University of Pennsylvania’s student gateway to academic, financial and profile information.

role

user research,
wireframing,
prototyping

tools

Figma

duration

8 weeks
(Sept - Nov 2021)

THE CHALLENGE

How can I redesign the course search and registration processes within Penn InTouch in a way that simplifies the user's flow and maximizes efficiency?

Course planning and registration shouldn’t have to be daunting experiences for Penn's students. Registration occurs halfway into the Fall semester, which is typically midterm season at Penn, and thus a stressful time for all undergraduates. The poor information architecture of Penn InTouch, coupled with the outdated look and feel of its user interface, makes surfing the site generally a painful experience.

To create an inclusive redesign for a diverse set of students who interact with Penn InTouch differently, I needed to understand the problem from a holistic perspective. I gathered data from students who use Penn InTouch for different purposes, with different course loads, and with a variety of personal needs from a course registration platform. I then analyzed their experiences to find overlapping painpoints, which I set out to resolve.

THE PROCESS

Skip to Solution

ANALYSIS OF EXISTING SITE

Stakeholders & Existing Flow

I wanted to visually represent the relationships between those who have varying influence over the Penn InTouch platform. I knew that the redesign should center student and advisor needs, while also keeping the direct stakeholders content, and the indirect stakeholders informed of the redesign. I also modeled the current flow of a student attempting to register for a course, with the intention to eliminate redundant and unnecessary steps to the goal in the redesign.

Flow: Registering for a course

Existing Designs

To visualize how my redesign can positively impact the student body's experience with course registration, I needed to identify the gaps that lie within the course search to course registration flow, along with the overall UI of the website. Given my experience with the course registration platform as a current fourth year student, it did not take long to pinpoint the specific flaws within the user interface, navigation, hierarchy, and overall flow of information.

Since the mobile version of Penn InTouch is just a scaled down copy of the desktop design, it's cluttered with very small text and buttons that are practically useless to students on the go. I know that many students use Penn InTouch on mobile to view course schedules, browse and register for courses, especially during the first few weeks of classes.

DESKTOP

MOBILE

User Research

I interviewed four primary users of Penn InTouch to learn more about the inefficiencies and painpoints that each experiences when performing common tasks on the platform.

RESEARCH OVERVIEW

NEED STATEMENTS & PAINPOINTS

Wireframes & Design System

Based on the user research gathered from interviews, I knew my solution needed to address the lack of visual hierarchy, as well as the outdated look and feel of UI, for both desktop and mobile interfaces. The redesign also needed to eliminate the redundant and unnecessary steps within the user flow for the course search process.

I started sketching out a couple ideas that display the information on the home page and course search page in a more organized and concise matter. I then translated these sketches into wireframes which eventually developed into high fidelity screens that incorporated Penn's branding and styles.

THOUGHT PROCESS

Displaying Schedule

A student's current schedule should hold the highest priority on the Penn InTouch homepage. Given the lack of visual hierarchy in the current homepage design, it fails to accomplish this. Students must select the semester they are attempting to view, and click "Show schedule" to expand the schedule. In my redesign, I plan to displays the student's current schedule upon landing of the home page.

Calendar View

When asking users how often they read the important dates and deadlines listed on the homepage, all replied very rarely or never. The lack of attention given to this section seems to stem from both, the very confined card that the dates are placed in, as well as the absence of a visualization tool, like a calendar. In fact, two users explicitly stated the desire for a calendar which would help students remember future events, breaks, schedule changes, and other deadlines.

Course Search Optimization

Based on the user research, there are several frustrations that arise when searching and registering for courses. Some users expressed the need for a faster, and more skimmable, browsing experience. Other users complained about the lack of useful search filters and actions for courses that are closed (maximum capacity reached). In my redesign, I plan to eliminate the frustrating course detail pop-ups, and create new action buttons that provide value to students who are registering for courses. Initial ideas for helpful course search functions included an automatic feature (I'm Feeling Lucky) that instantly displays relevant courses to each student, as well as a notification system for closed courses that become open.

Mobile Responsiveness

There is currently no mobile responsive Penn InTouch platform. I want my redesign to be accessible to all users, whether it's accessed from a computer in the library or a phone during a commute. I knew that I needed to balance the amount of information available on mobile compared to desktop if I wanted the website to be legible and easily interactive, given the screen size difference. This meant being conscious of sizing UI¬†elements to yield high touch accuracy, along with evaluating which information is of utmost value to users on each screen. For instance, in the above mobile course search wireframe, I¬†decided to only display meeting date and availability status upon first glance of search results‚Äď they were the most valuable to my interviewees.

STYLE GUIDE

COMPONENT SET

Hi-Fi Prototype & User Testing

I prototyped a course search experience that modernizes the current look and feel of Penn InTouch, eliminates unnecessary steps within the user flow, and implements helpful functions that bring value to all students looking to register for courses.

I made sure to uphold Penn InTouch's brand by maintaining the same typography and color scheme of Penn InTouch as it is currently. The following redesign addresses the lack of visual hierarchy, and restructures the information architecture throughout the pages. It was designed taking into account all user frustrations and painpoints, including my own, and is meant to make the browsing process faster, more efficient, and hassle-free.

DESKTOP

MOBILE

USER TESTING

I¬†followed up with the students I interviewed to test whether my redesign effectively enhances the course browsing experience‚Äď the feedback was promising.

Users were very pleased with the new structure of the homepage, which eliminated the overwhelming amount of links and organized the same information in a more straightforward and user-friendly manner. Students were pleased with the new options available to them for courses that are marked "closed", as well as the mock schedule preview within the course search page, both of which did not exist in the original design. Students were also extremely satisfied with the mobile interface, describing it as pleasantly intuitive. However, there were a couple points in the feedback that could further improve the mobile UI.

DESIGN ALTERATIONS

Based on the above feedback, I made the following edits to my mobile design.

SUMMARY OF REDESIGN

To summarize the new design, here are the elements that I changed or created:

Home Page

‚ÄĘ Categorized excessive links on home page into concise and intuitive navigation groups.
‚ÄĘ Expanded schedule to its full width upon landing on homepage.
‚ÄĘ Created calendar for desktop interface to view important dates &¬†deadlines. Omitted calendar view ¬†¬†¬†from mobile site based on user feedback.
‚ÄĘ Integrated Penn OpenPass for students to complete mandatory daily symptom checks.

Course Search

‚ÄĘ Created much needed filters‚Äď filter by major, minor, program requirement, meeting days.
‚ÄĘ Created waitlist &¬†notification functions for closed courses, quick register function for open courses, and contact professor option.
‚ÄĘ Created "I'm Feeling Lucky"¬†function that generates a list of courses that fit the student's schedule and fulfills one or more of their requirements for graduation.
‚ÄĘ Implemented mock schedule preview on course search.

AND FINALLY...

Penn InTouch is a responsive student based platform that makes course browsing easier, faster, and more efficient than ever before.

Mobile Responsive Course Search Platform

Offering an updated UI that enhances usability & balances information density. Students can preview mock schedules, contact professors, set alert notifications, & filter efficiently.

Reflections & Next Steps

Continue testing new design & conduct user research for the rest of the Penn InTouch platform.

The journey that this redesign ushered me through has been very formative to my personal design process. I knew that I needed to satisfy a broad set of needs that users, like Lola, Michael, Jordan, & Sammy, expressed, but also understood that those solutions had to be translated across devices to accommodate for different interactions and experiences with the platform.  

While my redesign was focused on updating the course search flow, the primary use of the Penn InTouch, there are still other components of the platform that need to be enhanced to match the new UI and flow of the redesign. I plan to continue gathering user research pertaining to other pages, such as Academic Planning Worksheet and Course Registration, and translate those needs to design solutions.