UX Design – What, Why, How

UX Design – What, Why, How

A broad overview of what is the work and practice of UX Design.

Presentation given internally at Booking.com in partnership with Refugee Talent Hub, for a group of attendees taking their first steps in the tech industry.

5fc5804101f0367b6faeee18a6cebe30?s=128

Daniel Fosco

July 05, 2018
Tweet

Transcript

  1. Daniel Fosco @dfosco UX Design What • Why • How

  2. Daniel Fosco UX designer @ Booking.com

  3. What is UX The role of UX designers Design Methods

    Menu
  4. What is UX The role of UX designers Design Methods

    Workshop ⚡ Menu
  5. http://bit.ly/ux-workshop-fosco

  6. None
  7. What is UX

  8. User Experience Design

  9. Digital Products

  10. None
  11. None
  12. None
  13. Digital services that bring value to their users and to

    the business
  14. Digital services that bring value to their users and to

    the business
  15. Business Goals User Goals UX

  16. "User experience" encompasses all aspects of the end-user's interaction with

    the company, its services, and its products. Don Norman
  17. None
  18. None
  19. Who’s responsible for UX?

  20. UX Designer Designer de Produto UI / UX Designer Interaction

    Designer
  21. UX Designer Product Designer UI / UX Designer Interaction Designer

  22. UX Designer Product Designer UI / UX Designer Interaction Designer

  23. UX Designer Product Designer UI / UX Designer Interaction Designer

  24. UX Designer Product Designer UI / UX Designer Interaction Designer

  25. There is no consensus

  26. There is no consensus It depends on the company

  27. There is no consensus It depends on the company (but

    they’re all pretty much the same)
  28. Product Designer < > UI/UX < > UX Designer Just

    make sure you read the job description and research the company’s design process!
  29. The role of UX designers

  30. Enable business goals through user-centered design practices

  31. Business Goals User Goals UX

  32. None
  33. Classic Mistakes

  34. The excellent landing page that doesn’t speak to the right

    audience
  35. The elegant feature that’s not useful to paying customers

  36. The drifting designer Conducting design processes with no impact in

    the product
  37. Design as a business discipline To identify and execute opportunities

  38. Make sure the team is building the right bridge

  39. Ask the right questions and be accountable for the results

  40. User-Centered Design Methods

  41. Research Mapping reality to define a problem

  42. None
  43. None
  44. None
  45. Why do research?

  46. Why do research? Align the team Save €€€ To do

    proper UX
  47. User Interviews + Detailed Information + Flexible Format + Good

    to explore new areas
  48. User Interviews + Detailed Information + Flexible Format + Good

    to explore new areas - Takes a while to organize and process - May not represent the entire user group
  49. User Interviews + Detailed Information + Flexible Format + Good

    to explore new areas - Takes a while to organize and process - May not represent the entire user group https://trvrs.co/book Free Download
  50. Surveys + Big volume of information + Allows qualitative and

    quantitative feedback + Complements other methods
  51. Surveys + Big volume of information + Allows qualitative and

    quantitative feedback + Complements other methods - Can be hard to get good answers - Your sample might (will) be biased
  52. Surveys + Big volume of information + Allows qualitative and

    quantitative feedback + Complements other methods - Can be hard to get good answers - Your sample might (will) be biased
  53. Contextual Observation (Shadowing) + Surfaces information you wouldn't ask +

    Represents real scenarios (mostly)
  54. Contextual Observation (Shadowing) + Surfaces information you wouldn't ask +

    Represents real scenarios (mostly) - Takes a while to organize and process - Requires visiting users in person
  55. Observação Contextual + Transparece informações que você não perguntaria… +

    Ou que o usuário não falaria + Representa o uso real - Bem cansativo para organizar e analizar - Depende de visitar usuários fisicamente
  56. None
  57. Erika Hall Just Enough Research

  58. Participatory Design Extends research by involving users and stakeholders in

    the design process to visualize problems and sketch solutions
  59. Card Sorting Understand users’ mental model • Order items in

    categories • Relate themes to icons • Test copywriting options
  60. Card Sorting

  61. Concept Mapping

  62. None
  63. Join every individual vision into a shared understanding Sketching

  64. Sketching

  65. Sketching Sketches are communication pieces to allow concepts to be

    visualized
  66. Sketching Unflattening Design https://blog.intercom.com/unflattening-design/

  67. Information Architecture Explore content and visual structures

  68. Map the technical structure Sitemap - Pages - Templates -

    States (logged-in, offline, error)
  69. Mapeia estruturas técnicas Sitemap

  70. Mapeia estruturas técnicas Sitemap

  71. Sitemap

  72. Sitemap

  73. Sitemap JJG Visual Vocabulary http://www.jjg.net/ia/visvocab/

  74. Maps the paths users take in the product User Flow

    - Understand the “happy path” - Map error states - Discuss specific scenarios
  75. User Flow

  76. User Flow

  77. User Flow Tip

  78. User Flow

  79. Maps the individual path of a single user Customer Journey

    - Only follows user behavior - Maps the emotional state across the journey - Don’t have to be limited to the product
  80. Customer Journey

  81. • Segue unicamente o comportamento do usuário • Mapeia estado

    emocional ao longo da jornada • Não precisa estar limitado ao produto Customer Journey
  82. Customer Journey • Segue unicamente o comportamento do usuário •

    Mapeia estado emocional ao longo da jornada • Não precisa estar limitado ao produto How to Create a Customer Journey Map https://uxmastery.com/how-to-create-a-customer-journey-map/
  83. And now, the best book about Information Architecture I have

    ever read
  84. None
  85. Abby Covert How to Make a Sense of Any Mess

    https://vimeo.com/139025676
  86. UI Design Defining the tone of the product

  87. Testing volumes Wireframes - Communicates in a clearer way than

    sketches (medium fidelity) - Experiments with the visual hierarchy of the page - Requires certain abstraction from the viewer
  88. Wireframes

  89. Encontre sua próxima cerveja Contém Cerva é o maior site

    de cervejas artesanais brasileiras Procure cervejas ou cervejarias Cervejas Cervejarias Blog Sobre Entrar Wireframes
  90. Encontre sua próxima cerveja Contém Cerva é o maior site

    de cervejas artesanais brasileiras Procure cervejas ou cervejarias Cervejas Cervejarias Blog Sobre Entrar Wireframes
  91. Destaques Procure cervejas ou cervejarias próxima cerveja Encontre sua próxima

    cerveja Contém Cerva é o maior site de cervejas artesanais brasileiras Cervejas Cervejarias Blog Sobre Entrar 2 Ça Va Saison Saison Barco 4.0 Pilsner 3.8 Jeffrey Red Pilsen 3 Witbier 3.75 Jeffrey Ninã 4 Ça Va Saison Saison Barco 3.7 5 Pilsner 3.7 Jeffrey Red Pilsen 6 Witbier 4.2 Jeffrey Ninã 1 Melhores Avaliações Ver todas Wireframes
  92. Refining the vision Mockups - Very clear vision of the

    product (high fidelity) - Ideal for detailed visual experimentation - May take a long time to prepare
  93. Refining the vision Mockups - Very clear vision of the

    product (high fidelity) - Ideal for detailed visual experimentation - May take a long time to prepare Mockups What not to do - Start digital - Start without knowing the content - Start without knowing the problem
  94. Mockups

  95. Mockups

  96. Refining the vision Mockups - Very clear vision of the

    product (high fidelity) - Ideal for detailed visual experimentation - May take a long time to prepare Web Design in 4 minutes
  97. Prototyping & Usability Testing Show time

  98. Prototypes are tools for validation

  99. They need to have enough fidelity to validate a hypothesis

    or validate a vision
  100. Low fidelity Prototypes

  101. Medium fidelity Prototypes

  102. High fidelity Prototypes

  103. Tools Prototypes - Pen and Paper - InVision - MarvelApp

    - Keynote - Flinto - Framer - HTML/CSS
  104. Testing your prototypes

  105. Feedback can hurt.

  106. Feedback can hurt. You will be wrong.

  107. Feedback can hurt. You will be wrong. Yes, you will

    have to rework your designs.
  108. Feedback can hurt. You will be wrong. Yes you will

    have to rework your designs. Yes, it will be last minute.
  109. DIY Usability Testing - Prototype - Hypothesis - Script -

    1-to-5 users - Buddy
  110. DIY Usability Testing - Prototype - Hypothesis - Script -

    1-to-5 users - Buddy Watch User Research, Quick 'n' Dirty
  111. Usability Testing

  112. Usability Testing

  113. Usability Testing

  114. Other types of validation

  115. Analytics + Real-time information on product usage + Broad image

    of how users are behaving
  116. Analytics + Real-time information on product usage + Broad image

    of how users are behaving - Tells you what happened, not why - Hard to deal with lots of data - Advanced usage requires coding
  117. Analytics + Real-time information on product usage + Broad image

    of how users are behaving - Tells you what happened, not why - Hard to deal with lots of data - Advanced usage requires coding Analytics Services Google Analytics Mixpanel Hotjar Intercom
  118. Analytics + Real-time information on product usage + Broad image

    of how users are behaving - Tells you what happened, not why - Hard to deal with lots of data - Advanced usage requires coding In an ideal world Every UX Designer would learn Google Analytics
  119. Analytics + Informação em tempo real sobre o uso do

    app + Imagem ampla de como usuários estão se comportando - Difícil de manipular grandes quantidades de dados - Uso avançado depende de código
  120. Analytics + Real-time information on product usage + Broad image

    of how users are behaving - Tells you what happened, not why - Hard to deal with lots of data - Advanced usage requires coding https://analytics.google.com/analytics/academy
  121. A/B Testing + Can give you a clear signal of

    success + Can have a direct impact on revenue + Helps keeping HiPPOS in check
  122. A/B Testing + Can give you a clear signal of

    success + Can have a direct impact on revenue + Helps keeping HiPPOS in check Highest Paid Person's Opinion
  123. A/B Testing + Can give you a clear signal of

    success + Can have a direct impact on revenue + Helps keeping HiPPOS in check - Needs a very large user base to be viable - Requires writing a solid hypothesis - Bias towards only what’s measurable
  124. A/B Testing + Can give you a clear signal of

    success + Can have a direct impact on revenue + Helps keeping HiPPOS in check - Needs a very large user base to be viable - Requires writing a solid hypothesis - Bias towards only what’s measurable A/B Testing Tools Google Analytics Optimize Optimizely VWO
  125. A/B Testing + Can give you a clear signal of

    success + Can have a direct impact on revenue + Helps keeping HiPPOS in check - Needs a very large user base to be viable - Requires writing a solid hypothesis - Bias towards only what’s measurable
  126. Usability Heuristics Universal checklists for better designs

  127. Every system can have it’s usability evaluated in five qualities:

    - Learnability - Efficiency - Memorability - Memorability - Satisfaction Usability Heuristics
  128. •Visibility of system status •User control and freedom •Match between

    system and the real world •Consistency and standards •Error prevention •Recognition rather than recall •Aesthetic and minimalist design •Flexibility and efficiency of use •Help and documentation •Help users recognize, diagnose, and recover from errors Nielsen Heuristics
  129. •Visibility of system status •User control and freedom •Match between

    system and the real world •Consistency and standards •Error prevention •Recognition rather than recall •Aesthetic and minimalist design •Flexibility and efficiency of use •Help and documentation •Help users recognize, diagnose, and recover from errors Nielsen Heuristics NN Group Jakob Nielsen & Don Norman
  130. •Visibility of system status •User control and freedom •Match between

    system and the real world •Consistency and standards •Error prevention •Recognition rather than recall •Aesthetic and minimalist design •Flexibility and efficiency of use •Help and documentation •Help users recognize, diagnose, and recover from errors Nielsen Heuristics Don Norman The Design of Everyday Things
  131. To close it off

  132. Creating good design doesn’t require only technical skill or talent

  133. Caring about your users and taking responsibility for the outcome

    of your product
  134. Thank you Daniel Fosco @dfosco

  135. Daniel Fosco @dfosco http://bit.ly/ux-workshop-fosco