PennInTouch (PIT) is a portal for UPenn students that serves as a hub for finding and registering for courses and viewing information about their academic history. The purpose of this project was to redesign a crucial part of PennInTouch. It was motivated by the unintuitive and frustrating experience students face using the website.
User Research
Wires
Prototyping
Figma
Adobe CC
4 weeks
My first step in this redesign was to conduct research on the site's user group: UPenn students. Specifically, I wanted to understand how UPenn students use PIT as a tool in navigating their academic journey. I sent out a survey to 20+ users of PIT and conducted detailed interviews with 3 students.
I grouped my insights by theme. Below you see many of the insights I gathered through my survey, interviews, and an exercise in which I observed how my interview participants navigate through PIT on both mobile and desktop.
After conducting this research, I decided to focus on a single aspect of PIT-- its Academic Planning Worksheet. The Academic Planning Worksheet is a page that lists all school and major requirements for the students and helps visualize which requirements have been met. My participants agreed that they would find the feature helpful if it was updated, as they all turn to other software such as Excel or Google Sheets to fulfill this page's function.
Next, I carefully examined several screens of PennInTouch's current Academic Planning Worksheet pages to more fully understand its current layout and make note of design oddities. These notes are a mix of my own opinions and comments that my interview participants made when I had them interact with the page. Afterwards, I create "How might we.." statements to guide the creation of my wireframes.
Reorganize + declutter this page; get rid of the second page that no one uses
At this time, only academic advisors have the ability to edit this page; grant editing ability to the user as well
Include a multi-year visualization (table or timeline)
Give the user options to easily access the academic requirements for different majors + minors
Provide a recommended 4-year plan for each student’s chosen major/ minor combo
Guided by my research and notes, I created wireframes for a new Academic Planning Worksheet page. This is the main structure of the new page. I eliminated the two tabs and aimed to spread out the content neatly.
As part of my iterative design process, I created functional prototypes to invoke the main interactions before creating the high-fidelity version. Some of these prototyped interactions included students viewing requirements for different majors and checking which sector requirements they have fulfilled.
Additionally, I was uncertain about the best design decision regarding a specific step of the experience. By prototyping these wireframes, I could test both versions with users to discover which one to use. I explored two ways users could self-delegate which course fulfills a specific requirement and showed both options to UPenn students. I based my decision off their responses.
Lastly, I created a high-fidelity prototype in Figma. I stayed true to UPenn's brand guidelines --- with one minor change that I used Open Sans font rather than PennInTouch's usual Tahoma font.
Iteration is a key part of the design process; iterating early will save a lot of time.
My user base were tech-savvy users who have used this poorly designed product for years. They were eager to communicate how their expectations are not met and suggest alternative options. By involving them in the design process, I could account for their behaviors, context, expectations, and goals.
As a designer, I am trying to find the best solution to a problem. It is best to be practical, empathetic, and goal-oriented.
