SEPTA System Status

Published September 5, 2018 β€’ 2 mins read

SEPTA System Status -->
Change Theme Change Theme

With 306.9 million annual trips, the Southeastern Pennsylvania Transportation Authority (SEPTA) has a heavily-utilized System Status page that displays critical information for riders, such as real time vehicle locations, detours, delays, and suspensions. I managed the project and work alonside the development team at PennApps Fellows to redesign and rewrite that page for the mobile era.

View Archived Site (

Easy to Navigate

One of the main concerns from the client was that they wanted keep the main page familiar to existing users. That allowed us to implement a cleaner layout that makes an extensive list of routes easier to navigate.

BeforeBefore my rewrite AfterAfter my rewrite

When an individual route is selected, critical information Alerts, Detours, Advisories, Elevator Outages, and a Live Map are displayed on the screen. The existing page had a confusing modal containing an accordion that only displayed one section at a time.

I redesigned this part of the project by creating a single page application (in React) that lists everything on a single screen. As an added bonus, hash navigation allows a user to bookmark a specific route for future reference.

Before: Modal AccordionBefore my rewrite After: Single PageAfter my rewrite

Mobile-First Design

The most common use case for the System Status page is for mobile users to track their vehicles in realtime, yet the current website is nowhere close to being optimized for the most common mobile devices on the market. Using responsive design, we developed the page to be mobile friendly with easy-to-find routes and automatic location detection (after location permission is granted.)

Mode SelectionBefore my rewrite Route SelectionAfter my rewrite Route Status DisplayAfter my rewrite

Bad Data? No Problem!

Once of the most interesting challenges with this project was working on an API (data feed) that did not provide data in a developer-friendly format. This API was full of inconsistencies (and typos!) but it was the best form of information that SEPTA had to offer. Thankfully, React makes it easy to iron out these inconsistencies, so strings like Yes and Y were turned into booleans like true as data flows in. (Don’t believe me? Click here to see it for yourself!)

 "isadvisory":"<strong class="accent-bg">No</strong>",
 "<strong class="accent-bg">issuppend</strong>":"N",
 "last_updated":"Mar 22 2018  3:31PM",
 "<strong class="accent-bg">isSnow</strong>":"N",
 "description":"Parx Casino to 54th-City"
 }, ...

About Melody

Photo of Melody!

Melody is a web developer, designer, and community event organizer based in Philly. You can find them on Twitter at @pixelyunicorn .

Tags & Sharing

#work #dev #transit
Mastodon Twitter View on GitHub Remix on Glitch

Support my work!

I do a lot of things: I write, draw, code, stream, and also drink a lot of tea. I would love to keep doing what I love to do, but these things take time in energy. That's where you come in. By supporting what I do, I have less to worry about so I can go back to doing what I love πŸ’–

Buy me a Taco! Patreon logo Subscribe on Patreon! Remind me later

More Posts