Save 37% off PRO during our Black Friday Sale! »

Open and inclusive web design - Port80 2016

Open and inclusive web design - Port80 2016

Have you ever got 90% of the way through a web project only to have someone in the client's organisation start demanding changes that don’t seem to make sense? We call this person the secret stakeholder. This talk covers web design methodologies to handle the secret stakeholder; make the process smoother (and happier) for everyone involved; and produce a website that works for the end-users.

92c6fcd3c1e72b85af8acbf706d4f5a4?s=128

Helen Clark

May 20, 2016
Tweet

Transcript

  1. Open & inclusive web design Helen Clark - CX web

    designer @littlehelli
  2. Typical web design process Planning Source: Wikimedia Commons: Noto Color

    Emoji
  3. Typical web design process Research

  4. Typical web design process Prototyping

  5. Typical web design process Visual design

  6. Typical web design process Development

  7. Typical web design process Beta testing

  8. None
  9. Surprise meeting!!! Typical web design process

  10. Obviously the secret stakeholder is not a monster*, but it

    can feel like it at the time! *This is a metaphor
  11. Typical web design process Revisions

  12. Typical web design process Amendments

  13. Typical web design process Launch

  14. Typical web design process Post-launch

  15. Cluster fuck /ˈklʌs.təˌfʌk/ Chaotic situation with all plans disintegrating in

    all directions
  16. “We do a ton of great work together, and when

    the project’s about to go live,
 a previously invisible stakeholder emerges from the shadows like Batman.” Mike Monterio, You’re my favorite client
  17. “No work is so
 good that it makes people happy

    they were left out.” Mike Monterio, You’re my favorite client
  18. None
  19. None
  20. Find opening times Find out about events Find child-friendly activities

    Find out about exhibitions Find out about talks Learn a skill Find out how to get to the museum Join a community group / project Buy a gift Hire a space for an event Virtual tour of the m usem Find out about job vacancies Find out about volunteering Give a donation Donate an item to the collection Find something to take my parents to Find something to take my friends to Find out about the cafe Other (Interactive features) Find out about museum staff Buy something for me Other (Printable activity sheets: things to make, experiments etc) Other (User forum) Other (Find work experience opportunities) Other (Activities for 12-15 yr olds) Other (W orkshops) Other (Recipes from olden days) Other (Antique identification)
  21. Find opening times Find out about events Find child-friendly activities

    Find out about exhibitions Find out about talks Learn a skill Find out how to get to the museum rtunities) or 12-15 yr olds) Other (W orkshops) Other (Recipes from olden days) Other (Antique identification)
  22. None
  23. None
  24. None
  25. T5: SINGLE EVENT (CONT.) On-page functionality Share this event on

    social media ƜDž Click one of the social share icons (Twitter, Facebook, LinkedIn) ƜDž A pop-up box will appear. This is created directly by whichever platform the user is sharing to and will behave accordingly. e.g. Twitter will allow the user to edit the preset text and before clicking ‘Tweet’ or ‘Log in and Tweet’. Facebook and LinkedIn will prompt the user to log in first if they are not already ƜDž The popup will close after the page is shared, returning the user to the event page. Share this event by email ƜDž Click the email share icon ƜDž A pop-up box containing preset text will appear ƜDž Enter an email address ƜDž Change the preset text (optional) ƜDž Click send ƜDž A success message will be displayed for approx 3-5 seconds ƜDž The email pop-up box will close returning the user to the event page.
  26. What benefits have we seen?

  27. Benefit 1 Honest feedback from users and potential users

  28. Benefit 2 Useful suggestions from front line staff

  29. None
  30. Benefit 3 Feedback has been applied beyond the website

  31. What are the risks of working openly?

  32. Risk 1 Getting the wrong
 kind of feedback

  33. “The page is all
 in Italian (I think)”

  34. “It somehow felt a bit basic, and not just because

    it isn’t finished”
  35. Risk 2 People trying to solve problems rather than identifying

    them
  36. Risk 3 It can make people uncomfortable

  37. Risk 4 It costs more

  38. Risk 5 Assuming that because it’s public, people are actually

    looking at it
  39. What would we do differently?

  40. What else are people doing to work openly?

  41. www.sandiego.gov

  42. www.sandiego.gov

  43. “By engaging residents in the redesign, we’re demonstrating a commitment

    to making sure the site does what it’s supposed to do: serve the needs of the community” Paul Hong, the president of the San Diego Experience Design group
  44. www.sandiego.gov

  45. www.opensandiego.org

  46. None
  47. Source: www.codeforamerica.org

  48. Source: www.codeforamerica.org

  49. Source: www.codeforamerica.org

  50. Source: www.codeforamerica.org

  51. Source: www.codeforamerica.org

  52. What about outside of the web industry?

  53. Early access gaming

  54. store.steampowered.com

  55. “These are games that evolve as you play them, as

    you give feedback, and as the developers update and add content. This is the way games should be made.” Steam early access
  56. “These are websites that evolve as you use them, as

    you give feedback, and as the developers update and add content. This is the way websites should
 be made.”
  57. Benefits to gamers

  58. Be the first to play exciting new games Benefits to

    gamers
  59. Be the first to play exciting new games Discuss and

    give feedback Benefits to gamers
  60. Be the first to play exciting new games Discuss and

    give feedback Play the game as it develops Benefits to gamers
  61. Benefits to developers

  62. Connect with community early Benefits to developers

  63. Connect with community early Crucial feedback and bug reports Benefits

    to developers
  64. Connect with community early Crucial feedback and bug reports Frequent

    iterations and improvements Benefits to developers
  65. “The goal of Early Access is for gamers to have

    a chance to interact with the developers by providing them feedback while the title is still being created.” STEAM press release
  66. Crowd-funding

  67. None
  68. 6 New feature! Now you can capture even more with

    Smoovie Great news! There’s been such amazing support for Smoovie
 that we’ve been able to develop and test a wonderful new
 feature. It’s an idea that came from our Kickstarter backers
 so a huge thanks going out the community! Posted by Smoovie (Creator)
  69. 6 New feature! Now you can capture even more with

    Smoovie Great news! There’s been such amazing support for Smoovie
 that we’ve been able to develop and test a wonderful new
 feature. It’s an idea that came from our Kickstarter backers
 so a huge thanks going out the community! Posted by Smoovie (Creator)
  70. Back to
 web design…

  71. Growth-Driven Design (GDD)

  72. “How do you know that you launched
 the best performing

    website possible?” Luke Summerfield, Hubspot
  73. Growth-Driven Design STRATEGY STRATEGY Gain an empathetic understanding of users

    and how to best fit the website into their life. GOAL: Brainstorm a “Wish List” of elements that solve user challenges and drive value. GOALS | PERSONAS | FUNDIMENTAL ASSUMPTIONS JOURNEY MAPPING | GLOBAL STRATEGY | WISH LIST Source: www.growthdrivendesign.com
  74. LAUNCH PAD WEBSITE Build a site with only the core,

    value-driving elements and is better than your current site. LAUNCH PAD WEBSITE GOAL: Launch quickly while balancing quality and client happiness. Growth-Driven Design Source: www.growthdrivendesign.com
  75. Growth-Driven Design 80% value 20% ideas

  76. PHASE 1: FOUNDATION 45 DAYS LAUNCH PAD
 WEBSITE STRATEGY Growth-Driven

    Design Source: www.growthdrivendesign.com
  77. Growth-Driven Design Promoters Assets Personalization Stickiness Conversion Rate Optimization Usability

    Value Audience CONTINUOUS IMPROVEMENT WEBSITE HIERARCHY A roadmap to follow for building a peak performing site. • Provide focus • Clear expectations • Measure progress to goals Source: www.growthdrivendesign.com
  78. Growth-Driven Design STRATEGY LAUNCH PAD WEBSITE CONTINUOUS IMPROVEMENT PLAN BUILD

    LEARN TRANSFER Audience Value Usability Conversion Rate Optimization Stickiness Personalization Assets Promoters Source: www.growthdrivendesign.com
  79. Growth-Driven Design STRATEGY LAUNCH PAD WEBSITE CONTINUOUS IMPROVEMENT PLAN BUILD

    LEARN TRANSFER Audience Value Usability Conversion Rate Optimization Stickiness Personalization Assets Promoters Source: www.growthdrivendesign.com
  80. Client Audience Design
 team Traditional designer-client-audience relationship

  81. Client Audience Design
 team Traditional designer-client-audience relationship

  82. Client Audience Design
 team Traditional designer-client-audience relationship

  83. Client Audience Design
 team Traditional designer-client-audience relationship

  84. Client Audience Design
 team Traditional designer-client-audience relationship

  85. Client Audience Design
 team Traditional designer-client-audience relationship

  86. Audience Design
 team Traditional designer-client-audience relationship Client

  87. Client Audience Design
 team Inclusive relationship

  88. Client Audience Design
 team Inclusive relationship

  89. Client Audience Design
 team Inclusive relationship

  90. “No one is born knowing how to be a good

    client. Successful design projects need equal participation from the client and the designer.” Mike Monterio, You’re my favorite client
  91. None
  92. None
  93. None
  94. Thank you! @littlehelli