Back to Blog

Transit transformation: MBTA website redesign challenge


My final project here at Fresh Tilled Soil was a redesign of the homepage of the MBTA website. This wasn’t a redesign that I was going to take to the mayor and shove in his face, spouting all of the reasons Boston is doing it wrong. Rather, it was a way of letting me develop my skills as a UX designer by really understanding what people (the users) desire in a product and reshaping that product towards those needs. I was allowed to choose the site myself, and I immediately thought of the MBTA website because the current version looks more like an advertisement for the MBTA and it’s affiliates, than something I’d use to help me get around Boston. The site needed to be remodeled in the eyes of the user.

The redesign challenge allowed me to put into practice the bulk of my acquired skills from the apprenticeship. This included typography, web-form design, and a new wealth of front-end coding knowledge and mobile-first strategy. Above all, I wanted to make the site responsive to users needs, wherever and whenever they were accessing

Screenshot of the MBTA site

So why does need a makeover? To give a designer’s diagnosis, the site is suffering from linkemia, tabular dystrophy, and clutteritis, a lethal combination of poor user experience. In an user-centered utopia, every product would directly address needs without any extra bells and whistles or “marketing” as it is now called. If you look at any transportation website, MBTA included, you’ll probably see that the marketing and self-promotion of the transportation department has crept up, over, and on top of the major functionalities that users demand.

In my redesign, I aimed to reunite Bostonians with a clean, usable, and gosh darn good-looking site. A noble cause.

For the people, by the designer

The first step of the redesign process brought me to a small cafe near my house where I conducted some initial user testing. Users are the most important stakeholder of this project—they are the people who use the website, who ride the buses. Also, there’s no such thing as bad user testing. Anything a user tells you that they desire or that they are frustrated by, they are right. It’s like telling your friend he’s lying when he tells you he’s hungry. I asked friends, I asked strangers, I asked co-workers, and I asked people on social media: What do you want to see on the MBTA website? Why do you go there?

Sketch of two stick figures

I discovered that Bostonians use in a variety of ways, but there were common trends with the mobile and desktop scenarios. People checking on their computers were more likely to check schedules for buses and plan trips in advance while people checking on their phones were searching for nearby stations to their immediate location. Many users were frustrated by how difficult it was to reload their Charlie cards. By understanding what users wanted in their times of need, I was able to lay the foundation for a successful problem-solving product.

After discovering what the people wanted, I returned to the original site to see what could be recycled from the old into the new site. At first glance, there is an overwhelming amount of text. The signal of action seems lost in a debilitating array of short snippets of information. With the users in mind, I searched for links, buttons, and tabs that would address their needs. Some of the most important content, such as the “trip planner” and “schedules” are present on the page, but they seem to be hidden in the visual hierarchy. Not surprisingly, the most eye-grabbing part of the page is the photo slider in the top right, filled with seasonal announcements and special offers.

Since I was only redesigning the front page of the website, I printed it out. Yes, I printed out the Internet. It’s a healthy practice for a designers to get away from the screen and mark things up with pen and paper. Also, printing out the page allowed me to see’s homepage for what it was: a page. With the page in hand, I took a marker and crossed out all of the junk, all of the stuff that didn’t address the core needs of the users I interviewed. This was a humbling process. By the end of the melee, I had crossed out nearly the whole page. What was left was:

  • “Schedules & Interactive Maps”
  • “Trip Planner”
  • “Service Nearby”
  • “Charlie Card Info”
  • “News”

After separating the fluff from the valuable content of the site, I was ready to begin prototyping. As with most of my UX projects, I began sketching out variations of MBTA homepages, shuffling through different ways of displaying the important information on the homepage. I can’t really say enough about sketching ideas before putting them on a screen.

Round 1 interface sketches

As you can see, there is a lot less information than the original site. Not surprisingly, people checking the MBTA site have very specific goals in mind, i.e. “I want to find the nearest station” or “I want to see when my train leaves tomorrow.” I didn’t want them searching endlessly for their solution; it should be right where they expect it. I also wanted this site to be mobile first. This isn’t to say that I wanted to design the new MBTA site for mobile devices; it means that I wanted the layout of the site to respond intelligently to users who accessed MBTA on different devices. By aiming for a flawless mobile experience, the desktop experience would simply be an extension of the smaller screen with minor content changes to reflect the situation. In both the mobile and desktop views the “Nearby Service” module is prominent. This is because both mobile and desktop users were mostly interested in finding out about services near them.

Building the foundation

For the next stage of the prototyping process I jumped right into coding. The front-end framework Foundation was extremely helpful. If you’ve never heard of Foundation, it’s essentially a responsive interface starter kit for building websites. Shout out to the team at Zurb for such a fantastic product. Foundation probably saved me a week of coding that I would have spent perfecting typography ratios and media queries.

With the Foundation in place (pun intended), I could move on to the more intricate functionality of the site. I spent most of my time during the prototyping stage building a “Nearby Service” display using the Google Maps API. Of all the functions of the site, I deemed this one to be of the most value to the users who would want to both view nearby locations and check nearby schedules. This is the most functionally dynamic element of the site. It shows you where you are, the different types of services nearby and allows you to filter these services by type.

Here’s my hastily—yet consciously—done take on a more usable, more useful, more appropriate design aimed at two different user experiences:

redesigned site

Moving forward

No product is ever finished. This isn’t a cop out; this is a reality. While I spent three focused weeks researching, sketching, and building the MBTA homepage, there are still improvements to be made. For one, the site looks amazing on a large web browser and small handheld devices, like iPhones, but there are slight changes necessary for screen sizes in between.

I want to reiterate, this post is not suggesting that the MBTA site should look like my design. This design is arbitrary. My aim was to reimagine the MBTA main page according to some of what common Boston folk believe to be important and partly according to my own whim and preference. After all, why not make this a fun exercise?

Check out the live, functional version here:

Author Will Dickey

How we work Process

Product Hero Talin Wadsworth