Houston Airport System

  • User Experience
  • Design
  • Intranet
  • SharePoint

The Houston Airport System relies on a bustling intranet site to communicate effectively across four city airports. “Connect,” as the site is fondly known, was the result of extensive user research, analysis, and information architecture.

Concept to Connect

The Houston Airport System project team had a clear picture of what they wanted from the very beginning. They heard the requests from airport employees asking for mobile device support. They took support calls helping users unable to find the information they were looking for. They maintained an increasingly disorganized intranet that had started to show its age.

The initial interface wireframes created by the Old River Creative team sought to provide a remedy for these and many other unseen issues that we found in the existing system. After a period of user research, audience segmentation, personas, and content inventory, it was clear that patterns existed in the vast web of content found on the old intranet website. The information architecture team created site maps and wireframes to organize content into logical taxonomical classifications. The Connect home page was designed to provide at-a-glance information to thousands of employees across the airport system. From upcoming events, to news, to a weather alert system, the design presents information in an organized and easily navigable tile-based structure.

Exploring aesthetic design

Several style tiles were drafted to explore the creative design aesthetic used to render the complete interface as it would be built on the SharePoint platform. Colors, typography, and other aesthetic variables were defined early in the project to reduce revision time and facilitate discussion regarding creative direction. The chosen tile that emerged employed a bright and crisp design style that would later define the look and feel of the entire intranet.

Style tile option

Following the example set by the chosen style tile, Old River Creative illustrated several logo ideas by which to identify the new and improved Connect intranet website. The final logo utilizes elements of the Houston Airport System brand in conjunction with simple typographic variations to create a sharp and recognizable symbol for the newly designed website.

Connect logo

Making the most out of SharePoint

Mega menu navigationEveryone involved with the project knew that creating a simple solution for navigation would be a challenge in such a sprawling intranet. Using the polished taxonomy and site maps created earlier in the project, consultants at Old River Creative designed and built a truly unique three-tier “mega” navigation menu control.

This control was built to be accessible and functional on device screens of all sizes. Smaller screens render the navigation options as a touch-friendly off-canvas vertical accordion menu. Larger screens use a more traditional horizontal drop-down menu style as space allows.

The development team at Old River Creative used responsive design techniques to allow content throughout Connect to adapt and display seamlessly on smartphone, tablet, and desktop screens.

On each device, SharePoint templates and customizations transform out-of-the-box list information into stylized controls that look just as good as they function. Using a combination of simple SharePoint management features and front-end template customizations, the team was able to create something that looked entirely unlike the platform on which it was hosted.

Design example desktop Design example mobile Design example desktop Design example mobile

The newly designed intranet website allowed the Houston Airport System IT and communications teams to communicate with employees from throughout the organization through announcements, events, and alerts. In addition, each organization department has the ability to push their own announcements, events, and alerts out to their own department pages, where a personalized mix of organizational-level and departmental-level content is displayed in tandem.

Announcements slider desktop