Subaru headless Drupal website case study
Subaru “DO” refresh project and decoupled Drupal CMS implementation
About Subaru
Subaru is one of Australia’s leading automotive manufacturers.
Over the years they have been leaders in the digital space and supported by Sitback, they were the first Australian automotive brand to sell a new car (BRZ) exclusively online.
The challenge
The purpose of the ‘Refresh Project’ was to launch the new brand message: Subaru “do”. Subaru “do” is about making choosing, buying and owning a Subaru fun and easy; and the ‘Refresh Project’ was the first step of bringing this to life on the web.
Project Background
Subaru “do” represents a significant change in the way Subaru approaches customers across the path to purchase. The messaging is fast, fresh and entertaining and brings to life the things you can do in a Subaru in a highly engaging way.
The ‘Refresh Project’ was an exciting opportunity to communicate that message and engage with Subaru’s customers, in a fun and inspiring way.
Over the last 6 years, Sitback has worked closely with Subaru to build a strong and valued partnership. We recognise the Subaru website as a business-critical platform, and since building the current Drupal platform in 2011, we have worked relentlessly with Subaru to build brand awareness, optimise customer engagement and drive dealer lead generation 24/7.
Across the range of activities we deliver for Subaru, our focus from a technical perspective has been to drive technical excellence through the implementation of best practice standards, building high-performance resilient systems and integrating seamlessly with 3rd party API systems to deliver around-the-clock 24/7 support.
The challenge
Sitback was required to overcome a number of technical and business challenges to meet the requirements and ensure the project was a success.
Firstly, to facilitate the speed of delivery and rollout of the brand refresh, a phased rollout approach was implemented – building and releasing the new site in phases whilst continuing to run the existing live site in parallel.
Secondly, using the ‘Refresh Project’ as an opportunity to make the Subaru Australia website fully responsive, and decommission the existing, separate mobile site.
Finally, removing the dependency on the Drupal CMS LAMP stack platform, and making a future upgrade or migration to an alternate platform a viable option.
Solution & approach
To answer all of the technical challenges, Sitback designed and implemented the platform using a decoupled architecture. A “Headless Drupal” approach provided a separation of the presentation layer and the data layer. In this instance, Drupal was used for the data layer to house the business logic and communicate with the database, with the presentation layer sitting in a separate framework created using JavaScript (in this case, Ember.JS).
This approach removed the Drupal CMS dependency by clearly separating the presentation and Drupal CMS (data layer). The two layers interact through an API contract. This key element introduces the ability to reuse the front end code with alternate CMS platforms.
This approach facilitated a phased rollout by allowing the majority of the presentation layer to be built prior to completion of the CMS data layer. All required API’s were ‘mocked’ with test data during the build. The final API’s were swapped in late in the development cycle when they became available, with only minor tweaks required to the presentation layer.
The implementation of Responsive Web Design (RWD) allows the site to fluidly change to fit any browser size. Its breakpoints are set to when the site actually breaks in design (if when resizing the browser the site continuously reflows). Responsive design is delivered client-side, meaning the whole page is delivered to the device browser, and the browser then changes how the page appears in relation to the dimensions of the browser window.
The three technical ingredients for responsive web design are fluid grids, flexible images, and media queries.
“The Sitback development team excelled in their speed of delivery and continually worked to the highest technical standards. Their quality of work built confidence and was key to Subaru delivering a business-critical project”
Group Digital Marketing Manager, Subaru Australia
Benefits & outcome
The technical approach taken delivered a number of project successes.
Primarily, the initial goal of rolling out a phased approach at speed across the site was achieved. The Subaru site is now fully responsive and the front end has been decoupled from the backend Drupal CMS system to allow for future upgrades or transition to an alternate platform.
There have been a number of additional benefits, including:
- A consistent brand experience across all devices is now available
- Optimised page load as we improved on the perceived loading as well as the actual loading
- By decoupling the presentation layer from the server, it now utilises the client-side resource more through the browser and enables more caching of the front end. This subsequently reduces the load on the server side – enabling faster response times
We’re proud that the decoupled architecture “Headless Drupal” approach is now being adopted on the latest version of Drupal 8.
Interested to discover how we can help your business deliver exceptional experiences?
If you want to generate more happy customers, engage employees or launch a new product or service, get in touch. We’d love to chat about your next big project!
Contact us