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

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.

Introduction

• 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?

  • Anything hanging off https://www.gov.uk/ will be using GDS

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

  • https://github.com/alphagov/govuk-frontend - MIT License - Transport font is not open source - mustn't be used outside of the gov.uk domain

• Support

  • https://design-system.service.gov.uk/community/

• 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

  https://github.com/ctdesign/gov-design-systems-list

  National UK Gov agencies

  • Home office
  • MOJ
  • DVLA

  Other countries

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

  US

  NZ

• 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

  • https://design-system.service.gov.uk/community/propose-a-component-or-pattern/
  • As it's open source you can help out with building new components or fixing existing ones

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 HEX, RGB, CMYK, HSL 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 SVG, Markdown 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.