An image of the main page for the Penn State Go redesign made in Figma. It features multicolored sub-apps for Food, Maps, Homecoming, COVID-19 updates, Scheduling, and LionCash

Penn State Go Redesign

  • Project Type
  • Design
  • Role
  • UX Researcher
  • Timeline
  • August 2021 - December 2021
  • Strategies Used
  • Contextual Inquiry, Task Analysis, Wireframing, Prototyping, Usability Testing
  • Tools Used
  • Figma, Canva, Loop11, Zoom

Team

My main contributions were leading and taking notes for contextual inquiries, redesigning the campus navigation experience, and conducting moderated usability testing

Problem

Penn State University launched Penn State Go in January 2020 to be an "all-in-one" app for the Penn State community's needs, but it was met with poor reception by the community at large. The community members, primarily students, shared some of these common complaints:

  • "There are so many features I just don't use"
  • "Half of these buttons just open a hyperlink to a website"
  • "A lot of the features I want are underpowered or confusing"
  • "So many of these apps are just endless menus"

Solution

Our goal was to improve the usability and relevance of the Penn State Go app, so that we could breath fresh life into the online Penn State University campus experience. In order to do this, we wanted our redesign to find a balance between thoroughness and usability of key features

Design Roadmap

Design roadmap used for Penn State Go Redesign, five phases from left to right are Empathize, Contextual Inquiry, Initial Prototype, Moderated Usability Testing, Unmoderated Usability Testing, and Final Prototype

Empathize

Persona

We created a persona based on some of the grievances we had with the app, along with who our redesign would benefit the most

A gif of a girl holding a book, and text showing the Persona and her problem. it reads "Meet Sally. Sally is an undergraduate student at Penn State. She is a transfer student, and this is her first year on campus. She's excited about the opportunities here, but needs some help navigating campus and resources."A gif of a girl holding a book. This contains the Empathize statement from Sally thinking "I want to be able to order food on Penn State Eats, use a map, and navigate a home page that is less confusing"

Contextual Inquiry

Plan

Shortly after our project was approved, we needed to individually create a plan for doing contextual inquiries so that we could enact it later. Our plans was to:

  1. Reach out to 2 - 3 individuals per person (10 - 15 participants total)
  2. Have one person conduct the inquiry while another takes notes
  3. Synthesize our findings

Contextual inquiries provided real-time insights into user interactions with Penn State Go, helping us identify areas for improvement. The Master-Apprentice model of the contextual inquiries also facilitated empathy with our participants.

Execution

After finetuning the contextual inquiry plan we wanted to follow, we all set out to conduct our contextual inquiries. Synthesizing our findings in a lab session helped us identify these pain points:

Ordering Food

Penn State Eats, a sub-app, was the main usage of Penn State Go because ordering food ahead of time fit into students' busy schedules. Despite this, they were annoyed with the complex navigation required to order food, and at having to rely on their email instead of receiving push notifications for order updates.

Navigating with Maps

Students found using the Maps sub app was like a maze trying to filter specific locations. Those we apprenticed struggled to locate themselves on campus because the geolocation feature was unreliable. Accessing the campus shuttle schedule was challenging for some, leading them to opt for Google Maps instead.

Glorified Hyperlinks

Most sub-apps in Penn State Go were just hyperlinks tied to external web pages for services that already had a mobile app, and performance for loading web pages was slow (more than 5 seconds)

Unawareness and Visual Clutter

Students found most features irrelevant and didn't tie to their experience. The clunky interface got in the way of what they were trying to accomplish, and there was no way to prioritize relevant features.

Multiple people using the original Penn State Go app in various settings such as a bus stop, outside an academic building, or inside a recreational center
Scenes from contextual inquiries

Initial Prototype

We put an affinity diagram together to see what features we wanted to keep and drop in our prototype based on our findings.

Before we put any wireframes together, we made hierarchical task analyses of how users accomplished these tasks in the existing version of the application to see how we could reduce the difficulty of performing them.

Image showing the main features for the redesign: Ordering Food, Using Maps to Navigate Around Campus, and A More Personalized Dashboard Experience

Lo-fi

