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

An Introduction to 
UX Research and Design

An Introduction to 
UX Research and Design

What do UX Designers and Researchers do, what's the value of such profile on a project and how to they work within a team?

UX stands for “User Experience”. But what is it that UX designer, UX Researchers do? How is it different from UI or visual design? What is the added value of such a profile on a project? How do they help build better products? What is their place in a team and how will they collaborate with the other members? And how do I convince my client and colleagues that we need UX Design and Research on our project?

If you have asked yourself one, or all of these questions above, this webinar is for you!

F383c6a4dc55e331bbe2987b622cee6b?s=128

Stéphanie Walter

March 22, 2022
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

  1. Stephanie Walter - 2022 An Introduction to UX Research &

    Design
  2. stephaniewalter.design @WalterStephanie 🦊 User Researcher & UX Designer 
 Mobile

    expert. Pixel & CSS Lover
  3. If I ask you to think about design…?

  4. Visual and Graphic Design Logo and Brand design Illustrations and

    Icons
  5. For websites and apps, you might think about the user

    interface, aka UI design
  6. The User Interface: all the pages and elements a user

    can interact with on different devices
  7. None
  8. UX, for User Experience, is literally the experience someone has

    while using an interface.
  9. UI and UX are connected: the interface reflects user expectations:

    Good Deals
  10. use During Before After use use The Experience of a

    User goes beyond what is happening inside your “digital product”
  11. UX Design is not limited to digital interfaces and products

  12. It doesn’t always have to be a pleasant delightful experience

    youtu.be/olzAKkQMMNc
  13. Let’s focus on the specific role of UX Research and

    UX Design
  14. User Centered
 Design Analyse & Understand Design, Explore, Prototype Test,

    Evaluate, 
 Measure Learn, Update, Implement
  15. User Research: It’s all about understanding users. Who are my

    users? What do they need? What are their painpoints?
  16. Quantitative: what are they doing, how much/ often, when?

  17. Webanalytics (GA, Matomo, etc.)

  18. Sever logs analysis

  19. Online surveys for quantitative data

  20. Qualitative: why, how, what are the painpoints?

  21. Interviews: remote or face to face

  22. Interviewing without influencing or bringing biases in the conversation is

    hard!
  23. Observational / Field studies / Contextual Inquiry Observational study of

    a car rental storage and delivery process to build a mobile app
  24. If you had a magic wand, what would you change

    to make this activity/task easier for you? Can you remember you biggest pain or issue when trying to perform this activity? How do you overcome this today? Interactions Dependencia Pain points What actions or decisions do you take in order to accomplish this? Describe an activity or task that requires you to use Scrap« in your dailywork. Are they other actions/ people you need in order to perform this activity? Activity How? changes Rythm & duration Hew long does it take? Objects Are they other tools you need irt order to perform your activity? ^ Priority If you had a magic wand, what would you change to make this activity/task Can you remember you biggest pain Interactions V- Dependencies Describe an activity or task that requires you to use Scrap« in your dailywork. What actions or decisions do you take in order to accomplish this? Magic Are they other actions/ people you need in order to perform this activity? Activity How? How do you overcome this today? A'rfw-J- dL User task analysis workshop
  25. Diary studies - understand long term usage and habits

  26. Indirect Secondary Research Methods

  27. Literature review

  28. Session Replay

  29. Benchmarks and heuristic evaluations

  30. Ask the support

  31. Online user feedback

  32. Examples of UX deliverables for UX research

  33. User Centered
 Design Analyse & Understand Design, Explore, Prototype Test,

    Evaluate, 
 Measure Learn, Update, Implement
  34. UX Research / Design How might we solve this problem

    for our users?
  35. UX Research/ Design Information Architecture & User Flows

  36. Information architecture: content analysis, model and hierarchy

  37. Photo credit Université de Luxembourg Card sorting to help build

    architecture
  38. User Flow to help represent different paths

  39. UX Design / UI Design Ideate, iterate, design, prototype

  40. Usually you start by a “low” fidelity version of your

    design ideas and get feedback from to the team
  41. You can also build wireframes

  42. Paper prototype Wireframe prototype Mockup Prototype UI Designer UX Designer

    UX Designer
  43. User Centered
 Design Analyse & Understand Design, Explore, Prototype Test,

    Evaluate, 
 Measure Learn, Update, Implement
  44. UX Research Usability testing: test soon, test often :)

  45. Mobile facebook messenger chatbot flow paper testing - quick but

    limited
  46. Testing more interactive prototypes with Axure (or Figma)

  47. User Testing 101s ๏ Prepare a test protocol with tasks

    and scenarios + observation grid ๏ Pilote your test with colleagues to avoid typos, issues with the prototype
  48. User Testing 101s ๏ Usually 2 people are needed: one

    facilitates the test, the other takes note ๏ Be careful about biases ๏ Don’t help the users, let them finish and then you can answer all their questions (yes it’s HARD)
  49. Learn, measure, evaluate, update the design!

  50. ๏ Problem Space: who are the users, what do they

    do, what do they need? ๏ Planning and conducting Quantitative and Qualitative User Research ๏ Information Architecture & User Flows ๏ Usability testing ๏ Measuring the experience ๏ Reporting back to the stakeholders/teams ๏ Background in psychology, sociology but also usability, HCI, sometimes marketing UX Research UX Design ๏ Solution Space: how could we solve our user problem(s)? ๏ Information Architecture & User Flows ๏ Wireframing and Prototyping (Interaction design sometimes) ๏ Sometimes design systems ๏ Background in design, product design, usability, sometimes HCI and psychology
  51. When there is not dedicated UX Researcher, the UX Designer

    sometimes does the research and testing as well
  52. None
  53. What are the benefits of a design and user centered

    process?
  54. Research and Design driven products make development & changes cheaper

    1.
  55. Tables Table headings Table rows Collapsing table rows Table filters

    / search Table pagination Edit 540€ 3 planned works found in 1 intervention Christophe Grosjean 15/10/2018 To Send Edit 540€ 3 planned works found in 1 intervention Christophe Grosjean 10/11/2018 To Send We contacted him by mail COMMENTS 300€ Other reparation lo… - Recommended 40€ Tyre FR - Recommended 200€ Broken disc - Urgent WORKS DETAILS INT3RVENTION-N33MB3R Linked intervention: +352 00 000 000 christophe.grosjean@arhs-spikeseed.com CUSTOMER DETAILS BMW 320d - PA9976 First Name Last Name Email Adresss Phone Number Last Update Table headings have a font size of 16 px. User can sort the column by using the double arrows next to the table heading title Table rows have an odd/even background. They can have action buttons on the right side of the table. The action button is always an outline button style Table rows can have collapsing elements. When they do, we use - the down arrow for collapsed rows - the up arrow for expanded rows Some tables might have filters / search functionnalities to help users navigate inside the data. Those fonctionalities are displayed on top of the table headings Tables display 10 items by default. At the bottom or the table, the pagination lets user navigate towards other items Grosjean Christophe +352 909 8990 10/04/2018 08:14:41 Grosjean Christophe +352 909 8990 10/04/2018 08:14:41 Filtres Filter Interventions 12/11/2018 A partir de: Cette semaine Aujourd’hui Tous First Name Last Name Email Adresss Phone Number Last Update 12/11/2018 As of: This Week Today All Filters First Name Last Name Email Adresss Phone Number Last Update 13 14 12 10 … 2 3 4 1 Buttons and links Primary buttons Primary buttons are used for the MAIN action on the page / view Default Desactivated Hover and active Button Button Button fill: #FFFFFF 100% border: 1px center * #0072CE 100% fill: #E3F0FF 100% border: 1px center * #8BB8E8 100% fill: #0072CE 100% border: 1px center * #0072CE 100% color: #0072CE 100% font-face: Roboto-Medium font-size: 14px color: #0072CE 100% font-face: Roboto-Medium font-size: 14px color: #FFFFFF 100% font-face: Roboto-Medium font-size: 14px Default Desactivated Hover and active Button Button Button Button Default Desactivated Hover and active fill: #0072CE 100% border: 1px center * #0072CE 100% fill: #8BB8E8 100% border: 1px center * #8BB8E8 100% fill: #005090 100% border: 1px center * #005090 100% color: #FFFFFF 100% font-face: Roboto-Medium font-size: 14px color: #FFFFFF 100% font-face: Roboto-Medium font-size: 14px color: #FFFFFF 100% font-face: Roboto-Medium font-size: 14px Button Button fill: #FFFFFF 100% border: 1px center * #A1A3A6 100% fill: #EDEDED 100% border: 1px center * #BABCBF 100% fill: #FFFFFF 100% border: 1px center * #0072CE 100% color: #5B6770 100% font-face: Roboto-Medium font-size: 14px color: #A1A3A6 100% font-face: Roboto-Medium font-size: 14px color: #0072CE 100% font-face: Roboto-Medium font-size: 14px Outline secondary buttons Outline secondary buttons are used for the secondary actions on the page / view, actions that are performed the less often. They are also used for filters, tabs and interface controls All dealers Filter Interventions All Filters Outline primary buttons Outline primary buttons are used for the secondary actions on the page / view, actions that are performed less often than the first one. They are also used for repeated actions like in table rows Examples Examples Examples Interventions New Intervention Create Latest customers Import Preview More Save Send Import Preview More Save Send Primary buttons like send and save are in blue Outline secondary buttons preview and import Colors - main palette Colors - secondary palette Text colors and background Background colors Accessibility rgba(0,114,206,1); #0072CE blue-50 rgba(0,80,144,1); #005090 blue-70 rgba(0,55,99,1); #003763 blue-80 rgba(139,184,232,1); #8BB8E8 blue-20 rgba(195,215,238,1); #C3D7EE blue-10 rgba(227,240,255,1); #E3F0FF blue-05 rgba(197,41,155,1); #C5299B fushia-50 Design specifications & mockups help gain development time
  56. UX and Design deliverables help dev team & QA do

    their job Task flow Screen flow Content Model
  57. It’s much harder and more expensive to fix issues after

    development
  58. None
  59. Well-designed & usable products cost less support and help gain

    time. 2.
  60. VS How much money is this intranet costing in “time

    wasted”?
  61. Users today expect 
 well-designed & usable products 2.

  62. Why am I punished using this for work?

  63. While I’m used to have this at home…

  64. Great experience drives user satisfaction & trust 3.

  65. Would you trust that app after seeing the reviews and

    comments from other users?
  66. User research drives quality and innovation 4.

  67. use During Before After use use Taking pictures is easy

    It takes forever to send when wifi is slow Opportunities 1 1 We have to wait until front-desk tells us the client answered 2 2 Asynchronous Loading in the background Push notifications and navigation rework Fleetback now Additional work accepted Open The client Serges Heinrich accepted 2/3 additional work. Project Fi 59% 5:07 5:07 Sun Jul. 29 Sun Jul. 29
  68. User Data helps take decisions (business, organisation, etc.) 5.

  69. 😱 Avoid feature creep and endless scope changes

  70. Prioritize development and backlog based on user research data

  71. It’s never too late to ask for UX Researchers and

    Designer’s help on a project!