Code & Platforms

Migrating Jaybird, One Pixel at a Time

19 Mar 2017, Jacob Morgan

JayBird website displayed on tablet, website, and iphone

Hero is working with Logitech on a number of projects, the first of which was transitioning the website for Jaybird — its sport headphones brand — from a customized system built on Renga CMS to a modular one built on the Adobe Experience Manager platform. Unlike projects that start with strategy and design, in this case the design and content already existed for the site, but needed to be re-engineered to fit a new platform.

Component Analysis

The Jaybird layouts are graphically emotive and full screen, with very precise layouts. Every layout was adjusted carefully, pixel by pixel, break-point by break-point, to match headlines & widgets with full screen graphic backgrounds. We needed a modular solution with enough flexibility to support the majority of the Jaybird layouts. What we came up with was a 9-point grid with a parsys they can populate with media components, along with width controls. This new component accommodates almost every page configuration on the site.

Range of Jaybird products

Of course, there is always some amount of push and pull between designers and engineers when it comes to the level of customization available on each component, and Jaybird was no different. The design team had to re-crop many of their art assets to fit into the proposed Nine Point Grid Component, and we had to add a number of layout modifiers to accommodate their requests, but ultimately we found a happy medium.

Jaybird headphones with content area overlay

Paying off technical debt to prepare for digital wealth

Previously, Jaybird had two content authors working on a highly customized system. That process worked for a while, but it was not scalable. The new AEM platform enables distributed authoring with a modular system. This project is a gateway to a whole suite of products we will be implementing for Logitech, including Adobe Target to provide related product recommendations, as well as analytics and a Digital Asset Management system. Ultimately, these tools will enable Logitech to deliver excellent customer experiences across a variety of sites, engaging and delighting customers along the way.

Two iphones with jaybird mobile interface