Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Design patterns
for government
services
a community not a library
Caroline Jarrett
@cjforms #gdsteam
@cjforms #gdsteam
Caroline Jarrett
Forms specialist
Government Digital Service
@cjforms
Tim Paul
Head of Design Patterns a...
@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-simplif...
@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-no...
@cjforms #gdsteam
GOV.UK, February 2012
@cjforms #gdsteam
DVLA, 2013
@cjforms #gdsteam
GOV.UK, 2016
@cjforms #gdsteam
@cjforms #gdsteam
2011 2016
Designers
GDS
Non
GDS
Year
1
300
@cjforms #gdsteam
How to:
- design at scale
- make design patterns for everyone
- get designers to use design 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...
@cjforms #gdsteam
We have tools, ways to
meet, and patterns
Front-end kit
Prototype kit
GOV.UK elements
Design patterns
De...
@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
Users
GOV.UK Average
We must design for people
with low digital s...
@cjforms #gdsteam
Activity
Think of groups of people who might
have low digital skills or confidence
@cjforms #gdsteamhttps://assisteddigital.blog.gov.uk/2015/02/13/tales-of-the-unexpected-visas-assisted-digital-research@ka...
@cjforms #gdsteamIdea: Naintara Land image: http://www.memorylossonline.com/glossary/images/amygdala.jpg
We must design fo...
@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...
@cjforms #gdsteam
@cjforms #gdsteam
Avoid dropdowns.
Burn your ‘select’ tags.
Try these instead:
• Radio buttons
• Free text
• Type ahead*
*...
@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....
@cjforms #gdsteam
‘Things’ could be:
- information
- evidence
- decisions
- money
- physical objects
- times and places
- ...
@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-licence
http://bit.ly/firstprov
1. Make a list of al...
@cjforms #gdsteam
How to get
designers to
use design
patterns
@cjforms #gdsteam
We’ve tried 4 methods:
1. Research
2. Co-creation
3. Enforcement
4. 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.h...
@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) and
James 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...
@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. Research
2. Co-creation
3. Enforcement
4. Design tools
@cjforms #gdsteam
Make it easier to do it right
than to do it wrong
@cjforms #gdsteamhttp://www.slideshare.net/cjforms
@cjforms #gdsteam
Caroline Jarrett
Twitter @cjforms
http://www.slideshare.net/cjforms
caroline.jarrett@digital.cabinet-off...
Upcoming SlideShare
Loading in …5
×

Design patterns for government services: A community, not a library

572 views

Published on

How can you build great services when you have designers dispersed between many different teams?

At the UK Government Digital Service, that’s the challenge we face. We want government services to be ‘consistent, not uniform’. But when we looked at some of them, we discovered that we weren’t consistent. Even for something as simple as asking for a date of birth, we had different ways to do it - and we learned that some are much more successful than others.

So we decided to create some design patterns. We’ve seen previous efforts at creating pattern libraries: full of great advice, but that can so easily turn into ""shelfware"" - unloved, unused, out of date.

This presentation will introduce you to our design patterns, give you a chance to try using one of them, and show how you can use them and contribute to them.

Published in: Technology
  • Be the first to comment

Design patterns for government services: A community, not a library

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

×