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.

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
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
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)
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
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
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
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
94. Thank you! @littlehelli