How we developed a new user-focussed website for the Crown Commercial Service using a Headless CMS

By Studio 24 Ltd
10 Mar 2021

Studio 24 redeveloped the CCS website using a Headless CMS to manage the data exchange between their legacy CMS and their CRM platform (Salesforce). This provided time saving efficiencies for CCS staff and made procurement faster and easier for CCS customers.

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

Studio 24 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:

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 in large part 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.

We built this site in an agile way, developing, testing and finalising feature by feature, thereby lowering risk compared to a big-bang approach. I worked through designs and, in collaboration with the CCS, took functionality out of scope to make MVP possible.Isaac Lowe, Studio 24

Complex data integration using Headless CMS

The CCS 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.

I felt energised working on this project, even with the pressure of a very tight deadline. The project was well managed, with each team member having a clearly defined role. Subsequently, we had a very good working relationship with the client. It felt like a real team effort.Matt Buckland, Studio 24

Results

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

Studio 24 have helped Crown Commercial Service to deliver a modern, customer centric site. With the redesign customers can now find what they need easily, helping them to save time and money, while colleagues now have a site they can be proud of, and confidently direct customers to.Craig MacDonald, Chief Digital and Technology Officer, Crown Commercial Service

BusinessDataDesignDevelopmentStrategyTechUX

Latest news