SEPTA App Redesign

compare all screens

Current Septa App Screens

I started this project with a look at the current site and identified pain points by using the app myself and talking to some family members who commute with SEPTA regularly. I drew up a few scenarios before deciding which new features would be absolutely necessary. I knew I wanted a clean, simple, easy to use design.

original showcase

SEPTA app screens–Download PDF

 Rough and Low Resolution Site Map

I mapped out the site with two different options upon initial download of the site.


LowResUser Flow–Download PDF

Rapid Prototypes

Rapid prototype showcase

SeptaApp Rapid Prototype Wireframes–Download PDF

Wireframe Mockups

After that I used the program Balsamiq to create low resolution mockups. As I worked on those I made a few changes to the interface. In particular to the some of the scheduling screens.

Rapid to balsamiq

Septa App Mockups–Download PDF

High Fidelity Screens

I started building the high fidelity mockups in Sketch and soon discovered I didn’t need ‘home’ to be on the home screen. I also found I needed to adjust some of the scheduling screens again. I made a few versions of this ‘Purchase Pass’ Screen. The one I chose to showcase is the most modern looking of the three. I used Sketch and Invision to share my designs with a few friends and family members to get feedback as I worked. The latest version has received two thumbs up from my testers!


SeptaApp High Fidelity Screens–Download PDF

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s