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.

Main Page 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.

We 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.

Route Display 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.)

Mobile User Flow 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 us? Click here to see it for yourself!)

[{
	"route_id":"bus_route_1",
	"route_name":"1",
	"mode":"Bus",
	"isadvisory":"No",
	"isdetour":"N",
	"isalert":"N",
	"issuppend":"N",
	"last_updated":"Mar 22 2018  3:31PM",
	"isSnow":"N",
	"description":"Parx Casino to 54th-City"
}, ...