SEPTA App Redesign

The SEPTA app is known for its confusing functionality.

 

A participant tests our new design for the SEPTA app

A participant tests our new design for the SEPTA app

The Challenge

The SEPTA app is a native application that allows users to access schedule information, real-time updates, trip planning, fare options, social media connections, and customer service. Given the vast amount of functionality and our limited time frame my partner and I had to focus our efforts.

The original SEPTA app.

Narrowing Project Scope

We read app reviews on Google Play and the Apple store to find out what users struggle with the most. The comments were helpful, but not specific enough to for us to take action. They did not give enough detail about what tasks people were trying to complete.

Some quotes from app reviews.

Some quotes from app reviews.

We tried another method called the Radar Diagram. We asked participants to rate which features of a public transit app are most important to them. Bus and train schedules were priority for users.

Results of the radar diagram exercise.

Results of the radar diagram exercise.

Digging for the Problem

GUERILLA USER TESTING AND INTERVIEWs

 

Next, my partner and I went around campus to find students who used public transit. We asked them to use their phone to find a particular bus schedule using the SEPTA app. Here are the issues we found:

  • Participants overlooked the schedule button in the footer
  • All participants had trouble navigating through the app
  • Participants didn’t understand how to use  all the functionality

The SEPTA app home screen and quotes from our interviews

ANALYSIS AND MORE DIGGINg

Based on these interviews we developed personas to reference later

  • Mandi is taking SEPTA for the first time
  • Carla lives in the suburbs and takes SEPTA only when she comes to the city
  • Charles uses SEPTA everyday for his commute
Personas based on our interview participants.

Personas based on our interview participants.

Using the "Problem Tree Analysis" method, we learned the causes of user struggles with the app navigation and functionality.

  • overload of very similar features
  • no onboarding on how to use the app
  • confusing and inconsistent color scheme
  • unclear labels and organization
Our Problem Tree Analysis

Our Problem Tree Analysis

Additional Constraints

Midway through the project we were informed our design needs to be effective for people living with the eye condition glaucoma.

Goggles we covered in tape to simulate peripheral vision loss.

EMPATHIZING WITH USERs

To better understand glaucoma, its causes and effects, we began by researching online.

In addition, my partner and I each simulated living with glaucoma for 24 hours. 

Tasks as simple as pouring a glass of water proved difficult without accurate depth perception.

We documented our experiences through journaling. 

  • Depth perception was diminished
  • Reading caused headaches
  • I had to view things at a distance
  • Using most phone apps were frustrating
  • Motions like walking had to be done with care
  • I began to rely completely on touch to perform some tasks

I realized using most applications while living with glaucoma can be extremely frustrating. The SEPTA app was not usable. To improve this experience for people living with vision issues our app design would need:

  • Large text that is easily readable
  • Critical information centered on the screen vertically
  • Significant contrast between text and the background.

Notes from journaling throughout 24 hours simulating glaucoma

Designing the Solution

Focusing on the scheduling task flow of the app we

  • referenced labels and terms that were successfully used in other transit apps
  • used a large centered layout for the menu
  • utilized colorsafe.co to ensure our font size and color palette met the AAA WCAG legibility standard

Initial sketches and wireframes

Mid Fidelity Wireframes reflect color, type and layout

Testing our Solution

We used paper prototypes to test our design.

Findings

Users were happy with the menu, but did not like PDF schedules and having to zoom and scroll to see the times.

Iteration

We refined our designs to address this issue. We incorporated the schedule into the map allowing users to click on a location to see times the vehicle would be at their stop.

Revised designs

Revised designs

Impact

What I Learned

 

This project changed my motivations for pursuing a career in design. In designing for users living with glaucoma it made me truly connect with people. For a day I left the designers mindset and entered into mindset of the people who could be effected by my work everyday. Now I try to think of how my work can affect peoples lives for the good. 

 

WHAT OTHERS SAY ABOUT ME

“Talisha possesses a remarkable ability to truly listen. Whether you're discussing a complex user problem, or the tacos you had for lunch, Talisha is committed to fully understanding your experience. Talisha leads her classmates to be better listeners, better designers, better product developers, & better people. I'm so grateful to be in the program with this rising star. ”

— Tennyson Tippy, Graduate Student, surface artist & Designer