7 : GDS = Great Design Shouldn't be hard or Government Design System

28 Jan 2022

In this episode Andy and Rowan are discussing the UK Government Design System. What is it, why does it exist, and where did it come from. We'll also discuss what it's like to work with it from a C# perspective.

Random fact

Polar bears are nearly undetectable by infrared cameras

Thermal cameras detect the heat lost by a subject as infrared, but polar bears are experts at conserving heat. The bears keep warm due to a thick layer of blubber under the skin. Add to this a dense fur coat and they can endure the chilliest Arctic day.

A polar bear’s skin is actually black! A polar bear’s outer hair – also known as “guard hair” – is made of Keratin. Keratin protein molecules have an off-white colour. Making it one of the reasons a polar bear’s fur appears white.


  • Genesis - IN THE BEGINNING there was Mike Bracken. Who was Mike Bracken, what was his vision/purpose/aim...

https://www.youtube.com/watch?v=3bK9B8_0FDQ&t=1s - Mike Bracken's Keynote at CfA 2013

  • Mike Bracken co-founded Government Digital Service in 2011 - government cabinet office - at the centre

    • Mike was part of mysociety - civic services - like 'fix my street'
      • gov't didnt go for it - couldnt demonstrate user need
      • Had to show measurable user using it, measurable performance data
      • Govt need will always outweigh user need
      • Make the product so useful that it cannot be ignored
    • Getting stuff done is really hard
    • Strategy is delivery
    • Debate was about policy
      • Delivery was not a priority
      • problem was the end user what not being served, users were forgotten about
    • Standardise online government services
    • Serve the end user
  • Mike also worked for guardian

    • Deliver first and strategise later
    • Gov't if full of empty strategy
    • Delivery drives uptake
  • Search youtube for Mike Bracken's Keynote at CfA 2013

  • Wow so 10+ years ago this all started, so most of the government is now using it?

    • Externally and Internally being used
    • Loads of user research being done and refining the framework based on findings
  • Why use GDS over something like Bootstrap - Bootstrap has more users/features/updates?

    • Its much more than just styles and components
    • It is built upon minimising user cognitive load (what's that!!??)
      • What you say, how you say it and user experience are all just as important as the technical building blocks styles and controls themselves
      • Minimising cognitive load:
        • What is cognitive load - the working memory one needs in order to be able to complete a given task
        • Moving through an online workflow requires people to understand and provide multiple pieces of information - passport applications, license renewals. Reducing the cognitive load required to complete these workflows is going to result in more people successfully completing the task
        • Targeting users with a relatively low level of computer literacy. For these people, most computing tasks demand an uncomfortable amount of cognitive load
        • Generally targeting users with a reading age of 9
        • One thing per page helps to minimise cognitive load
        • Drop downs lists are no good! - Really good video on this from GDS designers - search on youtube for 'Alice Bartlett: Burn your select tags - EpicFEL 2014'
      • The tasks a user has to perform for government like self assessment tax return, apply for a passport are:
        • Mandatory
        • Dull
        • Unlike checking social media, most people don't want to be doing them, they are the tasks everyone puts off or avoids
        • Therefore it is REALLY easy to lose people through a journey due to not being engaged
        • Couple these barriers with other barriers like low levels of computer literacy / anxiety around computer usage and it is difficult to get people successfully using online govt services
  • Why is it so good (why better than bootstrap, bulma, tailwind)?

    User need is at its core:

    • Better user experience - very much a core reason for it all
      • Comes from great service design
    • Shared research and testing - ongoing research and learnings are fed back into the system
      • iterative at its core
    • Accessibility is a fundamental principle - accessibility in terms of
      • being accessible to users of screen readers, or to users with visual impairments like colour blindness etc,
      • being accessible to users who aren't confident using computers
    • Like any framework / library or pre-built set of components:
      • Consistency across departments
      • Less work when building new services
  • What was it like before GDS?

    • Many different styles - every website was different - using whatever the devs wanted to
    • Each department building in isolation - no shared standards
    • Confusing for users - every service looked different
  • Where is it used - commercial / gov.uk?

  • Is it Open source or is there a Cost to use it

  • Support

  • What's it got it in

    • styles, components and patterns
      • styles -
      • components
        • accordion
        • back link
        • buttons
        • error messages
        • cookie banner
        • table tabs
      • patterns like (govt service flavour)
        • addresses
        • bank details
        • dates
        • gender
        • National insurance numbers
        • payment card details
  • Various agencies using there own take on GDS


    National UK Gov agencies

    • Home office
    • MOJ
    • DVLA

    Other countries

    AU - https://designsystem.gov.au/



  • What could you use it for

    • Anything! Internal and external sites - internal users are as important as external users - accessibility isn't just for public facing websites
  • What if something is missing

OS project/utility of the week

Windows powertoys

Originally Windows 95 powertoys - they were revived in 2019 for Windows 10

PowerToys for Windows 10 comes with the following utilities:[22]

  • Color Picker adds a tool for color identification (in HEXRGBCMYKHSL and HSV, among others).
  • FancyZones adds a window manager that makes it easier for users to create and use complex window layouts.
  • File Explorer (Preview Panes) adds SVGMarkdown and PDF previews to File Explorer.
  • Image Resizer adds a context menu to File Explorer for resizing images.
  • Keyboard Manager adds options for remapping keys and shortcuts.
  • PowerRename adds an option for users to rename files using search and replace or regular expression in File Explorer.
  • PowerToys Run adds a Spotlightlike tool that allows users to search for folders, files, applications, and other items.
  • Shortcut Guide adds a full screen overlay that allows the user to view the windows key shortcuts available in the current window.
  • Awake adds a system tray tool to keep a device awake and prevent Windows from allowing a device to sleep or hibernate.