design patterns for government services: a community, not a library
TRANSCRIPT
![Page 1: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/1.jpg)
Design patternsfor government servicesa community not a library
Caroline Jarrett@cjforms #gdsteam
![Page 2: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/2.jpg)
@cjforms #gdsteam
Caroline JarrettForms specialistGovernment Digital Service@cjforms
Tim PaulHead of Design Patterns and ToolsGovernment Digital Service@timpaul
![Page 3: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/3.jpg)
@cjforms #gdsteam
Government is changing
![Page 4: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/4.jpg)
@cjforms #gdsteam
GCHQ was deeply secret
![Page 5: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/5.jpg)
@cjforms #gdsteam
GCHQ joined Twitter
![Page 6: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/6.jpg)
@cjforms #gdsteam
GCHQ champions diversity
https://www.gchq.gov.uk/features/what-kind-people-work-gchq
![Page 7: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/7.jpg)
@cjforms #gdsteam
CESG fights for user-centred security
https://www.gov.uk/government/publications/password-policy-simplifying-your-approach
![Page 8: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/8.jpg)
@cjforms #gdsteam
A quick recap of ~10 years
![Page 9: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/9.jpg)
@cjforms #gdsteam
HM Revenue & Customs, 2005
![Page 10: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/10.jpg)
@cjforms #gdsteam
DVLA, 2006
![Page 11: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/11.jpg)
@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
![Page 12: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/12.jpg)
@cjforms #gdsteam
GOV.UK, February 2012
![Page 13: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/13.jpg)
@cjforms #gdsteam
DVLA, 2013
![Page 14: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/14.jpg)
@cjforms #gdsteam
GOV.UK, 2016
![Page 15: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/15.jpg)
@cjforms #gdsteam
![Page 16: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/16.jpg)
@cjforms #gdsteam
2011 2016
Des
igne
rs
GDS
NonGDS
Year
1
300
![Page 17: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/17.jpg)
@cjforms #gdsteam
How to:- design at scale- make design patterns for everyone- get designers to usedesign patterns
![Page 18: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/18.jpg)
@cjforms #gdsteam
How to design at scale
![Page 19: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/19.jpg)
@cjforms #gdsteam
We have tools,
Front-end kit
Prototype kit
GOV.UK elements
![Page 20: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/20.jpg)
@cjforms #gdsteam
We have tools, ways to meet
Front-end kit
Prototype kit
GOV.UK elements
Design training
Meet-ups
Mailing list
![Page 21: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/21.jpg)
@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
![Page 22: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/22.jpg)
@cjforms #gdsteam
It’s quite complicated
![Page 23: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/23.jpg)
@cjforms #gdsteam
![Page 24: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/24.jpg)
@cjforms #gdsteam
How to make design patterns for everyone
![Page 25: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/25.jpg)
@cjforms #gdsteam
Low High
Digital skills and confidence
Use
rs
GOV.UK Average
We must design for people with low digital skills
![Page 26: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/26.jpg)
@cjforms #gdsteam
Activity
Think of groups of people who might have low digital skills or confidence
![Page 27: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/27.jpg)
@cjforms #gdsteam https://assisteddigital.blog.gov.uk/2015/02/13/tales-of-the-unexpected-visas-assisted-digital-research
@katiearnie
![Page 28: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/28.jpg)
@cjforms #gdsteam Idea: Naintara Land image: http://www.memorylossonline.com/glossary/images/amygdala.jpg
We must design for people who are stressed
![Page 29: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/29.jpg)
@cjforms #gdsteam
Example 1
Dropdown lists
![Page 30: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/30.jpg)
@cjforms #gdsteam
![Page 31: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/31.jpg)
@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.
![Page 32: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/32.jpg)
@cjforms #gdsteam
![Page 33: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/33.jpg)
@cjforms #gdsteam
Avoid dropdowns. Burn your ‘select’ tags.Try these instead:
• Radio buttons
• Free text
• Type ahead*
*possibly; there are accessibility worries
![Page 34: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/34.jpg)
@cjforms #gdsteam
Example 2
Form structure
![Page 35: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/35.jpg)
@cjforms #gdsteam
Search for ‘service manual form structure’
![Page 36: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/36.jpg)
@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
![Page 37: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/37.jpg)
@cjforms #gdsteam
‘Things’ could be:
- information
- evidence
- decisions
- money
- physical objects
- times and places
- actions
![Page 38: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/38.jpg)
@cjforms #gdsteam
Let’s apply the form structure pattern to a page on GOV.UK
![Page 39: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/39.jpg)
@cjforms #gdsteam
![Page 40: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/40.jpg)
@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
![Page 41: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/41.jpg)
@cjforms #gdsteam
How to get designers to use design patterns
![Page 42: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/42.jpg)
@cjforms #gdsteam
We’ve tried 4 methods:
1. Research2. Co-creation3. Enforcement4. Design tools
![Page 43: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/43.jpg)
@cjforms #gdsteam
Method 1
Research
![Page 44: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/44.jpg)
@cjforms #gdsteam
Test your guidance as well as your patterns
http://uxpamagazine.org/design-at-scale/
![Page 45: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/45.jpg)
@cjforms #gdsteam@gemmaleigh govuk-elements.herokuapp.com
![Page 46: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/46.jpg)
@cjforms #gdsteam
Ingredients
Recipe
![Page 47: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/47.jpg)
@cjforms #gdsteam#gdsteam
https://www.gov.uk/service-manual/user-centred-design/resources/patterns/progress-indicators.html
![Page 48: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/48.jpg)
@cjforms #gdsteam
Method 2
Co-creation
![Page 49: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/49.jpg)
@cjforms #gdsteam
Example 1
Gender and sex
![Page 50: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/50.jpg)
@cjforms #gdsteam
![Page 51: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/51.jpg)
@cjforms #gdsteam
Example 2
Fixing pale boxes(the “Apple Effect”)
![Page 52: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/52.jpg)
@cjforms #gdsteam
Before…These box borders are too pale
![Page 53: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/53.jpg)
@cjforms #gdsteam
Simon Hurst (DWP) andJames Francis (Companies House) reported results from user research
![Page 54: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/54.jpg)
@cjforms #gdsteam
![Page 55: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/55.jpg)
@cjforms #gdsteam
Before…These box borders are too pale
![Page 56: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/56.jpg)
@cjforms #gdsteam
After…These box borders are dark enough
![Page 57: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/57.jpg)
@cjforms #gdsteam
Method 3
Enforcement
![Page 58: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/58.jpg)
@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”
![Page 59: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/59.jpg)
@cjforms #gdsteam
![Page 60: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/60.jpg)
@cjforms #gdsteam
We worked with the Verify team to make account management patterns
![Page 61: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/61.jpg)
@cjforms #gdsteam
Method 4
Design tools
![Page 62: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/62.jpg)
@cjforms #gdsteam
![Page 63: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/63.jpg)
@cjforms #gdsteam
![Page 64: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/64.jpg)
@cjforms #gdsteam
1. Research2. Co-creation3. Enforcement4. Design tools
![Page 65: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/65.jpg)
@cjforms #gdsteam
Make it easier to do it right than to do it wrong
![Page 66: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/66.jpg)
@cjforms #gdsteamhttp://www.slideshare.net/cjforms
![Page 67: Design patterns for government services: A community, not a library](https://reader035.vdocument.in/reader035/viewer/2022070510/58a9aa6c1a28ab9c758b5587/html5/thumbnails/67.jpg)
@cjforms #gdsteam
Caroline JarrettTwitter @cjforms
http://www.slideshare.net/cjforms