Out with the old ….

A little thing happened today …. I say it is a little thing but to me and my colleagues at Boots it is actually quite a big thing.

Today we launched the new www.boots.com homepage and our new CMS Adobe Experience Manager (AEM).

In the grand scheme of things this might not seem like much — websites go live everyday with varying degrees of fanfare but this particular release is a big thing for us and has been the all encompassing focus of my team for the last 12 months.

When I joined Boots there was a big ambition. The organisation had a very complex brown field technology estate and was very aware of the need to modernise the digital capability and embrace a composable commerce solution built on a modern cloud microservices stack.

The organisation had rationalised that the first step in making this transition was to create a headless front end; moving the user interface away from Websphere Commerce Suite (WCS) and building out a cloud native user interface (enabling faster speed to market for feature development) using a modern Javascript framework.

In the first days and weeks in my new role I considered that such a change would be relatively straight forward and a sensible first step; little did I know how difficult that journey would be and the problems we would encounter along the way.

For those of you who are interested here are some of the issues and challenges that we have overcome in the last 12 months:

The Concept of the Donut

This problem seems like it was encountered a lifetime ago, but its actually become fundamental to our approach. WCS is a huge monolithic application and everything is very tightly coupled. In considering how we might adopt Adobe AEM in a truly headless solution we were faced with a stark reality that there is a huge amount of functionality contained within the header and footer of our website:

User Login
Mini Basket
Site Navigation
Search
Analytics / Tagging + a whole host of functionality (and tech debt) which makes the current site work today.

The desire to build out a headless front end required all of the functionality listed to be re-built in React. More than this though, it required all decisions related to these features to be known and agreed upon upfront.

Our strategy is to build a new composable commerce application using best of breed technology– we therefore needed to agree what technologies would be supporting each of these components and agree the target architecture of the site before the build could begin in anger. The analogy of knowing where you are going on holiday before you get on the plane never felt more real.

It quickly became clear that the timelines attached to this were going to be unacceptable and incredibly un-agile — we needed to break the problem down and deliver in an incremental way — the concept of Minimal Viable Product was discussed but in reality stakeholders (and our customers) didn’t want to loose functionality we already had on www.boots.com as part of our transformation journey.

Enter the concept of the donut. Our solution was to leave the header and footer of www.boots.com intact on WCS and read the existing HTML into our new microservices application. We then injected the new homepage content in between the header and footer — the homepage content effectively became the jam in our donut.

Taking this approach allowed us to kick the can down the road on a number of critical problems such as shared state, session management, integration of product data and a number of other issues. We focussed our attention firmly on what we believed would bring the highest customer value, a fresh responsive design built using a modern CMS and the ability to begin leveraging the power of the Adobe Marketing Cloud.

The solution isn’t perfect — the header and footer still contains a lot of technical debt and we haven’t been able to realise all of the site performance improvements that we want — but we have taken one very big step towards our end state! We also know that we will be able to incrementally address these issues over time and are confident in our approach.

This answers the key question that the eagle eyed amongst you will be asking:

“Why is the header on the old homepage and the new homepage the same?”

The simple answer - it is …. but not for long. We can now start to incrementally build out the header and footer components and also take those elements headless over the coming months.

Style Bleeding

Adopting the donut didn’t resolve all of our problems in fact it introduced a number of other issues that we have needed to overcome.

One of the key issues we encountered was the issue of style bleeding. This occurred because the WCS stylesheets hadn’t been written using BEM notation and therefore over-rode styles contained in the react application.

The solution was to create a template wrapper that performed a full CSS Reset on content held within it — this wrapper now encapsulates all of the AEM content making up the jam in our donut.

Shared Header / Footer

Although we took the decision not to build the new header and footer as part of the initial phase we did need to consider how our approach would scale as we continued to build out our headless front end.

To that end we explored the phased transition states that our header and footer would go through beyond the go live of our homepage.

The solution was to create a microservice to serve our header and footer to WCS and also any micro frontends that we might choose to create either now or in the future.

This service will be in our estate for a long time to come and provides the glue that will hold together our consistent user experience well into the future.

Routing — Content Served from WCS or AEM?

Today we have launched our new homepage, but over the coming weeks our business teams will be migrating all of our Department, Brand, Article and Category Pages onto Adobe Experience Manager which will bring our fresh new look to the whole of www.boots.com.

This means we have now entered a hybrid state with some content served from WCS and other content served from our microservices application. The problem? How do we make sure that new AEM content is served to the customer (as opposed to WCS content) when it is available?

Our solution was to create a service which is known affectionately as the decider of destiny. This service now forms part of our digital edge services and directs traffic based upon what content is published in AEM — effectively maintaining a routing table that determines if the business have published AEM content and serves it to the customer if it is available.

AEM Preview

Editing and previewing content across the end to end customer journey was a critical requirement for our business teams. The issue we encountered was that as we move into our hybrid state we needed to enable the business to preview content across our microservices application and also the legacy WCS estate.

Our solution was to leverage the power of the Adobe Single Page App Editor and preview capability. Sitting here today this is a really obvious solution but 12 months ago when we embarked on this journey the SPA editor was still in beta and we really didn’t know if it would be able to handle all of our use cases.

It turns out our gamble paid off and the result provides an incredibly powerful way to scale our preview capability as we continue the development of our new customer experience.

Over the course of the last 12 months the team have resolved these issues and a whole host of other problems — turns out creating a headless front end does bring a lot of unexpected challenges particularly when facing into a brown field technology estate.

We still have a long way to go on our digital transformation as we gradually rebuild our website on a modern cloud technology stack. Each increment takes us a little closer to our target state which will enable us to leverage the true power of CI/CD and unlock agility and speed of delivery which will truly transform our ecommerce platforms across the Boots organisation.

Today is a big milestone, and a huge achievement! Today marks something that everyone on the team should be incredibly proud to have been a part of — I know I certainly am!

It is also heart warming to hear what our CIO Rich Corbridge thinks of today’s achievement.

“This change is one of so many big advances that happen to Boots over the next 3 to 4 months, an ambitious change that places the customer at the centre of every thing we can do for them on a digital platform.

Our customers love the Boots store, these changes begin to enable that same love to transition to the way we are reflected on line. Every part of Boots is involved in how we make this change, truly inspiring to see how the whole organisation understands and gets behind what so many others would describe as a technology change!”

I want to use this opportunity to thank everyone who has contributed towards this achievement from within my own team, our partner organisations (Including Adobe and IBM IX), other teams within Boots IT and the wider Boots business. What has collectively been achieved today is truly transformational, you all need to be congratulated on this success and on a job very well done!

To our customers, I really hope you like the new look and feel! Please take the time to reach out to us and let us know what you think, the team would love to hear your comments and we hope the new experience brings a little extra joy to your day.

As for me, I’m incredibly proud to work for Boots and to lead an incredibly talented engineering team of truly inspirational and very talented individuals. Thank you all for bringing your A game to work each and every day and giving me the opportunity to be part of a truly miraculous digital transformation journey.