Moving SCA to a headless platform

The challenge

Greater synergies and better communication

SCA were looking to become more sustainable across their business. A key element of this was a desire to optimise their production and processes.

SCA operates multiple websites in addition to sca.com. Although Optimizely had successfully provided them with a content management solution for many years, SCA started to consider the benefits of switching from its on-premise system to a cloud-based-solution. They were keen to consolidate and align communication messages across their multiple sites to capture synergies of scale and deliver a consistent brand experience.

They aIso wanted to update the technical platform for a better editor experience. Upgrading the system would also ensure compliance with the latest security and privacy best practices.

There were several incumbent platforms with which the new solution would need to integrate. These included SCA’s authentication platform, Cision, as well as Friendly Captcha, Piwik Pro and Imagevault.

The solution

Moving to a headless cloud solution 

Together with SCA, we decided that a cloud-based solution on Optimizely 12 would be best equipped to help them meet the medium and long-term objectives and to give them greater flexibility and security.

A headless CMS architecture would provide optimum flexibility and enable them to use React as its front-end framework for increased developer efficiency and navigation performance.

Using a headless architecture allowed the brand and visual profile to be implemented as a design system in code which can be shared across multiple systems and solutions. The benefit is greater control and a unified experience.

We helped them to define the new architecture for the transition from the existing on-premises software to the new cloud solution and from head on to headless frontend architecture. We also worked on the communications strategy, including content workshops, message framework and structure, and the visual concept for the website.

The impact

A better brand platform

When the time came to replace the legacy system, we were able to build on our existing relationship and together, we built a solution that delivered measurable and immediate benefits.

The new platform has been set up and designed with editor experience in mind, making their daily work easier. The privacy and security issues that were beginning to cause concern with an older system have also been fully addressed.

The previous start page scored 43 for speed in Google Lighthouse, and the new one scores 70. This represents a significant improvement and is an impressive result for a website that has been built with design and profiling considerations ahead of speed. Other pages have benefited from similar speed improvements.

The overall platform is more cost efficient in terms of direct cost. It also puts SCA in the best possible position to meet its strategic objectives in these challenging times and as a key player in an industry that is undergoing rapid change and evolution.

Headless architecture

Going headless with Optimizely

With the new system, editors can continue to work with content in the same way as they did before.

The mechanisms for display of public web pages are built around the Optimizely Content Delivery API, but with added optimisations, custom content filters and conversions to reduce the number of network requests and improve page-load and navigation speed.

All the templates for public web pages are built in React and rendered on the server side for the first page view and on the client side for subsequent page views. The Microsoft ClearScript script engine, which is a .NET-based component, is used to render the page content of initial page views with React templates on the server side.

This avoids the need for a separate server environment for page rendering, which simplifies the hosting architecture and the deployment procedures compared to some other common setups for websites with headless CMS solutions.

The websites can also be viewed in a purely headless mode, without any server-side rendering. This is particularly useful to front-end developers, who can use content from the DXP cloud while working on the React-based website templates.