SEPTA App Redesign

The SEPTA app was known for it's confusing functionality.

 

 A participant tests our new design for the SEPTA app

A participant tests our new design for the SEPTA app

 

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 Challenge

 

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

Empathizing with users

Midway through the project we were informed our design needs to be effective for people living with the eye condition glaucoma. To better understand its causes and effects, we began by researching online. In addition, my partner and I each simulated living with glaucoma for 24 hours. 

 

Goggles we covered in tape to simulate peripheral vision loss.

 

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

Findings

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

 

We used paper prototypes to test our design.

 

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 leads her classmates to be better listeners, better designers, better product developers, & better people. ”

— Tennyson Tippy, Graduate Student, surface artist & Designer