SEPTA System Status

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 (septa.neocities.org)

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.

Before After

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 Accordion After: Single Page

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 Selection Route Selection Route Status Display

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!)

 [{
 "route_id":"bus_route_1",
 "route_name":"1",
 "mode":"Bus",
 "isadvisory":"<strong class="accent-bg">No</strong>",
 "isdetour":"N",
 "isalert":"N",
 "<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"
 }, ...