The Frontend Development of the Reimagined HelloJetBlue

Marcel Moreau, Lead UX Engineer
Posted on Feb 23, 2017

With its 2017 Intranet Design Annual Award from the Nielsen Norman Group, JetBlue’s intranet (HelloJetBlue) proved it is a huge departure from intranets of the past. Today 20,000 JetBlue Crewmembers utilize the intranet daily to check company news, download assets, stay informed on current operational status and much more.

Furthermore, HelloJetBlue is designed to accommodate all of its Crewmembers, whether they are on the ground or in the air; using a desktop, tablet or a smartphone.

A delightful brand and an unmatchable experience

With such an iconic and playful brand, you can imagine that JetBlue takes pride in how it was represented. Imarc took everything into account to ensure an unmatchable experience for its customers and Crewmembers. JetBlue’s five core values of Safety, Caring, Integrity, Passion and Fun helped guide our frontend development process. We couldn’t build the stereotypical intranet: numerous, stacked rectangular content areas on a dashboard. HelloJetBlue needed to be FUN, usable and perform well.

One way we decided to help JetBlue stay true to its brand is through animation. Subtle animation throughout the intranet adds a lively element and helps keeps users engaged. By using Velocity.js and its optimized animation engine, we were able to achieve better performance in terms of speed and processing.

Multiple devices, multiple breakpoints

JetBlue has seven workgroups which include Airports, Customer Support, Inflight, Pilots, Support Center, Sys Ops and Tech Ops. Crewmembers across all Workgroups access HelloJetBlue in a number of ways across a multitude of devices. Some Workgroups are given company-issued iPads, while others rely on low-powered Citrix terminals and others utilize desktop and laptop computers. In addition, we need to be mindful of this remote workforce that relies heavily on his or her personal smartphone. Imarc took all this into account and chose three CSS media-query breakpoints:

  1. Small - devices with viewport less than 669 pixels wide
  2. Medium - devices with viewport between 669 pixels and 1023 pixels wide
  3. Large - devices with viewport 1023 pixels wide and larger

One benefit for Crewmembers was the continuity of the primary navigation pattern across all breakpoints.

Modern browser support

At the start of the project we thought that we were going to have to support some older versions of Internet Explorer but we were delighted to hear that JetBlue’s Tech Ops Workgroup would be upgrading all internal browsers to Internet Explorer 11. We could of course handle this requirement, but we knew it would limit the interactive animations that bring HelloJetBlue to life. Knowing this ahead of time allowed us to plan for more progressive front-end features such as Flexbox and CSS animations and transforms.

Sass and modular JavaScript

At Imarc we are big fans of Sass. It’s almost the industry-standard at this point (maybe it *is* the standard) due to its super powerful processing using variables, mixins and calculations. It brings strength to previously static stylesheets. HelloJetBlue was a project where we truly made a point to write JavaScript in a modular pattern. This allowed us to segment our scripts and leverage namespaces.

The end result

Collaborating with the stakeholders at JetBlue allowed us to push the company’s intranet to the next level and design it for Crewmembers and their key business tasks. We’re proud of our frontend development process and the results it has garnered. Frontend technology is always in flux and we look forward to constantly pushing HelloJetBlue as a leader in of the intranet world.

Interested in learning more? Let's Talk!