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

Inclusive web design - DxN

92c6fcd3c1e72b85af8acbf706d4f5a4?s=47 Helen Clark
September 14, 2016

Inclusive web design - DxN

Have you ever got 90% of the way through a 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 ways to handle the secret stakeholder and their company by making them a part of the process. Being inclusive with clients can make the process run smoothly (and be enjoyable) for everyone involved; and produce a product that works for the end-users and addresses their needs too.

92c6fcd3c1e72b85af8acbf706d4f5a4?s=128

Helen Clark

September 14, 2016
Tweet

Transcript

  1. Inclusive web design Helen Clark - Experience 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. What else are people doing to work openly and inclusively?

  38. Growth-Driven Design (GDD)

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

    website possible?” Luke Summerfield, Hubspot
  40. 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
  41. 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
  42. Growth-Driven Design 80% value 20% ideas

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

    Design Source: www.growthdrivendesign.com
  44. 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
  45. Growth-Driven Design Source: www.growthdrivendesign.com

  46. Growth-Driven Design STRATEGIST • Focus & priority • Marketing &

    sales • Project management • Communication USER EXPERIENCE • User experience (UX) • Research & tests • Messaging / content DESIGN+DEVELOPER • Design • Development User insights | Action item brainstorming | Possible to overlay (also stakeholders) EXAMPLE ONE: 3 PERSON POD (but be cautious of autonomy challenges) Source: www.growthdrivendesign.com
  47. 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
  48. www.sandiego.gov

  49. www.sandiego.gov

  50. “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
  51. www.sandiego.gov

  52. www.opensandiego.org

  53. None
  54. Source: www.codeforamerica.org

  55. Source: www.codeforamerica.org

  56. Source: www.codeforamerica.org

  57. Source: www.codeforamerica.org

  58. Source: www.codeforamerica.org

  59. “A universal web is designed for all. It is a

    place that is available for people of all abilities, aptitudes and attitudes.” Sarah Horton & Whitney Quesenbery,
 A web for everyone
  60. Development Typical web design process

  61. Beta testing Typical web design process

  62. “Hang on this is going to be accessible right”

  63. What about accessibility? “No problem, we’ll add some in”

  64. “We are creating websites and apps to be accessed, yet

    treating accessibility like an optional extra.” Mischa Andrews, The inaccessible web:
 how we got into this mess
  65. - Know your audience - Define their goals - Help

    them achieve goals without creating barriers - Design with accessibility in mind, not as an after thought People first
  66. - Read the WCAG guidelines - Let users control the

    interface - Use plain language - Colour contrast and legible typography - Focus styles Accessible design
  67. - Read the WCAG guidelines - Support keyboard control -

    Implement interface controls Accessible development
  68. Client Audience Design
 team Traditional designer-client-audience relationship

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

  70. Client Audience Design
 team Inclusive relationship

  71. “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
  72. None
  73. Thank you! @littlehelli