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.

We need to Talk about Frank


Published on

Talk to Frank is a service that provides drug information to young adults. We were asked to redesign it by exploring their needs when looking for information about illegal drugs.

At the heart of this project was inclusive design.

This session will reflect on what this meant in practice for research, UX, design and development.

We will share what we learned and give you the tools you need to ensure your next project has inclusive design at its core.

Published in: Design
  • Be the first to comment

We need to Talk about Frank

  1. 1. We need to Talk about Frank @oohmawolfie
  2. 2. hallo! @oohmawolfie
  3. 3. research director at @oohmawolfie
  4. 4. @oohmawolfie
  5. 5. @oohmawolfie
  6. 6. This is one of the best performing sites we have seen for any of our clients - private and public sector Google “ ”@oohmawolfie
  7. 7. Had this organic search traffic been bought, it would have cost us £216k! Talk to Frank “ ”@oohmawolfie
  8. 8. This is prevention through digital technology at its best. FRANK is giving young people clear, unbiased information in a way they are comfortable with accessing Duncan Selbie, CEO of Public Health England “ ”@oohmawolfie
  9. 9. @oohmawolfie how?
  10. 10. Inclusive design. @oohmawolfie
  11. 11. @oohmawolfie Inclusivity?? Accessibility???
  12. 12. @oohmawolfie Inclusivity?? Accessibility???!
  13. 13. Refers specifically to the impact of designs on people that have disabilities. @oohmawolfie Accessibility @oohmawolfie
  14. 14. Accessible design is good design. If we have to sacrifice elegance - so be it. The people who need our service are often the people that find them the hardest to use. Let’s think about those people from the “ ”GDS Design principles @oohmawolfie
  15. 15. Designing so that anyone can use it regardless of age, ability, situation… @oohmawolfie InclusivityImage source: Microsoft Inclusive Design
  16. 16. The goal is to meet the needs of consumers of diverse age and capability in a wide range of contexts because appropriate access to information, products, services and facilities is a fundamental human right. “ ”The British Standards Institute @oohmawolfie
  17. 17. What happens when you ain't inclusive @oohmawolfie
  18. 18. Only 50 out of 270 underground tube stations are fully accessible @oohmawolfie
  19. 19. In a car crash, women are 71% more likely to be injured and 17% more likely to die. Women are “out of position drivers” @oohmawolfie Invisible Women: Exposing Data Bias in a World Designed for Men by Caroline Criado Perez
  20. 20. Less than 10% of sites are accessible @oohmawolfie
  21. 21. Making FRANK inclusive @oohmawolfie
  22. 22. “BE INCLUSIVE” @oohmawolfie
  23. 23. “BE INCLUSIVE”WTF @oohmawolfie
  24. 24. Project set up @oohmawolfie
  25. 25. @oohmawolfie UserExperienceDesign QAtesterCopywriter Projectmanagers The cxpartners team Cloud engineer Tech architecture Frontend developer Backend developer
  26. 26. @oohmawolfie Project set up CROSS FUNCTIONAL TEAM
  27. 27. Calling people “addicts” and using phrases like “get clean” reinforce negative stereotypes @oohmawolfie
  28. 28. @oohmawolfie Content testing Prototype testing Project set up RESEARCH METHODOLOGY Brand research Accessibility testing
  29. 29. @oohmawolfie Research Design Build SPRINT Project set up RESEARCH METHODOLOGY Copywriting
  30. 30. @oohmawolfie Project set up RESEARCH IS A TEAM SPORT
  31. 31. @oohmawolfie Project set up RESEARCH IS A TEAM SPORT “ Seeing someone struggle with something you’ve built was heartbreaking
  32. 32. @oohmawolfie Image source: Microsoft Inclusive Design @oohmawolfie
  33. 33. 1. Context 2. Age/Gender 3. Cognitive impairments 4. Visual impairments 5. Location @oohmawolfie
  34. 34. @oohmawolfie Context
  35. 35. @oohmawolfie
  36. 36. @oohmawolfie
  37. 37. @oohmawolfie
  38. 38. @oohmawolfie Age and gender
  39. 39. @oohmawolfie Design IMAGES
  40. 40. @oohmawolfie Design IMAGES
  41. 41. @oohmawolfie Design IMAGES
  42. 42. @oohmawolfie@oohmawolfie Design BRAND
  43. 43. alpha v1 @oohmawolfie
  44. 44. alpha v2 @oohmawolfie
  45. 45. Don’t.@oohmawolfie Just.
  46. 46. beta @oohmawolfie
  47. 47. @oohmawolfie Cognitive impairments
  48. 48. @oohmawolfie v @oohmawolfie Daniel Britton
  49. 49. @oohmawolfie @oohmawolfie
  50. 50. @oohmawolfie @oohmawolfie
  51. 51. @oohmawolfie @oohmawolfie
  52. 52. @oohmawolfie Visual impairments
  53. 53. @oohmawolfie
  54. 54. @oohmawolfie Alpha BetaOld site
  55. 55. @oohmawolfie@oohmawolfie Design • Youthful yet timeless • Approachable, supportive, accepting and real • Straightforward but not clinical • Experience but not preachy BRANDING : CONTENT
  56. 56. @oohmawolfie Development ACCESSIBLE CODE “A picture of cocaine”
  57. 57. @oohmawolfie Development ACCESSIBLE CODE “Cocaine formed into lines, with a straw and craft knife as paraphernalia”
  58. 58. @oohmawolfie Development LACK OF BEST PRACTICE “ We’re making best guesses…sometimes we fail
  59. 59. @oohmawolfie Development ACCESSIBLE CODE
  60. 60. @oohmawolfie v @oohmawolfie Development ACCESSIBLE CODE GOV.UK 2106 assistive technology survey
  61. 61. @oohmawolfie v @oohmawolfie Development ACCESSIBLE CODE GOV.UK 2106 assistive technology survey
  62. 62. SCREENREADER TESTING • QA testing • Accessibility review • Own networks UX
  63. 63. @oohmawolfie Location
  65. 65. @oohmawolfie
  66. 66. @oohmawolfie Wobbly eggs Jellies Mazzies
  67. 67. @oohmawolfie UX “ Amazon? What’s that? INCENTIVES
  68. 68. ''A well defined technical strategy has been the pillar of the approach to FRANK, which was critical to meeting user needs.'' Erica Buckley, Head of Marketing Digital & Data, Public Health England @oohmawolfie
  69. 69. @oohmawolfie Technical architecture
  70. 70. 39% increase in site traffic @oohmawolfie Technical architecture
  71. 71. 200% increase in users seeing pages load in less than three seconds @oohmawolfie Technical architecture
  72. 72. Accelerated Mobile Pages (AMP) @oohmawolfie Technical architecture
  73. 73. @oohmawolfie Technical architecture We redesigned the architecture of the site making sure it would be performant
  74. 74. Technical architecture, development and UX working as a team was critical in enabling us to build an inclusive service @oohmawolfie Technical architecture
  75. 75. what can I do to make my projects more inclusive? @oohmawolfie
  77. 77. 2.START PLANNINGEARLY @oohmawolfie
  78. 78. 3.START RECRUITING. EARLY @oohmawolfie
  79. 79. Accessibility panel @oohmawolfie
  80. 80. 4.USEMIXED METHODOLOGIES @oohmawolfie
  81. 81. 5.USEAN ACCESSIBLE VENUE @oohmawolfie
  82. 82. 6.USEREMOTE TESTING @oohmawolfie
  83. 83. 7.SPENDMORE TIMEONSETUP @oohmawolfie
  85. 85. @oohmawolfie@oohmawolfie
  86. 86. 9.WORKINCROSS FUNCTIONAL TEAMS @oohmawolfie
  87. 87. 10.KEEPANEYE ONEACHOTHER @oohmawolfie
  88. 88. It doesn’t have to be perfect. But it must be better. @oohmawolfie
  89. 89. We mustn’t further marginalise disadvantaged groups with privileged design @oohmawolfie
  90. 90. How will you make your next project more inclusive? @oohmawolfie
  91. 91. Thank you @oohmawolfie