MBTA Website

mitx-winner07 wedbby-winner07
It was May 2006 when I jumped at the opportunity to put together a bid for what would become one of my largest and most satisfying web projects – the complete redesign the MBTA’s website. My approach was to think of what a “rider” would want in a website: a resource to help me make the most of the transportation system, to help me make it a part of my daily life. Being a frequent user of the MBTA, it wasn’t hard to quickly imagine what I would want a site to do for me. So I sketched some ideas up for some key screens and collaborated with my team members at RDVO on a killer presentation to show off these ideas. What was remarkable was not that we won the project over some giants in the industry, but that this experience-centric approach was entirely unique among the twelve responses to the RFP.

I played a number of key roles on this project, beyond basic UX design. A quick rundown of my role on the MBTA project:

  • Account Manager – budget, schedule, clients (a lot of them), meetings, ass-kissing
  • Team leader – I was on point for a small internal team of five
  • User Experience Lead – developed all wireframes, conducted user research, fought hard against bad ideas from the corner office
  • Info Architect – audited all the old content, developed the new information architecture

Experience Design / Wireframes

After we conducted an audit of the site content, a competitive analysis and ran a survey on the website, I began to put together a new information architecture and wire frame the screens.

The proposed new information architecture for MBTA.com

The proposed new information architecture for MBTA.com

The homepage was designed to be a dashboard for riders.

Homepage
I wanted the homepage to serve as a dashboard for riders


This was one idea I had that we stuck with through the end - a station page that told you about everything a regular commuter needed to know.

Station Page
This was one idea I had that we stuck with through the end - a station page that told you about everything a regular commuter needed to know.

I extended a format from an internal MBTA document to lay out all the stops along a subway line.

Subway Route
I extended a format from an internal MBTA document to lay out all the stops along a subway line.

Every route has a Google map with the stops marked and upcoming pickup times.

Route Mapping
Every route has a Google map with the stops marked and upcoming pickup times.

This wasnt a new idea at the time, but keeping it simple was a challenge. I wanted this to work for my mother. The logic of the technology the MBTA could offer however required us to ask and tell more than I would have liked.

Trip Planner
This wasnt a new idea at the time, but keeping it simple was a challenge. I wanted this to work for my mother.

This wireframe shows a few notes about functionality.

Trip Planner - annotated
This wireframe shows a few notes about functionality.

I wanted to turn a very clunky, unhelpful tool into something that was fun and informative

Service Nearby
I wanted to turn a very clunky, unhelpful tool into something that was fun and informative

There is a lot of information available regarding routes, vehicles and elevators. I wanted to keep it all at your fingertips but not all at once.

Service Alerts
There is a lot of information available regarding routes, vehicles and elevators. I wanted to keep it all at your fingertips but not all at once.

Design

I had two excellent designers and two awesome developers on this project who together did a magnificent job turning my ideas and wires into a reality. Here is a rundown of some key screens to see how it turned out. Of course this is all still live, almost exactly as I wanted it to be in 2006 so dont take my word for it.

I was really pleased with the design - it present a lot of functionality but not too overwhelming. Nowadays I think its all a bit crammed together - it could use some usable upgrades to ease people into it better.

I loved how this came out. A lot to do but not overwhelming. Now I think its crammed together too much - I know better now.

Its easy to pick on this old geezer. It did a lot of the same things the new site does, just in a very bad way.

Its easy to pick on this old geezer. It did a lot of the same things the new site does, just in a very bad way.

The final version of the station page - not everything I wanted but close.

The final version of the station page - not everything I wanted but close.

We simplified the interface even further after testing indicated it was too complex.

We simplified the interface even further after testing indicated it was too complex.

The Service Nearby tool

The Service Nearby tool

The project grew substantially when the MBTA asked us to introduce everyone to the Charlie Card. It complicated the pricing and the entire ticketing experience. We set out to simplify it.

The project grew substantially when the MBTA asked us to introduce everyone to the Charlie Card. It complicated the pricing and the entire ticketing experience. We set out to simplify it.

We designed a four-legged approach to the Charlie confusion and offered both the cliff-notes and the detailed versions to riders.

We designed a four-legged approach to the Charlie confusion and offered both the cliff-notes and the detailed versions to riders.

This entry was posted on Monday, November 30th, 2009 at 3:31 am and is filed under Featured, MBTA Website. You can follow any responses to this entry through the RSS 2.0 feed.

Comments are closed.