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

1,798 views

Published on

Tim Paul (@timpaul) and Caroline Jarrett (@cjforms) from GDS talk about GOV.UK design patterns at the UX Cambridge 2015 conference #uxcam

Published in: Design
  • Be the first to comment

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

  1. 1. #gdsteam@timpaul @cjforms Design patterns for government services: a community not a libraryUX Cambridge 2015
  2. 2. Caroline Jarrett Forms specialist Government Digital Service @cjforms Tim Paul Head of Interaction Design Government Digital Service @timpaul
  3. 3. #gdsteam@timpaul @cjforms Not present at time of photo: content designer, user researcher, product manager, other?
  4. 4. 4 A quick show of hands… #gdsteam@timpaul @cjforms
  5. 5. #gdsteam@timpaul @cjforms Government Digital Service
  6. 6. 6 The next 90 minutes: 1. Designing GOV.UK 2. Using design patterns 3. Example patterns 4. Lessons learned #gdsteam@timpaul @cjforms
  7. 7. #gdsteam@timpaul @cjforms Designing GOV.UK
  8. 8. #gdsteam@timpaul @cjforms
  9. 9. #gdsteam@timpaul @cjforms 12 million unique visitors every week Home to over 330 departments and organisations Saving more than £62 million a year
  10. 10. #gdsteam@timpaul @cjforms GOV.UK is information and services
  11. 11. #gdsteam@timpaul @cjforms www.gov.uk/guidance/keeping-a-pet-pig-or-micropig
  12. 12. #gdsteam@timpaul @cjforms www.gov.uk/get-birthday-anniversary-message-from-queen
  13. 13. #gdsteam@timpaul @cjforms www.gov.uk/treasure
  14. 14. #gdsteam@timpaul @cjforms www.gov.uk/burial-at-sea
  15. 15. #gdsteam@timpaul @cjforms www.gov.uk/claim-asylum
  16. 16. #gdsteam@timpaul @cjforms www.gov.uk/carers-allowance/how-to-claim
  17. 17. #gdsteam@timpaul @cjforms https://www.youtube.com/watch?v=IYBLX3V8ek4
  18. 18. #gdsteam@timpaul @cjforms GOV.UK is for everyone
  19. 19. #gdsteam@timpaul @cjforms Low High Digital skills and confidence Users GOV.UK Average
  20. 20. #gdsteam@timpaul @cjforms A brief history of designing GOV.UK
  21. 21. #gdsteam@timpaul @cjforms 2011 2012 2013 Alpha Beta Live 1 designer 10 designers 100+ designers
  22. 22. #gdsteamwww.flickr.com/photos/benterrett/7309046368
  23. 23. #gdsteam Small teams Easy to share and copy ideas House style emerges naturally @timpaul @cjforms
  24. 24. #gdsteam@timpaul @cjforms
  25. 25. #gdsteam@timpaul @cjforms Cross Government Design Meeting, Leeds
  26. 26. #gdsteam@timpaul @cjforms
  27. 27. #gdsteam@timpaul @cjforms 2011 2015 Numberof Designers GDS Non GDS Alpha Beta Live Time
  28. 28. #gdsteam@timpaul @cjforms How do you do design at scale?
  29. 29. #gdsteam@timpaul @cjforms Community Tools Resources
  30. 30. #gdsteam@timpaul @cjforms
  31. 31. #gdsteam@timpaul @cjforms Community Mailing lists, meet-ups, reviews, studios, wiki, workshops, training
  32. 32. #gdsteam@timpaul @cjforms Tools Prototyping kit, Screenshot sharer
  33. 33. #gdsteam@timpaul @cjforms Resources Principles, templates, elements and patterns
  34. 34. https://www.gov.uk/design-principles #gdsteam
  35. 35. #gdsteam@timpaul @cjforms
  36. 36. #gdsteam@timpaul @cjforms
  37. 37. #gdsteamgovuk-elements.herokuapp.com
  38. 38. #gdsteamgovuk-elements.herokuapp.com
  39. 39. #gdsteam@timpaul @cjforms
  40. 40. #gdsteam@timpaul @cjforms
  41. 41. #gdsteamgovuk-elements.herokuapp.com 20 patterns 100 patterns
  42. 42. #gdsteam@timpaul @cjforms
  43. 43. #gdsteam 550+ members 100+ patterns @timpaul @cjforms
  44. 44. #gdsteam@timpaul @cjforms designpatterns.hackpad.com
  45. 45. #gdsteam@timpaul @cjforms Using design patterns
  46. 46. #gdsteam Activity Let’s apply a pattern to a page on GOV.UK @timpaul @cjforms
  47. 47. #gdsteam Apply the Form structure pattern to the Apply for a UK visa page @timpaul @cjforms
  48. 48. #gdsteam@timpaul @cjforms Google ‘service manual form structure’
  49. 49. #gdsteam@timpaul @cjforms www.gov.uk/apply-uk-visa
  50. 50. #gdsteam@timpaul @cjforms
  51. 51. #gdsteam@timpaul @cjforms Example patterns
  52. 52. #gdsteam Progress indicators @timpaul @cjforms
  53. 53. 55 #gdsteam@timpaul @cjforms
  54. 54. #gdsteam@timpaul @cjforms
  55. 55. #gdsteam@timpaul @cjforms
  56. 56. #gdsteam@timpaul @cjforms
  57. 57. #gdsteam@timpaul @cjforms
  58. 58. #gdsteam Drop down lists @timpaul @cjforms
  59. 59. #gdsteam@timpaul @cjforms
  60. 60. #gdsteam@timpaul @cjforms We showed some videos here of participants struggling with dropdowns. Sorry, we can’t share on the web.
  61. 61. #gdsteam@timpaul @cjforms
  62. 62. #gdsteam Don’t use dropdowns / select boxes. They’re not intuitive They hide choices They’re hard to use Avoid if at all possible Use radios or free text fields instead @timpaul @cjforms
  63. 63. #gdsteam Radio buttons and checkboxes @timpaul @cjforms
  64. 64. #gdsteam For radio buttons / checkboxes Make the controls bigger Use language to differentiate them Test with ‘other’ as an option Write yes/no statements out in full (?) @timpaul @cjforms
  65. 65. #gdsteam Gender and sex @timpaul @cjforms
  66. 66. #gdsteam@timpaul @cjforms
  67. 67. #gdsteam@timpaul @cjforms Lessons learned
  68. 68. #gdsteam@timpaul @cjforms Design patterns can’t replace designers
  69. 69. #gdsteam@timpaul @cjforms Design patterns can’t be imposed on people
  70. 70. #gdsteam@timpaul @cjforms Design patterns can’t negotiate for you
  71. 71. #gdsteam@timpaul @cjforms Design patterns can save you lots of time
  72. 72. #gdsteam@timpaul @cjforms Design patterns can make your site design more consistent
  73. 73. #gdsteam@timpaul @cjforms Design patterns can be a focus for your design community
  74. 74. #gdsteam@timpaul @cjforms The discussion and creation of patterns is where their value lies
  75. 75. #gdsteam@timpaul @cjforms Thanks
  76. 76. Caroline Jarrett Forms specialist Government Digital Service @cjforms Tim Paul Head of Interaction Design Government Digital Service @timpaul

×