Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Daniel Fosco

July 05, 2018
Tweet

More Decks by Daniel Fosco

Other Decks in Design

Transcript

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

    the company, its services, and its products. Don Norman
  2. There is no consensus It depends on the company (but

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

    make sure you read the job description and research the company’s design process!
  4. 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
  5. 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
  6. Surveys + Big volume of information + Allows qualitative and

    quantitative feedback + Complements other methods
  7. 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
  8. 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
  9. 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
  10. 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
  11. Participatory Design Extends research by involving users and stakeholders in

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

    categories • Relate themes to icons • Test copywriting options
  13. Maps the paths users take in the product User Flow

    - Understand the “happy path” - Map error states - Discuss specific scenarios
  14. 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
  15. • Segue unicamente o comportamento do usuário • Mapeia estado

    emocional ao longo da jornada • Não precisa estar limitado ao produto Customer Journey
  16. 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/
  17. Abby Covert How to Make a Sense of Any Mess

    https://vimeo.com/139025676
  18. 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
  19. 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
  20. 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
  21. 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
  22. Refining the vision Mockups - Very clear vision of the

    product (high fidelity) - Ideal for detailed visual experimentation - May take a long time to prepare
  23. 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
  24. 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
  25. Tools Prototypes - Pen and Paper - InVision - MarvelApp

    - Keynote - Flinto - Framer - HTML/CSS
  26. Feedback can hurt. You will be wrong. Yes you will

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

    1-to-5 users - Buddy Watch User Research, Quick 'n' Dirty
  28. 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
  29. 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
  30. 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
  31. 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
  32. 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
  33. A/B Testing + Can give you a clear signal of

    success + Can have a direct impact on revenue + Helps keeping HiPPOS in check
  34. 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
  35. 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
  36. 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
  37. 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
  38. Every system can have it’s usability evaluated in five qualities:

    - Learnability - Efficiency - Memorability - Memorability - Satisfaction Usability Heuristics
  39. •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
  40. •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
  41. •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