Role: Senior Interaction Designer

The challenge

The Crown Commercial Service (CCS) is a relatively new government organisation, existing in its current form only since 2014. It was created to do one thing; centralise government procurement by bringing together policy, advice and direct buying. Ie, to take the pressure off all of the other central government departments having to muddle their way through the often complicated world of procurement.

Unlike most government organisations, CCS has an unusual aim; to make money, not save money. It does this by creating commercial agreements (otherwise known as frameworks) – essentially methods that help people buy things, in a compliant way. The suppliers on these agreements in turn pay CCS a small levy for the work they received through the agreement.

CCS has one other unusual characteristic that makes it unique; it has competitors. There aren’t many other government organisations that directly compete with external organisations.

With these pressures and ambitions to grow into helping the wider public sector (ie. local authorities), CCS realised it needed its own online presence to help it achieve its commercial goals.

The following work took place between 2017 and 2018.

The old CCS website

Sitting under the wings of a Cabinet Office subdomain, the old CCS Agreements website performed well with Buyers familiar with procurement and the purchasing process.

However the website restricted the organisation by;

• offering no guidance for users new to procurement
• lacking information and signposting for existing or new Suppliers
• not provide any wider business information or landing for marketing activities
• not reflecting the ambitions of the organisation to build it’s own brand and reputation

What i did

Navigating a GOV.UK exemption

All online government services are required to undergo a rigorous assessment process, overseen by the Government Digital Service (GDS). In short, the process ensures things are being built primarily to meet the needs of users, and done in a sensible way.

However, due to the commercial activities of the organisation, a GOV.UK exemption was granted. This meant the new website didn’t have to go through such a stringent assessment process. However, i realised early on that such freedom is a double edged sword. So I familiarised myself with the Government Service Manual and by built close relationships within people inside GDS, to help us align closely with the ethos of their approach.

Building the right foundations for design

Keen not to re-invent the wheel, and knowing that we still had to adhere to WCAG 2.1 AA standards for accessibility, i made the decision to use the GOV.UK Design System as the foundation for all of our interaction design, but simply introduced a new colour palette that aligned to our marketing material and a new typeface.

I substituted the government standard New Transport, for open source sans serif equivalent, Source Sans Pro, because;

• it is free and licensed under the Open Font License, meaning design and development teams can download and use it easily
• web fonts and desktop fonts have been created in a wide variety of formats
• it is available in a variety of weights which gives us more options and flexibility in marketing materials
• has good very good legibility and contrast on screens (ie, clear terminals on lowercase L’s, to distinguish between uppercase I’s)
• has reasonable foreign character support

Exploring and testing homepage concepts

Working alongside user researchers, we started iterating and testing different ideas such as;

• style and wording of calls-to-action
• the way framework information was displayed
• “new to procurement” information
• instructions on how to become a Supplier
• use of colour to emphasise and separate content / sections and photography

What research and testing found;

• users appreciated the high fidelity designs, but fundamentally had no preference on usage of colour, photography etc. This was simply a concern for the business only.
• simpler designs consistently tested better with all users
• content was the hardest thing to get right
• new users would look for a page that offered support, instead of looking for it on the homepage
• most users wanted to search Frameworks and Suppliers straight away

Putting search upfront

Identifying that most users were proficient in procurement and were task-orientated, we looked at ways to make their search journey as efficient as possible. We identified that users would look for frameworks either by searching for them directly, or searching by suppliers and seeing which frameworks they belonged to (we later coined this as a “reverse supplier lookup”).

Designing and testing different layouts of the search fields saw us finally settling on providing two fields side by side. Although for most designers, this pattern looks slightly odd and clunky, it consistently performed very well with users;

I like this. I am straight into the substance of the site, searching for the things that matter to me

After many iterations and through research, we launched with this full homepage design;

• all participants found it easy to perform the task starting on the homepage by using the ‘Search frameworks’ box
• several participants liked having the news on the homepage and would have a look at that
• several participants commented on the footer, which they liked because it gives them direct links to the various CCS sites
• similarly, they liked the catalogues right below the banner
• they did not care about the other information right below the header, but also were not the target group for that part of the homepage

A typical user journey from the search on the homepage, through to reviewing information on the framework detail page;

On the framework detail page, we used progressive disclosure (through accordions) and a strong information scent to help signpost users to the information they need, whilst not overwhelming them with too much information.

So whilst this was a step in the right direction, and we had made frameworks easier to search and scan through, it highlighted a much deeper problem; many frameworks remained impenetrable for novice users. Had we just created a false sense of confidence, and pushed complexity further down the road?

I discuss this towards the end of my talk here:

How to buy through CCS

With a wide array of frameworks on offer, and a variety of different procurement services to use, making the first step in the right direction was a big point of friction for both novice and expert buyers alike.

We tackled this firstly by looking at variations in page design;

As always, simpler designs kept proving more effective during user testing as they gave a general overview for each and allowed for comparison between other purchasing methods. However, no matter how much design and research we threw at the problem, we kept facing the same results – people were still unsure and unconfident. Much of our attempts simply reflected the root problem; the organisation was creating frameworks and procurement systems in silos, without doing deep research into user needs and behaviours.

Keen not to give up, we looked at other methods of helping users that didn’t simply rely on them reading content. I built a very simple prototype that asked users a series of questions, and pointed them in the direction of potential routes to market;

The prototype felt very promising, but through user testing we found that it ultimately couldn’t cope with the high number of edge-case scenarios that existed. We also discovered that users often wanted to compare the different purchasing methods, which this tool didn’t allow – the results were too funnelled.

We revisited this idea a couple of years later with a better understanding of user needs and equipped with more knowledge on the nuances of the buying process.

Integrating the marketing site

Before the new CCS website was launched, the organisation had a seperate marketing microsite running on a non-government domain. Whilst this gave the marketing team great flexibility and freedom in what they could produce and publish, it made the user journey was fragmented and user experience inconsistent.

Working closely with the marketing department and Head of Content, we analysed the most important areas of the microsite and produced a series of marketing landing pages. Focussing on themes such a sectors, allowing a little more flexibility with page layout and adding in some stylistic flourishes gave them the freedom they needed to continue creating content that supported their campaigns.