Boston Logan Airport

Project Overview

In late 2015, the Massachusetts Port Authority came to Blenderbox with the largest project our company had ever been contracted for. The main ask was a mobile-optimized redesign their entire system of websites, which notably includes Boston Logan Airport.

I co-led the UX of this project with Orr Shtuhl.

The full list of websites in their system:

Blenderbox was in charge of everything from functional specifications, wireframes, visual design and web identity, and both front and back-end development. It was built using an updated version of their previous .NET-based CMS, Umbraco.

We also worked with the Massport team on a dev-ops level, helping load balance servers to handle very large spikes of traffic that frequently occur without overloading them.

Initial Approach

We began the design process by looking over usability research done by a previous vendor. This included user journeys, a general sitemap heirarchy, and important content to look out for when establishing a formal content model for the CMS.

We also had access to years of Google Analytics data to help give us an idea of how users interact with the site.

As is standard with some of our other projects, we also came up with a set of four simple questions that grounded our design decisions going forward.

Navigation System

Our first true design task was to figure out the navigation system for the site. As we worked through this system, we kept in mind that it would be templatized across multiple sites.

As we moved into development, it was also critically important that the navigation system was implemented in such a way that allowed for users with screen readers, or users with very zoomed-in browsers would be able to access the navigation appropriately.

Mobile
For the mobile concept we lead with expand/collapse modules for top-level items that the data presented as high-priority. For lower-priority main navigation we simply presented them as links with no children.

Desktop
The desktop navigation features a context-switcher on the top-left hand corner to move between properties. This also acted as reinforcement of the Massport brand, which was a key requirement from the Massport team. Main navigation links are displayed in the section below it.

Alerts

Traffic spikes to the site were almost always a result of either inclement weather or some sort of unforeseen event, so a flexible system to manage different categories of alerts on some or all Massport sites was important.

Alerts can be categoried as either high or low priority with either a red or yellow color distinguishing the two.

Homepage Templates

Below are examples of the various types of Homepages that can be individually administered in the CMS.

Boston Logan
In this template, we decided to lead with a flight search, Arrival/Departure Buttons, and a collection of "Quick Links", or links that we found were the most popular in Analytics. The arrivals button is slightly larger due to that page being noticeably more popular than departures.

Another thing to note is the lack of a flight listing, which is common on other airports. We decided against that since the chances of someone's flight being on the front-page of an airport with hundreds of flights a day were slim to none!

Worcester Airport
Since this airport was fairly small, we decided to lead with a flight list. There is also a list of quick links ordered by general traffic and feedback by the Worcester Airport team.

Massport Homepage
For the Port Authority homepage, we led with a small description of the agency, along with a set of frequently accessed links.

An interesting design note: Most people hit this particular page by accident, meaning to go to Boston Logan. Because of this, we got rid of the "Explore Massport" dropdown and spelled out all properties across the top of the heading area.

This is also why we led with a description!

This template was also designed to be a base template for the other small homepages in the Massport web system, like Conley Terminal, Hanscom Field, Conley Terminal, or any new properties that might arise.

Flight Status Template

Among the highest trafficked pages, outside of the homepage, is the Flight Status page for Logan Airport. Everyday hundreds of flights arrive and depart Boston Logan.

We sought out to build the most concise and accessible flight status page that we possibly could based on research on competitive airport sites. Flight information is pulled in from a proprietary flight information database and displayed on the front-end with an AJAX call.

It was also an import design decision to not have a flight detail page. After careful consideration we didn't find that these pages provided anything that a simple table couldn't.

Logan Airport Map

While we weren't in charge of the development of a new interactive airport map, we did need to update it both structurally and aesthetically.

Our primary goal was to make sure that the map preformed well on a mobile device, which wasn't the case with the previous version of the map. This required taking into considering the flow of a user digging into a specific terminal or locating a shop or bathroom.

We also used analytics data to determine how exactly users get to the map. In the following example, we're showing an example of a user accessing the map via an internal search result (which was a common pattern we noticed) or through the main landing page for the map.

User Research

We preformed a large amount of in-person user-research on both mobile and desktop contexts, and designed tests to both assess the high-level comprehension of the interface and as well as specific workflows that we knew were important (finding a flight, contacting lost and found, finding a coffee shop, among others).

We build the prototype of the desktop and mobile sites using Invision and used a tool called Lookback to record videos of participants and shared them with key stakeholders.

One surprising finding was that mobile "Hamburger" navigation is surprisingly ineffective. That's not to say that user-comprehension is increasing, but many users, young and old, had trouble finding the mobile navigation. Our solution was to place the word "Menu" next to the icon.

You can read more about that phenomenon here!

Key Takeaways

In the end, Massport's website system was a monumental effort involving constant communication with design, development, and our project manager.

I found that:

Project Team

UX Team: Luis Queral and Orr Shtuhl
Art Director: Ben Paddock
Developers: Irsal Mashoor, Will Brand, Jordan Smilovic
Project Manager: Jessica Principato