Glen Dimplex

Where it started: building the Glen Dimplex platform

Drupal website development working with a design agency

The Challenge

At its core this project saw the requirement for an eCommerce solution being developed, however, we knew from the outset that in time a number of different sites would be required that would all utilise the same code so things had to be developed in a scalable fashion.

What we were essentially creating was a platform on which new sites could be built without huge overhead. Not all the sites would require the same functionality so each would be configured to use only the relevant functionality from the core platform.

ComputerMinds handled the development side of things with a design agency providing us with designs to drive the development. We also needed to make sure that the sites tied in nicely with the client's ERP solution, which meant writing some magic to tie the two together seamlessly.

Our Solution

On this project we worked alongside a design agency who handled all the aesthetic side of things freeing us up to focus on the technical stuff, which we explore further below.

Same code, different site.

This project required a number of different sites that all utilise the same underlying code. Whilst each site is distinct and this isn't a Drupal multisite setup an approach was taken to maintain only one codebase which we could then use as a starting point for new sites as and when they were needed. The huge advantage of taking this approach was that once the initial development was completed it became quick and easy to build new sites that leveraged common functionality between the sites. So all we had to focus on was theming and configuring the new sites as required.

Learn more about multisite installations

ERP Integration

This project saw a requirement to fully integrate with the client's ERP solution, System 21. This included an automatic price and stock migration every night, and full product data storage in a "product import" database used as an API based resource.

Flexible Page Layouts

In order to give content editors maximum control over how we render certain pages we make use of 'tiles' to allow editors to build up engaging pages from a set of predefined 'tiles'. Styling is consistently applied so the focus can be on the content!

Learn more about Tiles

Rebuilding the platform in Drupal 9

A full upgrade (rebuild) of the Drupal 7 Glen Dimplex platform to Drupal 9 was required due to Drupal 7 getting ever closer to its End Of Life date. The rebuild had to retain all existing multilingual capabilities, eCommerce functionality and SAP integration. By the time the upgrade to Drupal 9 had started, the Drupal 7 Glen Dimplex platform had grown to power 18 different websites with 11 different themes, almost 30 different tile types along with multiple content types and taxonomies! The scale of the task at hand was apparent, and we knew we needed a sensible approach to configuration management from the get-go to make managing the differing configuration between the various sites as easy as possible.

The Challenge

A full upgrade (rebuild) of the Drupal 7 Glen Dimplex platform to Drupal 9 was required due to Drupal 7 getting ever closer to its End Of Life date. The rebuild had to retain all existing multilingual capabilities, eCommerce functionality and SAP integration. By the time the upgrade to Drupal 9 had started, the Drupal 7 Glen Dimplex platform had grown to power 18 different websites with 11 different themes, almost 30 different tile types along with multiple content types and taxonomies!

The scale of the task at hand was apparent, and we knew we needed a sensible approach to configuration management from the get-go to make managing the differing configuration between the various websites as easy as possible.

Our Solution

A carefully-considered multisite setup

When setting up multiple similar sites, it's almost always advantageous to run a multisite setup. There are still problems to solve, but careful requirements gathering and architecture planning should bring the reward - a powerful, consistent web platform for all stakeholders.

Learn more about running multiple sites

Configuration Split

We decided that the (brilliant) Configuration Split module would be used to manage all the different websites' configuration. The module - which we install on every Drupal 9 website that we build - really came into its own for this build as we were able to add a separate configuration split entry for every brand site that needed a different configuration.

This meant that we could have one large pool of configuration which would be shared across the websites. Each site could have individual overrides for specific parts of the configuration saved into its own configuration split entry. Things such as website name, website homepage, active theme and enabled languages (amongst other things) were all split off, so changes can be exported and then would only appear on the website that needs them.

Some brand sites also have additional specific functionality or modules that are only suitable for that particular site. We separated those bits into separate splits so that they could only be enabled on the websites that needed the functionality.

This was probably the most extreme example of an implementation of configuration split we have implemented so far at ComputerMinds, with over 20 different configuration split entries for the various platform websites and 'specific functionality' splits. This demonstrates just how powerful the module can be, especially when handling the configuration of a complex multisite platform such as this.

• Multisite installations - run multiple similar Drupal sites from the same source code
• Explore Drupal Explore our Knowledge Centre, replete with guides on key Drupal concepts and features
• Upgrading to latest Drupal Our dedicated D7 page, where we discuss in further detail your LTS options and how we can help

The Big Migration

