ImageX take headless approach to their website redesign

by ImageX

Historically, ImageX has been a Drupal-focused development shop, but the organization has grown to a place where the organization offers a wider set of services across design and marketing, specifically within UX and UI design. It was recognized in 2018 that the ImageX visual identity, branding, and website did not reflect the client and employee experience, therefore a redesign was undertaken to align the visual brand with the true personality and experience of working with the ImageX team.

The site was already on Drupal 7, therefore it was a clear plan to move to Drupal 8. However, there was an extremely tight deadline of just 3 months (January 4, 2019 - April 4, 2019) to undertake the full brand refresh along with website design and development. The team chose to use an innovative headless approach to ensure that this timeline could be met, with the site being launched at DrupalCon 2019, Seattle. The full project was run internally alongside client projects which added to the pressures of the tight deadline. Using a headless approach we were able to move very quickly through design and frontend implementation. We decoupled the presentation layer completely and were able to implement a best practice, standards-based frontend Semantic HTML, CSS3/SCSS, "Vanilla" ES6 Javascript that was WCAG2.0 AA accessibility Standards compliant. While this was essentially a non-managed static version of the site we able to get pixel-perfect execution without any Drupal templating overhead.

You may be tempted to think this loses all the benefits of using an enterprise content management platform like Drupal. You would be right if we stopped there but there was much more to come. All content identified as ‘content types’ to be managed by a CMS was consumed by this platform-independent presentation layer in the form of JSON files. For the first...

Prize

Silver in UX, Interface & Navigation 2020

Silver in Website Design 2020

Created by:

Design Director

ImageX

Design Company

ImageX

Website

click here

Client

ImageX