#gdsteam@timpaul @cjforms

Design patterns in government

One year onWhat we learnedWhat we changed

#gdsteam

Caroline JarrettForms specialistGovernment Digital Service@cjforms

Tim PaulHead of Design PatternsGovernment Digital Service@timpaul

#gdsteam@timpaul @cjforms #gdsteamImage credit: photo by Caroline Jarrett of historic cartoon. Not yet successful in tracing the source; please tell us if you know it

#gdsteam@timpaul @cjforms

We’re going to talk about how to:

- do design at scale- make design patterns for everyone- get designers to use design patterns

#gdsteam@timpaul @cjforms

How to do design at scale

#gdsteam

#gdsteamwww.flickr.com/photos/benterrett/7309046368

GDS Design Meeting, London, 2012

#gdsteam@timpaul @cjforms

Cross Government Design Meeting, Leeds, 2014

#gdsteam@timpaul @cjforms

2011 2016

Des

igne

rs

GDS

NonGDS

Year

1

300

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

The advantages of small teams

Collective ownership and shared vision

It’s easy to share or steal good ideas

A consistent style emerges naturally

You’re able to respond quickly

#gdsteam@timpaul @cjforms

Some of the things we’ve done

Design principles

Style guides

Page templates

Design patterns

Design training

Design tools

Events

Wikis, blogs etc.

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

How to make design patterns for everyone

#gdsteam

#gdsteam@timpaul @cjforms

We must design for people with low digital skills and confidence

Low High

Digital skills and confidence

Use

rs

GOV.UK Average

#gdsteam@timpaul @cjforms

Activity

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

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

Idea: Naintara Land image: http://www.memorylossonline.com/glossary/images/amygdala.jpg

We must design for people who are stressed

#gdsteam@timpaul @cjforms

Example 1

Dropdown lists

#gdsteam@timpaul @cjforms

Avoid dropdowns if at all possible

- they’re not intuitive

- they hide choices

- they’re hard to use

#gdsteam@timpaul @cjforms

We showed 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.

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

Alternatives to drop-down lists

- radio buttons

- free text

- type ahead

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

Example 2

Form structure

#gdsteam@timpaul @cjforms

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

#gdsteam@timpaul @cjforms @timpaul https://designnotes.blog.gov.uk/2015/07/03/one-thing-per-page/

#gdsteam@timpaul @cjforms

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

#gdsteam

29

#gdsteam@timpaul @cjforms

www.gov.uk/burial-at-sea

1. Make a list of all the things

2. Design for the most common scenarios first

3. Start with one thing per page

#gdsteam@timpaul @cjforms

‘Things’ could be:

- information

- evidence

- decisions

- money

- physical objects

- times and places

- actions

#gdsteam@timpaul @cjforms

Search for ‘service manual form structure’

#gdsteam@timpaul @cjforms

How to get designers to use design patterns

#gdsteam

#gdsteam@timpaul @cjforms

We’ve tried 4 methods:

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

#gdsteam@timpaul @cjforms

Method 1

Research

#gdsteam@timpaul @cjforms

Test your guidance as well as your patterns

@gemmaleigh govuk-elements.herokuapp.com

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

Ingredients

Recipe

#gdsteam@timpaul @cjforms #gdsteam

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

#gdsteam@timpaul @cjforms

Method 2

Co-creation

#gdsteam@timpaul @cjforms

Example 1

Gender and sex

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

Example 2

Fixing the Apple Effect

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

Before…

#gdsteam@timpaul @cjforms

After…

#gdsteam@timpaul @cjforms

Method 3

Enforcement

#gdsteam@timpaul @cjforms

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

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

We worked with the Verify team to make account management patterns

#gdsteam@timpaul @cjforms

Method 4

Design tools

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

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

#gdsteam@timpaul @cjforms

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

#gdsteam@timpaul @cjforms

designpatterns.hackpad.com