The Crown Commercial Service style guide

Please note: This case study is about a service that’s still in DISCOVERY. Take a read, but please excuse any gaps – we’re still hard at work trying to figure this one out 😐

Role: Design Lead

The challenge

Having a GOV.UK exemption can be a really useful thing for an organisation to have. However, without the proper internal guidance and governance an exemption can lead to large inconsistencies not only in output, but in the actual creation of services too. I’ve discussed about how i helped the organisation navigate the exemption in a previous case study.

The CCS Style Guide was an initiative to draw together the advice and guidance from three seperate departments within the organisation, as well as advice from GOV.UK Service Manual into a central, authoritative place. It’s a delicate balance between creating useful information for colleagues and suppliers, whilst trying not to create another version of the GOV.UK Service Manual or Design System; neither of which the organisation could maintain.

What we did

Sitting within the Design and Research team, I worked with the leads within Marketing and Communications, as well as developers from Digital Services and identified the follow key areas where the organisation needed guiding.

Content

How to write clearly, in an area often dominated by specialist terminology.

Brand identity guidelines

  • what typefaces to use and legible font sizes
  • our brand colour palette and notes on accessibility and contrast (for both digital and print)
  • logos and instructions on how and when to use (and when not to use them)
  • instructions on how CCS suppliers can use our branding
  • photography – stylistic direction and sourcing good stock photos
  • icons – allowed usage and why we try to avoid them

Advice on accessibility

  • our legal obligation and why we need things to be accessible
  • minimum font sizes (links to Typography guidance)
  • colour contrast (links to Colour pallette guidance) and allowable use of the brand colour palette
  • accessibility for documents (PDFs, DOCx), and guidance on how to create them
  • CCS’s boilerplate accessibility statement
  • Links to GOV.UK guidance on accessibility

Designing and building digital services

  • overview on how we use the GOV.UK Design System
  • govuk-frontend SASS overrides and additions to cater for our typeface and colour palette
  • custom patterns, including the design and code for; CCS Headers, Footers and Cookie banners
  • overview of GOV.UK prototyping kit and links to styling overrides on GitHub and guidance on how to implement
  • overview on Sketch and usage for prototyping, with links to Sketch Library with pre-styled components
  • Email template design and code for transaction emails, and marketing emails and an example request for the GOV.UK Notify team to apply CCS’s custom branding

Production of videos

  • Branding of motion graphics within a video (link to accessibility section on colour contrast)
  • Importance of captions and transcripts for accessibility
  • Production quality; considerations on aspect ratios and audio rendering
  • Distribution – ie, how to get it published on the official CCS YouTube channel

Please note: This case study is about a service that’s still in DISCOVERY. Take a read, but please excuse any gaps – we’re still hard at work, iterating the service 🙂