Infographic design and website for the MBTA Dashboard

One of our recent web design and infographic design projects launched! Take a look at www.mbtabackontrack.com, a website that shares MBTA performance data with the public and also features a set of really fun infographics to explain how the MBTA measures reliability and ridership (FAQ section).

The client

Massachusetts Bay Transportation Authority (MBTA)

The project

The MBTA needed a tool that allows the public to access data around public transit performance, reliability, consumer satisfaction and ridership. The goal was to display the information in a  user-friendly way (and not to create another jargon-filled report style website).

Design challenges

There is A LOT of data. What is the focus? How do consumers think about performance and reliability? How do we display the information so consumers understand it, not transportation professionals? We approached this complex information architecture, website interface and infographic project from the customer perspective. After organizing the information into intuitive wireframes, we designed a simple, modern, mobile responsive interface for the website.

The data is divided into 2 levels: the homepage design features the high level information with 4 simple infographics. Each of those infographics links to pages with the data details. Reliability, for example, is displayed by commuting mode (bus, train, subway) as well as in detail for every single line.

Accessibility was an important aspect of the website design. Making sure that website visitors with screen readers can access the information, we designed each data chart to also be available as a table.

Explaining how the MBTA measures reliability and ridership in an infographic was a challenge. While some aspects are very simple and straight forward, there are many nuances and details. Take a look at the final graphics.

Example of infographic design on a website showing transportation reliablity

 

Read more in the Boston Globe