mbta.com is Getting a Makeover

Gene Shkolnik
Sep 26, 2016 · 5 min read

TL;DR: The MBTA has started a complete revamp of our website, and we need your help. We’re sharing our early beta in order to get your opinion on the few new features that are there. Please check it out at beta.mbta.com and submit your thoughts here. We’re also looking for talented developers. If you’re interested in joining our team, email us at ctjobs@mbta.com.

If you’ve ever travelled in the Greater Boston Area on public transportation, it’s very possible you’re familiar with mbta.com. Hopefully it’s helped you on your journey. I suspect it may have also left you a little confused about what year it is. The website was launched in 2007, and it was great — even award winning — back then. Unfortunately its design hasn’t really been updated since.

Image for post
Image for post
Our 2007 Webby Award, won for excellence in internet in the government category

The current website is not built to be used on mobile devices, nor is it optimized for people with disabilities. It can be difficult at times to find relevant information, as pages on the site have been added and removed throughout the years in ad hoc fashion. The website is well overdue for a new design and rebuild from the ground up — and my team has already got a head start.

What Exactly Are We Trying to Make?

For starters, we’re building a website that is fully functional on a smartphone. It’s not necessarily a very innovative move, but there’s a big gap between the current website’s mobile experience and what the majority of our users expect from it nowadays. So we’re going to fix that.

Next, we’re making it accessible. Website content needs to be in line with the established accessibility guidelines — well organized and easily readable. As a public agency, it’s especially important for us to ensure that we’re providing access for everyone and not excluding people with disabilities.

Image for post
Image for post
We tried many font color combinations for text to make sure it was accessible to those with vision impairments

More broadly, we are making the new website to be contextual and personalized.

We’re going to make it easy for infrequent T riders to understand the intricacies of things like available modes of transportation, fares, and hours of service.

For the folks who travel by mass transit regularly, we’ll get the beginner stuff out of their way and let them skip to the real-time information and alerts that they need for their everyday use.

Image for post
Image for post
It currently takes someone 8 steps to view a schedule for an outbound train

Our main goal is to save travelers time and precious thumb clicks.

If you look for something on the site, we’ll provide you with other useful information that will help you on your journey. For example, if you’re looking at the train schedule, we’ll tell you if your train is on time, currently boarding, or delayed. You’ll also see the alerts relevant to your trip. All of this supplementary info is there if you need it, but also unobtrusive enough to completely ignore if you don’t.

Our Process

We really, really want to get this right, and we are doing a lot of work to make it happen.

We carefully weighed our options for the technology stack and have chosen Elixir and Phoenix. This modern web development framework allows us to write elegant code in a way that is easy to test, ultimately resulting in fewer bugs on the site. Elixir and Phoenix is also very efficient with resources which makes it simpler for us to build a website that can easily scale up on-demand and handle a lot of user traffic.

For the design of the website, we’re taking a mobile-first approach. Our development begins with a smaller screen as our blank canvas and then progresses to larger sizes. This methodology results in a much cleaner website for all screens.

We’ve also created a style guide with beautiful, contemporary colors and typography. We use it to ensure that the website is consistent in its presentation and easy to read.

Image for post
Image for post

All of our design is guided by data and user research. That means using web analytics to understand how people interact with the current site. It helps us answer questions like: “How many visits do we get a day?” (100,000); “What devices do people use?” (60% mobile); “What pages do people view the most? “ (Commuter Rail schedules and alerts); “What percent of our visitors use the Trip Planner feature?” (~10%), etc…

Image for post
Image for post

In addition to web analytics, there are a number of other tools we leverage to fine-tune our insights to make for a better website.

Informizely is a resource we use to survey website visitors. It allows our users to provide feedback and rate their experience. Once the new site is launched, we’ll be able to compare user feedback and ratings from both old and new sites and benchmark our progress.

Image for post
Image for post
A word cloud generated from the most frequently used words in user feedback

We’ve also digested common usage patterns into well defined ‘user personas.’ With these user personas and our collected data as an aid for our design, we started building wireframes, mockups, and prototypes.

Throughout our process, we worked closely with the Institute of Human Centered Design; an organization specializing in design with a focus on accessibility. They helped us conduct user panels comprised of the low visioned and blind. We iterated our designs based on observations of their navigation and their feedback.

We also performed numerous user tests with Validately by asking regular users to perform tasks on the new site. Screen recordings of these sessions allowed us to identify several shortcomings in our design that we’ve since remedied.

After our trash bin folders had been sufficiently cluttered with mockups and prototypes, we finally landed on a version that works well.

How You Can Help

We’re sharing our beta with the public, but this is just the humble beginnings. We want to get your feedback early, so we’re releasing a feature or two at a time as they’re being developed. In the months to come we’ll be adding new functionality, like Personalization, Real-Time Information, simplified Fare Information, improved SMS and Email Notifications, a revamped Trip Planner, as well as many others.

We want to work with our riders collaboratively and constructively in order to create the world’s best mass transit website. If you’d be so kind, check out beta.mbta.com and provide your feedback on the MBTA Beta Website Form.

We’re also looking for talented individuals to help Boston take home another trophy. If you’re interested in making a positive impact and working with some cool technology, please send us an email at ctjobs@mbta.com.

MBTA Customer Technology

We're a small group ready to make big tech changes at the…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store