Complex data integration using a Headless CMS

About the client

Crown Commercial Service (CCS) is the biggest public procurement organisation in the UK. CCS helps thousands of public and third sector buyers in the UK with billions of pounds of spending each year, saving the UK taxpayer hundreds of millions of pounds. In 2018 CCS helped 17,000 public sector customers save time and money when buying common goods and services: from laptops to locum doctors.

Challenges

We wanted to help the CCS website to reach to its full potential, alongside other new digital procurement frameworks such as G-Cloud and Digital Marketplace. We worked closely with CCS to ensure the redeveloped website would offer best practice User Experience, plus accessible & inclusive design standards.

Project success would involve:

• Working effectively with a large team including independent project managers, and CCS design & development teams
• Working to a tight time frame as required by internal stakeholders. We had 8 weeks to complete the project
• Integrating complex data from a legacy CMS and Salesforce using Headless CMS.

Method

Working with a large team

Communication was the key to success for such a large project with such a short time frame. A hierarchy of reporting was put in place, with roles and responsibilities clearly defined. We had daily stand ups with the CCS design and development teams to identify and quickly address any blockers. Once a week we met with the key stakeholders at CCS (for example TechOps). The Studio 24 team loved working in this way – it was energising, purposeful, respectful and very productive.

Working to a short time frame

The successful launch was due to the excellent working relationship we established with CCS. Our brief had very clear parameters and was an integral part of the wider redevelopment project.

We used an agile approach, working with the client to identify the Minimum Viable Product (MVP) to ensure we could meet the launch date. The first two weeks were spent scoping MVP. The next six weeks were split into 2-week sprints. We held a review and planning meeting with the client at the end of each sprint. The last two weeks of the project also included User Acceptance Testing (UAT). This was completed by the client and included 200 user stories on the website functionality. The result was that at the launch all stakeholders were on board as the website looked and worked as expected.

Complex data integration using Headless CMS

The Crown Commerical Service legacy CMS didn’t ‘talk’ to the CRM data stored in Salesforce. This meant that when CCS staff updated their website with Salesforce data it was manual, time-consuming work.

Given the short no-fail deadline for development (two months) we decided early on to take a more flexible approach to building the site.

We decided to build WordPress as a Headless CMS, an approach we have used on other projects such as a mobile app, but had rarely used on a more traditional website. It was our belief that this modern CMS architecture meant we could confidently hit the deadline and build a more flexible site than we’re used to on purely a traditional CMS platform.

This approach transformed our build process, meaning two teams could simultaneously work on front-end build and back-end development.

The Headless CMS approach meant the front-end was completely decoupled from WordPress. This meant we had complete flexibility on the HTML & CSS we built, allowing our front-end development team to focus on what they are brilliant at: building high-quality HTML & CSS rather than battling with the idiosyncrasies of a CMS.

With the recent increasing complexity of the front-end stack we believe this approach is more inclusive (for our team) and allows front-end staff to shine at pure HTML & CSS, a very complex specialism in itself, without the need for JavaScript and back-end coding to muddy the waters.

The Headless approach also helped with data integration between two systems, exposing the content and data to the front-end via REST APIs.

We built the front-end website in Symfony 4 (PHP). While one team worked on the front-end templates our development team independently worked on building out website functionality and integrating templates one-by-one.

Results

The end result was delivered on time and is a fast and accessible user experience.

• On time: The new website was developed in 8 weeks and launched on time to a no-fail deadline. A fantastic achievement!
• Stakeholder engagement: Working so closely with the client meant that the project was well documented. All departments knew what the new website would look like and how it would work when launched.
• Efficient: The Headless CMS provides search results more quickly as the front end application can cache information.
• Future proofing: The key investment for the client was the Headless CMS driven by Salesforce data. Elements discussed during the scoping project, outside of the MVP, can now be considered for the future.