The big task for the rebuild was the migration of all the website content from Drupal 7 to Drupal 9. With our expertise in the (especially good in Drupal 8/9) Drupal migration system, we created over 80 fully customised migration scripts to migrate the various content types, taxonomies, field collections, paragraphs, commerce data, user data, and more. Alongside this, we created a multitude of bespoke migration source & process plugins to ensure the data came across exactly as needed by the data model in the Drupal 9 build.

An important part of any large migration is thorough testing. Throughout the building of the migration scripts, there is a constant cycle of testing --> making changes --> testing again, to ensure that the data comes across exactly as expected and that any previously unforeseen issues are caught and fixed before doing the final migration on the production website. We take a meticulous approach when developing data migrations and will only run the final migration once we are 100% happy with the results.

Once all of the hard work was completed with the migrations, when it came to migrating a website's content from Drupal 7 to 9 it was immensely satisfying to run a couple of commands and watch everything come over perfectly and display exactly as it did on the Drupal 7 website (once the themes had been rebuilt and ported over, of course!).

Custom Migration Plugins

We wrote bespoke migration plugins to transform the incoming data before it was saved into Drupal 9.

SAP Integration

Being a Drupal 9 website, we used the Drupal Commerce (2.x) suite of modules to power the eCommerce functionality on the web shop. An important part of this was to have an integration with SAP for customer order data. When a customer places an order from the website shop, the website needed to automatically export the order onto the server into the correct format that SAP expects.

We set about hooking into the commerce workflow and writing some bespoke functionality that would enable the automated exporting of the customer's order after they had placed it on the website. The data that was exported could then be picked up via SFTP by an automated process from the client's system to then import the order into their SAP system.

Conversion-focused UX and design for Dimplex

After building the Dimplex site and continuing to work with the client to constantly improve, it was suggested that conversion optimisation was an area that warranted focussed attention. ComputerMinds conducted a full analysis as to how the site was currently performing and how it could be improved to assist each visitor through the decision and checkout process. A substantial ux and design project was delivered with specific and justified improvements to the site with a full and ongoing analysis and performance comparisons.

The Challenge

After successfully developing a multiple site platform for the GDC group, attention was focussed back to the most prominent site, Dimplex. It was suggested that conversion optimisation was an area that warranted focussed attention.

With conversion below target, the ultimate goal of this project was to improve this figure through site optimisation focussed on the checkout process. This was the perfect opportunity to also refresh the site design to aid this conversion optimisation.

Our Solution

A modern refresh of the site was designed as part of the conversion optimisation instilling confidence in the visitors as well as an efficient product choosing and checkout process.

Improvement begins with understanding

Before even considering designing the improvements we conducted a full analysis of the existing site and defined specific areas we saw concerns and also potential for improvement.

Using analysis tools such as Google Analytics and Hotjar we were able to monitor exactly how visitors were using the site and at which point they were having issues.

As the ultimate goal was to improve the conversion rate, we paid close attention to the drop off statistics from the checkout process.

An updated, consistent design

Introducing consistency to the site as well as a clean modern design helped to reassure visitors of the brand. Removing of rarely used page elements helped focus users to navigate to where they wanted to be.

An important part of the checkout process is the product detail page and considerable time was spent redesigning this page to ensure that visitors could see exactly what they wanted quickly and efficiently.

One of the biggest improvements made to this page was the decision to move the call to action elements. Before the redesign the Add to basket button, find your retailer link and also links to other retailers (Argos etc.) were hidden away in a pop up which was revealed by clicking a button. All these elements were brought on to the main product overview section and redesigned accordingly. There were significant interaction increases because of this including increasing clicks to retailers by 53%.

This approach to design is carried out on all of our design work. We understand that user experience together with design is key to achieving desired results.

Streamlined checkout process

All steps of the checkout process were redesigned with intricate detail. With nothing overlooked changes including rewording button text to assure users what was next and placement of elements, all of which contributed to significant dropoff improvement.

Linking design pages in to a working prototype allows clients to see the changes by interacting with a working site. These prototypes are delivered via a secure link and password and updated as frequently as the client requires.

Prototyping was particularly valuable with this project as we were proposing changes to the checkout flow and the client was able to see these changes by clicking through the site as a real user would.

Using prototypes allows feedback from clients to be placed accurately on the design with pins. Full discussions can take place with no confusion or explaining as to where the comment applies. Changes can be made and an updated prototype released.

With multiple stakeholders at the client, prototyping and comments were used heavily in this design project.

A full comparison analysis of the site was completed after giving enough time to gather sufficient data. Using Google Analytics and Hotjar we were able to compare and present the improvements that were made by comparing the previous year figures.

The clients were very happy both with the statistical improvements made and we also received high praise of the site design from all. We are looking forward to phase 2 of the redesign where we will work on other areas of the site.