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.

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