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 UXPA 2016

3,084 views

Published on

The UK government now has several hundred designers working on services for citizens. How do we design at scale? By working with our designers as a community.
Presentation by Caroline Jarrett @cjforms at the UXPA 2016 conference in Seattle

Published in: Design
  • Be the first to comment

Design Patterns for Government Services UXPA 2016

  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 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

×