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

Everyone's a user - NUX Manchester

92c6fcd3c1e72b85af8acbf706d4f5a4?s=47 Helen Clark
February 06, 2018

Everyone's a user - NUX Manchester

Why do designers love to hate clients? Sometimes it feels like clients ‘don’t get’ what we’re trying to achieve or that they focus on the wrong details. It’s up to us to achieve great results for our clients — creating an inclusive relationship is the first step. As UX designers we can be guilty of focusing only on the end user experience to the detriment of our client’s experience. We forget that our stakeholders are users of the design process we take them through. This talk looks at how we can make the design process better for our clients, and their users.

92c6fcd3c1e72b85af8acbf706d4f5a4?s=128

Helen Clark

February 06, 2018
Tweet

Transcript

  1. Everyone’s a user Helen Clark - UX consultant at SPARCK

    @littlehelli
  2. Hi Editorial & magazine designer Graphic designer Web/digital designer UX/UI

    designer UX consultant Everyone’s a user @littlehelli
  3. Everyone’s a user @littlehelli

  4. Source: Wikimedia Commons: Noto Color Emoji Planning & discovery Typical

    digital design process Everyone’s a user @littlehelli
  5. Research Typical digital design process Everyone’s a user @littlehelli

  6. Prototyping Typical digital design process Everyone’s a user @littlehelli

  7. Visual design Typical digital design process Everyone’s a user @littlehelli

  8. Development Typical digital design process Everyone’s a user @littlehelli

  9. Beta testing Typical digital design process Everyone’s a user @littlehelli

  10. None
  11. Surprise meeting!!! Typical digital design process Everyone’s a user @littlehelli

  12. Revisions Typical digital design process Everyone’s a user @littlehelli

  13. Amendments Typical digital design process Everyone’s a user @littlehelli

  14. Launch Typical digital design process Everyone’s a user @littlehelli

  15. Post-launch Typical digital design process Everyone’s a user @littlehelli

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

    all directions Everyone’s a user @littlehelli
  17. Client Audience
 (user) Design
 team Traditional designer-client-audience relationship Everyone’s a

    user @littlehelli
  18. Audience
 (user) Design
 team Client Traditional designer-client-audience relationship Everyone’s a

    user @littlehelli
  19. “Humans have a fundamental need to be consulted, engaged, to

    exercise their knowledge (and thus power).” Paul Ford, The Web Is a Customer Service Medium Everyone’s a user @littlehelli
  20. Client Audience
 (user) Design
 team Inclusive relationship Everyone’s a user

    @littlehelli
  21. Case study:
 Derby Museums Everyone’s a user @littlehelli

  22. None
  23. None
  24. 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)
  25. 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)
  26. Everyone’s a user @littlehelli

  27. None
  28. None
  29. 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. Everyone’s a user @littlehelli
  30. What benefits
 did we see? Everyone’s a user @littlehelli

  31. Honest feedback from users and potential users Benefit 1 Everyone’s

    a user @littlehelli
  32. Benefit 2 Useful suggestions from
 front line staff Everyone’s a

    user @littlehelli
  33. None
  34. Benefit 3 Feedback has been applied beyond the website Everyone’s

    a user @littlehelli
  35. What were the risks
 of working openly? Everyone’s a user

    @littlehelli
  36. Risk 1 Getting the wrong kind of feedback Everyone’s a

    user @littlehelli
  37. “The page is all in Italian. (I think.)” Everyone’s a

    user @littlehelli
  38. “It somehow felt a bit basic, and not just because

    it isn’t finished.” Everyone’s a user @littlehelli
  39. Risk 2 People trying to solve problems rather than identifying

    them Everyone’s a user @littlehelli
  40. Risk 3 It can make people uncomfortable Everyone’s a user

    @littlehelli
  41. Risk 4 It costs more Everyone’s a user @littlehelli

  42. Risk 5 Assuming that because it’s public, people are looking

    at it Everyone’s a user @littlehelli
  43. None
  44. Surprise meeting!!! Everyone’s a user @littlehelli

  45. Everyone’s a user @littlehelli

  46. and the design brief Bring it back to research Everyone’s

    a user @littlehelli
  47. “When user-centered practices are executed, designers and researchers can find

    the design ‘sweet spot’ where business needs and user needs overlap.” Hoa Loranger VP at Nielsen Norman Group, 
 UX Without User Research Is Not UX Everyone’s a user @littlehelli
  48. What about outside of the web industry? Everyone’s a user

    @littlehelli
  49. Early access gaming Everyone’s a user @littlehelli

  50. store.steampowered.com

  51. “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 Everyone’s a user @littlehelli
  52. Be the first to play exciting new games Discuss and

    give feedback Play the game as it develops Benefits to gamers Everyone’s a user @littlehelli
  53. Benefits to developers Connect with community early Crucial feedback and

    bug reports Frequent iterations and improvements Everyone’s a user @littlehelli
  54. “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 Everyone’s a user @littlehelli
  55. “These are websites that evolve as you 
 use them,

    as you give feedback, and as 
 the designers and developers update and 
 add content. This is the way websites should be made.” Everyone’s a user @littlehelli
  56. Open & inclusive organisations Everyone’s a user @littlehelli

  57. Everyone’s a user @littlehelli

  58. • Build iteratively • Start with people's needs • Use

    real-time data to inform decisions • Default to open • Ensure everyone can participate Everyone’s a user @littlehelli
  59. GOV.UK identity guidelines For printed materials and stationary, the symbol

    should be black Symbol Symbol Printed Everyone’s a user @littlehelli
  60. • Start with user needs • Do the hard work

    to make it simple • Design with data • Iterate. Then iterate again • This is for everyone • Understand context • Make things open: it makes things better ALPHA GOV.UK identity guidelines December 2013 9 For printed materials and stationary, the symbol should be black Symbol Printed Symbol Printed Everyone’s a user @littlehelli
  61. “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 Everyone’s a user @littlehelli
  62. Visual design Typical digital design process Everyone’s a user @littlehelli

  63. Development Typical digital design process Everyone’s a user @littlehelli

  64. Beta testing Typical digital design process Everyone’s a user @littlehelli

  65. “Hang on this is going
 to be accessible, right?” Everyone’s

    a user @littlehelli
  66. “No problem, we’ll add some in.” Everyone’s a user @littlehelli

  67. “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 Everyone’s a user @littlehelli
  68. • 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 Everyone’s a user @littlehelli
  69. • Read the WCAG guidelines • Let users control the

    interface • Support keyboard control • Focus styles • Use plain language • Colour contrast and legible typography Accessible design Everyone’s a user @littlehelli
  70. https://24ways.org/2017/wcag-for-people-who-havent-read-them/

  71. “Everyone is responsible for looking out for the user.” Erika

    Hall, Just enough research Everyone’s a user @littlehelli
  72. Client Audience
 (user) Design
 team Inclusive relationship Everyone’s a user

    @littlehelli
  73. Making websites is hard! Everyone’s a user @littlehelli

  74. Making websites is hard! Everyone’s a user @littlehelli

  75. Making results-driven, user-oriented, effective websites on time and on budget

    is fucking hard! Everyone’s a user @littlehelli
  76. “You are not your users” Everyone’s a user @littlehelli

  77. Everyone’s a user @littlehelli

  78. Clients & stakeholders are users of the design process Everyone’s

    a user @littlehelli
  79. Everyone’s a user @littlehelli

  80. What can we do to make the design process better

    for them? Everyone’s a user @littlehelli
  81. How can they see the value of the way we

    work? Everyone’s a user @littlehelli
  82. Why should they care? Everyone’s a user @littlehelli

  83. Impact Outcome Input Output Activity Source: http://sbpltd.uk.com Project meetings
 and

    deliverables Business and user goals Wider organisational/ operational impact Everyone’s a user @littlehelli
  84. “Features and services are outputs. The goals they are meant

    to achieve are outcomes.” Jeff Gothelf and Josh Seiden, Lean UX Everyone’s a user @littlehelli
  85. “If your work doesn’t support the business, you have failed,

    no matter how good the design.” Erika Hall, Just enough research Everyone’s a user @littlehelli
  86. 3 ways to focus stakeholders on outcomes, not outputs (and

    make them feel included) Everyone’s a user @littlehelli
  87. 1. Start with ‘why?’ Everyone’s a user @littlehelli

  88. “There is no design without discovery” Dan Brown, Practical Design

    Discovery Everyone’s a user @littlehelli
  89. Storymapping Everyone’s a user @littlehelli

  90. None
  91. • Rising Action: The product name and a brief description

    or market category • Crisis: The competition FIGURE 3.1 Source: Donna Lichaw, The user’s journey Everyone’s a user @littlehelli
  92. None
  93. “Inviting people to participate empowers them.” Erika Hall, Just enough

    research Everyone’s a user @littlehelli
  94. 2. Help clients and stakeholders focus on their users Everyone’s

    a user @littlehelli
  95. Service design blueprint Everyone’s a user @littlehelli

  96. None
  97. at www.practicalservicedesign.com Customer visits the-service-cafe.com and navigates to online menu

    1 Screenshot of online menu Customer Website hosting The order is confirmed and customer is sent a confirmation email 6 Touchpoint Order is received by cafe on their kitchen computer, where it is printed by kitchen staff with the dine-in time noted, and put in a special ticket queue until it is time. 8 Touchpoint Kitchen staff notices tickets. Order is started. 10 Touchpoint Front of house staff gives the table number to the customer and sends the number back to be written on the existing ticket. 13 Touchpoint Order is completed and a server picks it up and brings it out to the dining room to find the customer’s table number. 14 Touchpoint Customer is asked if they have an account already, and given choice to sign up for one, or to sign in with an existing one 3 Touchpoint Customer does not have an account, chooses “sign up” and fills in personal and payment information 4 Touchpoint Customer is taken to the menu page to view standard items as well as updated daily specials and offers. They fill in their order for them and their 2 co- workers 2 Touchpoint Once completed, customer is taken to the payment page to confirm their order and select their dine-in or pickup time. They choose to dine-in. 5 Touchpoint Customer has co-workers agree to pay back the money at a later time since the order could not be split. 7 Touchpoint Time passes, and when it nears the customer’s desired lunch time, they leave for the cafe. 9 Touchpoint Customer arrives, enters cafe and sees a line to order. There is a register for placing orders, and a 2nd register for “pick up & check in”. 11 Touchpoint After a few moments of hesitation, customer decides to go to “pick up & check in” line. They wait for a moment and then are able to give their name and receive a table number. 12 Touchpoint Customer receives order at their table, 9 minutes after sitting down. 15 Touchpoint During meal, customer is given a comment card with a 1-10 recommendation survey. 16 Touchpoint Third party ordering system Menu link is part of the main menu, but also a big button on the homepage Customer Customer Customer Customer Customer Kitchen Staff Customer Kitchen Staff Dining Room Staff Kitchen Staff Customer Customer Customer Customer Third party ordering system Third party ordering system Website hosting Third party ordering system Third party ordering system Third party ordering system POS system/Kitchen computer Kitchen Printer POS system Assumption is that customers know that menu = order There is no ability to pay ad- hoc without an account first Daily specials are updated through ordering system. It is not connected to onsite POS Accounts are required for follow up marketing 19% of users abandon their order at the Sign up/in page This is the main point of abandonment in online ordering What would it take for ad-hoc, one time ordering? 30% of orders come through the website - 20% for takeout, 10% for dine-in Sign up does not require an email or SMS confirmation There is no way to split the cost, only the signed in user can pay for the whole party Confirmation email does not require any action. Can the ordering system accommodate split orders? Is there a way to use an online peer money exchange service to help? ie Google Wallet Only 15% of these emails are opened Can SMS be used here to alert the customer that their order is started? Could customer reply via SMS when the arrive to notify the system? This depends on them remembering on their own when it’s time to depart Can SMS be required? Account can’t be created without credit card information Customer’s will create new account if they forget they have one, or forget email used Goal for sit-down to food is 5 minutes. Dining room staff Comment card is NPS style with a spot for comments Has to be completed and left on table Could this be made digital? Could staff enter it in directly? Data needs to be captured. No card is worse than a bad rating. Staff is required to make sure every guest get’s a survey Staff can forget or customres leave since they pay during ordering, not after Less than 30% of customer’s fill out card A tip has to be in cash as they paid online before arriving Dining room staff Time to receive order is highly dependant on when they arrive and when order starts There is currently no good way to synchronize the arrival and preparation How often are single orders for multiple paying parties? The sign up flow is a definite detour and bump in the first- time experience Payment information is saved, it is not actually used to pay at this point The previously saved payment information is now picked and used here. Customer is not charged until they confirm dine-in or pickup. Order will be saved in their account as “unfinished” Order can be saved as a favorite. Would it be better to use text and not use email for this? Order moves to step 8 Kitchen uses paper tickets printed by the POS system The online order queue is reliant on the kitchen staff staying aware of timing Are there technology options to have the tickets be automated with the POS? The online order queue is monitored by the staff to see the upcoming times This is the most brittle step X orders are started at the right time so they sync up with customer arrival Orders must be started a minimum of 15 minutes early How could the kitche staff be made more aware of the upcoming tickets? Customer’s complain when they arrive later and food is cold Customers who arrive early typically don’t complain about waiting This step is totally dependent on the staff being aware of online tickets. Online order tickets must be monitored every few minutes The staff is trained to be very worried about online orders so they check frequently If a ticket is lost or misplaced, they will have to reprint it and start over There is ambiguity as to what the customer is supposed to do when they arrive Tables are not reserved so there is no guarantee there will be a free one right away There is no “close out” order, the ticket is just placed on the finished spike Since tables are usually added through the POS, the hand written ones can be forgotten This is an awkward process as they have get the customer’s table number paired with the order This involves looking through the stack of online orders to find the matching name How can the customer arrival to table number process be made less error-prone? In event of a mishap, how do they go back and find the customer to verify their order? Kitchen Staff Is there a way to make it more clear to the customer on what to do when arriving? Dining Room Staff There is no interaction with the POS or ordering systems There is no interaction with the POS or ordering systems Is there any way to remove the need to wait in line to check in? Orders can be placed hours in advance If the order system errors or there is a connection problem, order is not placed If an order was not started, kitchen will prioritize the online order that was missed Customer’s co-workers Example Digital Blueprint Example Physical Blueprint Example physical blueprint Example digital blueprint Source: Erik Flowers & Megan Erin Miller,
 www.practicalservicedesign.com Everyone’s a user @littlehelli
  98. Step Definition: A plain-words descriptor of what happens in the

    step. Touchpoint: The what/where of the step’s interaction, including an image if appropriate/possible. Actor: The customer and/or support actors of the step. (Note: customer present indicates step visibility) System: What makes this step “go”. Technology, hardware, processes. Policy/Rule: Rules or policies that dictate why something is a certain way. Observation / Fact: Statements that are important to note and add detail to the overall step. Metric / Data: Data that helps illuminate the step’s context or importance. Follow Up Question: Our questions about a step that need to be noted and followed up on. Blueprint Layers Each step in the blueprint is a column, with the step definition at the top of the column that tells the story, and all of its supporting layers beneath. You can add your own kind of layers to your blueprint if you need a specific type of information to capture! 13 design.com Policy/Rule: Rules or policies that dictate why something is a certain way. note and add detail to the overall step. Metric / Data: Data that helps illuminate the step’s context or importance. Follow Up Question: Our questions about a step that need to be noted and followed up on. Critical Moment: Critical moments that are the sources of pain and experience breakdown. Idea: Ah-ha realizations on things to improve or fix for broader impact. icture f the top set of layers is to get an accurate, detailed, rstanding of the step. These layers paint the picture of the lace in the step, and provide important context for the team sights. sights t of layers—questions, critical moments, and ideas—are of the blueprint. These are the insights generated from the ssion that will lead to actionable service improvements. Paint the picture Capture insights “I don’t think that management had realised how complex the process is…” Everyone’s a user @littlehelli
  99. User-annotated sitemap Everyone’s a user @littlehelli

  100. 0.0 Home (T1) Project Engineer Pete Procurement Paula Technical R&D

    Gary MD Matt Main user type 3.0 Case studies index (T5) 4.0 Blog (T5) 7.0 QHSSE (T11) 5.0 News (T8) 6.0 About (T8) 5.x News posts (T7) 1.3 Manufacture Assembly (T3) 2.2 Procurement (T3) 1.2 Refurb and upgrades (T3) 2.1 Design (T3) 2.3.1 Products (T4) 2.0 Capabilities (T2) 1.0 Services (T2) 1.1 Manufacture IP (T3) 4.x Blog posts (T7) 2.3 Manufacture (T3) 2.4 QA (T3) 3.x Individual case studies (T6) 6.1 Team (T9) 8.0 Contact (T12) 8.1 Technical help and advice (T13) 6.2 History (T10) 9.0 Disclaimer 10.0 Terms & privacy 6.3 Licenses & Resources (T2) (Tx) = template type
  101. Results per page Everyone’s a user @littlehelli

  102. What is the user trying to do? What does the

    business want the user to do? How might the user be feeling? Everyone’s a user @littlehelli
  103. What is the user trying to do? What does the

    business want the user to do? How might the user be feeling? Find out if the product is suitable for them. Impress the user, differentiate from the competition and get the user to sign up for a demo. Rushed for time. This is one of many products they’re researching. Everyone’s a user @littlehelli
  104. 3. Share early
 and often Everyone’s a user @littlehelli

  105. None
  106. None
  107. “I can see how much thought has gone into this.”

    Everyone’s a user @littlehelli
  108. 1. Start with ‘why’? 2. Help clients and stakeholders focus

    on their users 3. Share early and often 3 ways to focus stakeholders on outcomes, not outputs Everyone’s a user @littlehelli
  109. “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 Everyone’s a user @littlehelli
  110. Thank you! Everyone’s a user @littlehelli

  111. You’re my favorite client, Mike Monterio Practical Design Discovery, Dan

    Brown Just enough research, Erika Hall Lean UX, Jeff Gothelf and Josh Seiden A web for everyone , Sarah Horton & Whitney Quesenbery
 Everyone’s a user @littlehelli Reading recommendations