I was tasked with redesigning the campus navigation experience. I made some wireframes in Figma to have the experience be more in line with other navigation apps. I also combined Maps and Buses since the features were separate sub-apps in the original application.

An image of two lo-fidelity wireframes for the Maps features. Showcases two screens, one with the user's location, and another showing building information
Initial lo-fi wireframes for Maps taking design inspiration primarily from Google Maps

Redesigning the Maps experience was a little challenging because I was trying to figure out how to best redesign it while also making it unique. For this iteration though, I thought it would be best to not reinvent the wheel by using a familiar structure.

Style Guide

We used Penn State's brand book and Material.io icons for the app's visual identity

An image of the style guide for the Figma prototype.

Figma Prototype v1

Demonstration of how Maps v1 worked as far giving location, displaying building information, and finding bus routes

Usability Testing

Not too long after completing the first version of our prototype, we decided to begin usability testing so we could obtain feedback, and see how our prototype compares to users' past experiences with Penn State Go.

Plan

We developed a script for both our moderated and unmoderated usability testing sessions, and were mindful of these considerations:

Our team recruited a variety of students that lived on and off campus. For on-campus students, we prioritized 1st year and transfer students. Additionally, we chose participants that we didn't have a personal relationship with. Our criteria was based upon these factors as we didn't want to have a biased sample pool of users. It also allowed us to see what the overall population of Penn State wanted as well as what demographic used the app the most.

Tasks and Scenarios

For both moderated and unmoderated usability tests, we had our participants run through these three tasks and scenarios:

Descriptions of the three tasks that match the main features for Penn State Go

Moderated Usability Testing

We conducted usability testing sessions remotely and in a hybrid format (in-person with Zoom) with two researchers.

One researcher guided participants through tasks, while the other took notes and asked follow-up questions, fostering dynamic discussions. We maintained neutrality, avoiding hints or feedback to elicit honest participant feedback.

These were some of our key findings from those sessions:

The two sessions highlighted a potential need to separate Maps and Buses again, aligning with user expectations from the original Penn State Go app. This confusion may have stemmed from the task wording, but design issues, particularly in the dashboard, were a huge factor as users tended to gravitate towards using Maps in the first task.

Unmoderated Usability Testing

Our unmoderated usability tests were conducted on the Loop11 platform. Using Loop11 provided an easy, convenient way of collecting screen recording data (with the additional option of audio recording) for more users with less researcher labor per interview.

I helped distribute the Loop11 tests that one of my team members created to willing participants that had 15 - 20 minutes of their time available. Some our key insights from that were that:

Usability Testing Takeaways

Overall, we recognized that our gamble paid off in how it looked, but there were major discoverability and usability issues that needed to be addressed.

Final Prototype

Improvements

After analyzing the feedback from our moderated and unmoderated usability tests, I focused on redesigning Maps again for the new prototype iteration. I also separated the Shuttles feature with assistance and improved visual indicators to show selected routes, addressing a previous issue where this was lacking.

First image of improved Figma prototype, shows home screen2nd image of improved Figma prototype, shows dark Map screen with location of user indicatedImage of Buses and Shuttles screen, shows black lines indicating bus route for White Loop is highlighted.Image of Buses and Shuttles screen. Two lines, red and brown, are shown on screen indicating two shuttle routes have been chosen.
A gif of a girl holding a phone using the new Penn State Go app. The text next to her reads: "Using our new Penn State Go prototype, Sally is able to order food, navigate campus, read Penn State news, and customize the interactive app dashboard! Now she can access all the Penn State resources she needs."

Conclusion

Learnings

Despite some faults, our Penn State Go redesign proved significantly more user-friendly than the original, raising hopes for a potential product. This project showed me the value in utilizing different user research methods, primarily moderated usability testing.

Teamwork and management were strengths, with clear expectations, communication, and equal contributions throughout. Time constraints, typical of a semester-long project, limited certain design aspects, such as further differentiation from well-known apps, and supporting more complex Eats orders (e.g. order drinks from Starbucks).

Next Steps

If we wanted to go beyond the scope of the course, we would have written a formal report of our findings and presented them to Penn State Go's product owner and design team.

Note: The actual Penn State Go app had a slight overhaul since the completion of this project, particularly with the Penn State Eats section aligning with our approach.