An Introduction to 
UX Research and 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