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!

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

    View Slide

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


    Mobile expert. Pixel & CSS Lover

    View Slide

  3. If I ask you to think
    about design…?

    View Slide

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

    View Slide

  5. For websites and apps, you
    might think about the user
    interface, aka UI design

    View Slide

  6. The User Interface:
    all the pages and
    elements a user can
    interact with on
    different devices

    View Slide

  7. View Slide

  8. UX, for User Experience, is
    literally the experience
    someone has while using an
    interface.

    View Slide

  9. UI and UX are
    connected: the
    interface reflects
    user expectations:
    Good Deals

    View Slide

  10. use
    During
    Before After
    use
    use
    The Experience of
    a User goes
    beyond what is
    happening inside
    your “digital
    product”

    View Slide

  11. UX Design is
    not limited to
    digital
    interfaces and
    products

    View Slide

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

    View Slide

  13. Let’s focus on the
    specific role of UX
    Research and UX Design

    View Slide

  14. User
    Centered

    Design
    Analyse &
    Understand
    Design,
    Explore,
    Prototype
    Test,
    Evaluate, 

    Measure
    Learn,
    Update,
    Implement

    View Slide

  15. User Research:

    It’s all about understanding users.
    Who are my users? What do they
    need? What are their painpoints?

    View Slide

  16. Quantitative: what are
    they doing, how much/
    often, when?

    View Slide

  17. Webanalytics
    (GA, Matomo,
    etc.), sever
    logs analysis

    View Slide

  18. Online surveys
    for quantitative
    data

    View Slide

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

    View Slide

  20. Interviews:
    remote or
    face to face

    View Slide

  21. Interviewing without
    influencing or bringing biases
    in the conversation is hard!

    View Slide

  22. Observational /
    Field studies /
    Contextual Inquiry
    Observational study of a car rental storage and delivery process to build a mobile app

    View Slide

  23. 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

    View Slide

  24. Diary studies -
    understand
    long term usage
    and habits

    View Slide

  25. Indirect Secondary
    Research Methods

    View Slide

  26. Literature
    review

    View Slide

  27. Session
    Replay

    View Slide

  28. Benchmarks
    and heuristic
    evaluations

    View Slide

  29. Ask the
    support

    View Slide

  30. Online user
    feedback

    View Slide

  31. Examples of UX
    deliverables for
    UX research

    View Slide

  32. User
    Centered

    Design
    Analyse &
    Understand
    Design,
    Explore,
    Prototype
    Test,
    Evaluate, 

    Measure
    Learn,
    Update,
    Implement

    View Slide

  33. UX Research / Design

    How might we solve this
    problem for our users?

    View Slide

  34. UX Research/ Design

    Information Architecture
    & User Flows

    View Slide

  35. Information
    architecture:
    content analysis,
    model and
    hierarchy

    View Slide

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

    View Slide

  37. User Flow to
    help represent
    different
    paths

    View Slide

  38. UX Design / UI Design

    Ideate, iterate, design,
    prototype

    View Slide

  39. Usually you start
    by a “low” fidelity
    version of your
    design ideas and
    get feedback
    from to the team

    View Slide

  40. You can also
    build wireframes

    View Slide

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

    View Slide

  42. User
    Centered

    Design
    Analyse &
    Understand
    Design,
    Explore,
    Prototype
    Test,
    Evaluate, 

    Measure
    Learn,
    Update,
    Implement

    View Slide

  43. UX Research

    Usability testing: test
    soon, test often :)

    View Slide

  44. Mobile facebook
    messenger chatbot
    flow paper testing -
    quick but limited

    View Slide

  45. Testing more
    interactive
    prototypes with
    Axure (or Figma)

    View Slide

  46. 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

    View Slide

  47. 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)

    View Slide

  48. Learn, measure,
    evaluate, update the
    design!

    View Slide

  49. ๏ 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

    View Slide

  50. When there is not dedicated
    UX Researcher, the UX
    Designer sometimes does the
    research and testing as well

    View Slide

  51. View Slide

  52. What are the benefits
    of a design and user
    centered process?

    View Slide

  53. Research and Design driven
    products make development
    & changes cheaper
    1.

    View Slide

  54. 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
    [email protected]
    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

    View Slide

  55. UX and Design
    deliverables
    help dev team &
    QA do their job
    Task flow Screen flow Content Model

    View Slide

  56. It’s much harder
    and more
    expensive to fix
    issues after
    development

    View Slide

  57. View Slide

  58. Well-designed & usable
    products cost less support
    and help gain time.
    2.

    View Slide

  59. VS
    How much money
    is this intranet
    costing in “time
    wasted”?

    View Slide

  60. Users today expect 

    well-designed & usable
    products
    3.

    View Slide

  61. Why am I punished
    using this for work?

    View Slide

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

    View Slide

  63. Great experience drives
    user satisfaction & trust
    4.

    View Slide

  64. Would you trust
    that app after
    seeing the reviews
    and comments
    from other users?

    View Slide

  65. User research drives
    quality and innovation
    5.

    View Slide

  66. 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

    View Slide

  67. User Data helps take
    decisions (business,
    organisation, etc.)
    6.

    View Slide

  68. 😱 Avoid feature
    creep and endless
    scope changes

    View Slide

  69. Prioritize
    development and
    backlog based on
    user research data

    View Slide

  70. It’s never too late to ask for UX Researchers
    and Designer’s help on a project!

    View Slide