Improving the SEPTA Experience

SEPTA Mobile App
Mobile App Redesign

Overview

In this project, I redesigned the official app for the South-Eastern Pennsylvania Transportation Authority [SEPTA], a transport service with a daily ridership of 132,000. It involved auditing the existing application and redesigning it using inputs gained through user research and other UX techniques.

Industry Travel & Transportation
My Role UX Researcher & UX/UI Designer
Year 2017
Duration 4 months
  • The Challenge
  • The major challenge was to include all the features and data in the application, without it feeling overwhelming for the majority of users who use it on the go. The app needed to provide the right information as and when required. Also the users should be able access all the detailed information related to the schedules, pricing and passes through the application.
  • The Outcome
  • The end result was an app which provided a quick search feature to get instant information about a particular train/bus, but also having all the other more detailed data accessible via a deeper search. The app followed a color coding which was incorporated to differentiate the different means of transports and was consistently carried through the app to minimize the complexity of information.
Purpose of the Project

Why did I do it?

Being a student who was new to city and didn’t yet own a car, public transit was my go to option. But as I started using SEPTA, I found their app to be wanting on many fronts. So I checked user reviews on App store and found majority of people unsatisfied with the app (1.1 star rating further proving my point). The app being a so widely used and yet not fulfilling the needs of its users, made it an interesting design challenge and prompted me to undertake this redesigning project.

Project Objectives
What were the deliverables?

The goal of this project was to analyse the current application, suggest changes to it in terms of design as well as content and then providing a concept by creating wireframes. And ultimately creating visual mockups of the new version, for it to be tested on users.

The final outcome was a beautiful mobile app which provided all the information to the users on the go

Skills Applied
User Research

Conducted user interviews to gather data to find the pain points and user goals.

UX Design

Using data from user research as input created wireframes and an interactive prototype.

UI Design

Created visual mockups of the app to give a feel of what the finished product might look like.

Tools Used
Balsamiq

Used it for creating the wireframes & the interactive prototype.

Photoshop

Used it for creating the visual mockups.

Invision

Used it for creating the interactive prototype which was used for user testing.

Discover
Auditing the current version

I started with mapping out the user flows & the UI library of the current application. This helped me understand all the information provided by the app as well as the brand guidelines to adhere to. This also enabled me to analyze the frequently used user flows, thus helping me identify the pain points.

The current site map was in need of few revisions.

Define
Identifying the target users and their interactions

Using data from the ethnographic user research, I identified the two most frequently performed interactions:

  • User uses the app to check information on the go
  • User uses the app to see schedule & fare in advance
Based on this, I created three personas which represented all the users of this app.

The three groups of users who would be using this application.

Ideate
New features & revised site map

So I started the ideation phase brainstorming ways to include some new features which the users wanted the app to have such as:

  • A quick search feature which will enable commuters to know the transit and the timings in a jiffy.
  • A services module which provides timings of all the transit routes.
  • Color coding of the various transit options which is carried through the various modules like Services, E-Ticket and the Map.
  • E-Ticket module to buy ticket online and use a digital ticket/pass instead of a paper one.
  • Connect module with an in-built Twitter feed to quickly connect with SEPTA.
Then I combined them with the existing ones and came up with a new site map.

The revised site map included the current features as well as some new ones and provided a smoother navigation experience.

Build
Wireframes & Visual Mockups

Based on the sitemap & the initial sketches, I started creating wireframes in Balsamiq, iterating them according to the feedback I got from users as well as other designers. After which I created the visual mockups in Photoshop which exhibited the color coding implemented in the app.

Validation & Testing
Creating an interactive prototype for usertesting

To validate my redesign concept, I created an interactive prototype in Invision and used it to get some user feedback, which turned out to be mostly positive.

Invision Prototype
Conclusion

What did I learn from it?

Through this project, I learnt a new wireframing tools (Balsamiq). I also learnt how to audit a currently used application and how to incorporate inputs gathered through user research into my designs. The experience of working on a data heavy and complex app like this helped improve my information architecture skills, which would definitely help me in future projects.

View Detailed Case Study
And that's all
Thank you for viewing!