Design patternsfor government servicesa community not a library

Caroline Jarrett@cjforms #gdsteam

@cjforms #gdsteam

Caroline JarrettForms specialistGovernment Digital Service@cjforms

Tim PaulHead of Design Patterns and ToolsGovernment Digital Service@timpaul

@cjforms #gdsteam

Government is changing

@cjforms #gdsteam

GCHQ was deeply secret

@cjforms #gdsteam

GCHQ joined Twitter

@cjforms #gdsteam

GCHQ champions diversity

https://www.gchq.gov.uk/features/what-kind-people-work-gchq

@cjforms #gdsteam

CESG fights for user-centred security

https://www.gov.uk/government/publications/password-policy-simplifying-your-approach

@cjforms #gdsteam

A quick recap of ~10 years

@cjforms #gdsteam

HM Revenue & Customs, 2005

@cjforms #gdsteam

DVLA, 2006

@cjforms #gdsteam

Martha Lane Fox, 2010

https://www.gov.uk/government/publications/directgov-2010-and-beyond-revolution-not-evolution-a-report-by-martha-lane-fox

@cjforms #gdsteam

GOV.UK, February 2012

@cjforms #gdsteam

DVLA, 2013

@cjforms #gdsteam

GOV.UK, 2016

@cjforms #gdsteam

@cjforms #gdsteam

2011 2016

Des

igne

rs

GDS

NonGDS

Year

1

300

@cjforms #gdsteam

How to:- design at scale- make design patterns for everyone- get designers to usedesign patterns

@cjforms #gdsteam

How to design at scale

@cjforms #gdsteam

We have tools,

Front-end kit

Prototype kit

GOV.UK elements

@cjforms #gdsteam

We have tools, ways to meet

Front-end kit

Prototype kit

GOV.UK elements

Design training

Meet-ups

Mailing list

@cjforms #gdsteam

We have tools, ways to meet, and patterns

Front-end kit

Prototype kit

GOV.UK elements

Design patterns

Design training

Meet-ups

Mailing list

Hackpad

@cjforms #gdsteam

It’s quite complicated

@cjforms #gdsteam

@cjforms #gdsteam

How to make design patterns for everyone

@cjforms #gdsteam

Low High

Digital skills and confidence

Use

rs

GOV.UK Average

We must design for people with low digital skills

@cjforms #gdsteam

Activity

Think of groups of people who might have low digital skills or confidence

@cjforms #gdsteam https://assisteddigital.blog.gov.uk/2015/02/13/tales-of-the-unexpected-visas-assisted-digital-research

@katiearnie

@cjforms #gdsteam Idea: Naintara Land image: http://www.memorylossonline.com/glossary/images/amygdala.jpg

We must design for people who are stressed

@cjforms #gdsteam

Example 1

Dropdown lists

@cjforms #gdsteam

@cjforms #gdsteam

There were two videos• a woman in her 30s struggling to complete a

date-of-birth dropdown

• a man with low vision unable to use a select box because the browser failed to enlarge it.

@cjforms #gdsteam

@cjforms #gdsteam

Avoid dropdowns. Burn your ‘select’ tags.Try these instead:

• Radio buttons

• Free text

• Type ahead*

*possibly; there are accessibility worries

@cjforms #gdsteam

Example 2

Form structure

@cjforms #gdsteam

Search for ‘service manual form structure’

@cjforms #gdsteam

Form structure

1. Know why you’re asking every question

2. Design for the most common scenarios first

3. Start with one thing per page

@cjforms #gdsteam

‘Things’ could be:

- information

- evidence

- decisions

- money

- physical objects

- times and places

- actions

@cjforms #gdsteam

Let’s apply the form structure pattern to a page on GOV.UK

@cjforms #gdsteam

@cjforms #gdsteam

https://www.gov.uk/apply-first-provisional-driving-licencehttp://bit.ly/firstprov

1. Make a list of all the things

2. Design for the most common scenarios first

3. Start with one thing per page

@cjforms #gdsteam

How to get designers to use design patterns

@cjforms #gdsteam

We’ve tried 4 methods:

1. Research2. Co-creation3. Enforcement4. Design tools

@cjforms #gdsteam

Method 1

Research

@cjforms #gdsteam

Test your guidance as well as your patterns

http://uxpamagazine.org/design-at-scale/

@cjforms #gdsteam@gemmaleigh govuk-elements.herokuapp.com

@cjforms #gdsteam

Ingredients

Recipe

@cjforms #gdsteam#gdsteam

https://www.gov.uk/service-manual/user-centred-design/resources/patterns/progress-indicators.html

@cjforms #gdsteam

Method 2

Co-creation

@cjforms #gdsteam

Example 1

Gender and sex

@cjforms #gdsteam

@cjforms #gdsteam

Example 2

Fixing pale boxes(the “Apple Effect”)

@cjforms #gdsteam

Before…These box borders are too pale

@cjforms #gdsteam

Simon Hurst (DWP) andJames Francis (Companies House) reported results from user research

@cjforms #gdsteam

@cjforms #gdsteam

Before…These box borders are too pale

@cjforms #gdsteam

After…These box borders are dark enough

@cjforms #gdsteam

Method 3

Enforcement

@cjforms #gdsteam

13“Build a service consistent with the user experience of the rest of GOV.UK including using the design patterns and style guide”

@cjforms #gdsteam

@cjforms #gdsteam

We worked with the Verify team to make account management patterns

@cjforms #gdsteam

Method 4

Design tools

@cjforms #gdsteam

@cjforms #gdsteam

@cjforms #gdsteam

1. Research2. Co-creation3. Enforcement4. Design tools

@cjforms #gdsteam

Make it easier to do it right than to do it wrong

@cjforms #gdsteamhttp://www.slideshare.net/cjforms

@cjforms #gdsteam

Read about building a design community:http://uxpamagazine.org/design-at-scale/

Follow GDS design notes:https://designnotes.blog.gov.uk/

Follow GDS user research:https://userresearch.blog.gov.uk/

Join in our discussion of patterns:http://bit.ly/designpatts