design patterns for government services
TRANSCRIPT
![Page 1: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/1.jpg)
#gdsteam@timpaul @cjforms
Design patterns
for government
services
![Page 2: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/2.jpg)
Caroline Jarrett
Forms specialist
Government Digital Service
@cjforms
![Page 3: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/3.jpg)
Tim Paul
Lead designer
Government Digital Service
@timpaul
![Page 4: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/4.jpg)
4
Ask:
Who are you?What is your job title?
What is your main role?
Are you working on design of a government
service, and if so which one?
![Page 5: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/5.jpg)
#gdsteam@timpaul @cjforms
Introduction
![Page 6: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/6.jpg)
#gdsteam@timpaul @cjforms
Government
Digital Service
![Page 7: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/7.jpg)
#gdsteam@timpaul @cjforms
![Page 8: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/8.jpg)
#gdsteam@timpaul @cjforms
12 million visitors every week
Home to over 330 departments and organisations
Saving more than £62 million a year
![Page 9: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/9.jpg)
#gdsteam@timpaul @cjforms
Information on
GOV.UK
![Page 10: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/10.jpg)
#gdsteam@timpaul @cjforms
![Page 11: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/11.jpg)
#gdsteam@timpaul @cjforms
![Page 12: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/12.jpg)
#gdsteam@timpaul @cjforms
![Page 13: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/13.jpg)
#gdsteam@timpaul @cjforms
Services on
GOV.UK
![Page 14: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/14.jpg)
Ask:
Which government service did you
use most recently?
(in everyday life, not for work)
14
![Page 15: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/15.jpg)
#gdsteam
766 services
1.43 billion transactions
@timpaul @cjforms
![Page 16: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/16.jpg)
#gdsteam
The top 28 services
account for over
90% of transactions
@timpaul @cjforms
![Page 17: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/17.jpg)
#gdsteam@timpaul @cjforms
Register to vote,
renew a patent,
apply for rural payments,
book a prison visit,
find an apprenticeship,
apply for redundancy payment,
create a lasting power of attorney,
claim carer’s allowance,
apply for a visa…
![Page 18: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/18.jpg)
#gdsteam@timpaul @cjforms
![Page 19: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/19.jpg)
#gdsteam
Carer’s Allowance
@timpaul @cjforms
![Page 20: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/20.jpg)
20
Video about Carer’s allowancehttps://www.youtube.com/watch?v=IYBLX3V8ek4
Most important change:
Removing 49% of the questions
![Page 21: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/21.jpg)
#gdsteam@timpaul @cjforms
The challenge
![Page 22: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/22.jpg)
How do you
simultaneously design
25 services for the same
website?
![Page 23: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/23.jpg)
Well designed
Consistent
In 2 years
![Page 24: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/24.jpg)
How do you do
design at
scale?
![Page 25: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/25.jpg)
#gdsteam@timpaul @cjforms
GOV.UK Beta
![Page 26: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/26.jpg)
#gdsteamwww.flickr.com/photos/benterrett/7309046368
![Page 27: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/27.jpg)
#gdsteam@timpaul @cjforms
GOV.UK Live
![Page 28: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/28.jpg)
#gdsteamhttps://twitter.com/benterrett/status/474917315562455041
![Page 29: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/29.jpg)
#gdsteam@timpaul @cjforms
![Page 30: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/30.jpg)
#gdsteam@timpaul @cjforms
![Page 31: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/31.jpg)
#gdsteam@timpaul @cjforms
There are more people
designing GOV.UK
outside GDS than
inside GDS
![Page 32: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/32.jpg)
#gdsteam@timpaul @cjforms
The solution
![Page 33: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/33.jpg)
#gdsteam@timpaul @cjforms
Resources
+
Community
![Page 34: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/34.jpg)
#gdsteam@timpaul @cjforms
www.gov.uk/service-manual
![Page 35: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/35.jpg)
35
ASK
What do YOU need?
![Page 36: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/36.jpg)
#gdsteam@timpaul @cjforms
1. Principles
![Page 37: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/37.jpg)
https://www.gov.uk/design-principles #gdsteam
![Page 38: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/38.jpg)
#gdsteam@timpaul @cjforms
2. Templates
![Page 39: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/39.jpg)
#gdsteam@timpaul @cjforms
![Page 40: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/40.jpg)
#gdsteam@timpaul @cjforms
3. Elements
![Page 41: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/41.jpg)
#gdsteamgovuk-elements.herokuapp.com
![Page 42: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/42.jpg)
#gdsteamrural-payments-styleguide.herokuapp.com/
![Page 43: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/43.jpg)
#gdsteam
![Page 44: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/44.jpg)
#gdsteam
4. Screenshots
@timpaul @cjforms
![Page 45: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/45.jpg)
#gdsteamhttp://alphagov.github.io/exemplar-screens
![Page 46: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/46.jpg)
#gdsteam@timpaul @cjforms
5. Mailing list
![Page 47: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/47.jpg)
The mailing list is (currently)
by invitation from
people who are already on it.
![Page 48: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/48.jpg)
#gdsteam@timpaul @cjforms
6. Patterns
![Page 49: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/49.jpg)
#gdsteam@timpaul @cjforms
![Page 50: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/50.jpg)
#gdsteam@timpaul @cjforms
![Page 51: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/51.jpg)
#gdsteam@timpaul @cjforms
designpatterns.hackpad.com
![Page 52: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/52.jpg)
#gdsteam@timpaul @cjforms
![Page 53: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/53.jpg)
#gdsteam
350+ members
100+ patterns
@timpaul @cjforms
![Page 54: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/54.jpg)
#gdsteam@timpaul @cjforms
1. Elements 105 edits
2. Navigation buttons 76 edits
3. Date of birth 56 edits
4. Progress indicators 55 edits
5. Dates 54 edits
6. Help text 41 edits
7. Addresses 41 edits
8. Radios & checkboxes 36 edits
![Page 55: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/55.jpg)
#gdsteam
1. Tim Paul 383 edits
2. Caroline Jarrett 151 edits
3. Ed Horsford 148 edits
4. Joe Lanman 115 edits
5. Gemma Leigh 53 edits
6. Sjors Timmer 41 edits
7. Henry Charge 35 edits
8. Tom Byers 25 edits
@timpaul @cjforms
![Page 56: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/56.jpg)
#gdsteam@timpaul @cjforms
designpatterns.hackpad.com
![Page 57: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/57.jpg)
#gdsteam@timpaul @cjforms
Did it work?
![Page 58: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/58.jpg)
58#gdsteam@timpaul @cjforms
![Page 59: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/59.jpg)
59
ASK
let's vote on the questions we
most want to look at today
![Page 60: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/60.jpg)
60
Make groups to work on a
question you want to answer
![Page 61: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/61.jpg)
61
Search for:
Service Manual Design Patterns
![Page 62: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/62.jpg)
#gdsteam@timpaul @cjforms
![Page 63: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/63.jpg)
Is your question answered?If it is, join another team or try another question!
If not, try the hackpad
Is your question answered on
the hackpad?
If it is, join another team or try another question!
If not, try editing it.
63
![Page 64: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/64.jpg)
General discussion and
feedback
64
![Page 65: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/65.jpg)
#gdsteam
Lessons learned
@timpaul @cjforms
![Page 66: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/66.jpg)
#gdsteam
What design
patterns can’t do
@timpaul @cjforms
![Page 67: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/67.jpg)
#gdsteam@timpaul @cjforms
Design patterns
can’t be imposed
on people
![Page 68: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/68.jpg)
#gdsteam@timpaul @cjforms
Design patterns
can’t replace
designers
![Page 69: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/69.jpg)
#gdsteam@timpaul @cjforms
Design patterns
can’t negotiate
with the business
![Page 70: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/70.jpg)
70#gdsteam@timpaul @cjforms
What design
patterns can do
![Page 71: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/71.jpg)
71#gdsteam@timpaul @cjforms
Design patterns save time
because you don't have to keep
answering the same question
![Page 72: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/72.jpg)
72#gdsteam@timpaul
Design patterns can help to
provide consistency for users
![Page 73: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/73.jpg)
73#gdsteam@timpaul @cjforms
Design patterns help
to provide known answers
to common problems
![Page 74: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/74.jpg)
74#gdsteam@timpaul @cjforms
Design patterns help to provide
a focus for the community
![Page 75: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/75.jpg)
75
What would we do differently if
we started again?
![Page 76: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/76.jpg)
76
If you're starting your own
design patterns...
![Page 77: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/77.jpg)
77
What's happening next?
![Page 78: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/78.jpg)
78
Caroline is mostly working on
creating candidate patterns to
go into the Service Manual
![Page 79: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/79.jpg)
79
There's a big Service Manual
project that's just started
![Page 80: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/80.jpg)
#gdsteam@timpaul @cjforms
Thank you and
please join in
![Page 81: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/81.jpg)
#gdsteam
URLs
https://www.gov.uk/service-manual/user-centred-design/resources/header-footer.html
https://www.gov.uk/service-manual/user-centred-design/resources/patterns/index.html
https://designpatterns.hackpad.com/
http://govuk-elements.herokuapp.com/
http://rural-payments-styleguide.herokuapp.com/
http://alphagov.github.io/exemplar-screens/
@timpaul @cjforms
![Page 82: Design patterns for government services](https://reader030.vdocuments.us/reader030/viewer/2022020218/55a9892e1a28ab76248b48b0/html5/thumbnails/82.jpg)
Tim Paul
Lead Designer
Government Digital Service
@timpaul