Case description

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 phase, these files were stored as physical files on the file system of the website. This allowed us to fully test the site and even launch a beta with a partially managed content structure. Phase two consisted of replacing these static JSON files with a live API source from a Drupal 8 instance.

In summary, the site has been built on Gatsby & React, utilizing the latest approach and technology to be used within the market. Gatsby and React have been used for the front end with a Javascript framework as it is a better structure for front end stability. The back end was added separately after launch, using Drupal 8. This separation allowed the site to go live on time and to budget, showcasing the high level, UX and UI focused design without waiting for the CMS to be in place.