$30 off During Our Annual Pro Sale. View Details »

UX Starter Crash Course

Stéphanie Walter
November 29, 2019

UX Starter Crash Course

A few days ago I facilitated a series of two evenings of workshop on for WIDE, Women in Digital Empowerment in Luxembourg. The audience was a nice mix between students and entrepreneurs with a project/ website. The goal was to help them discover how to build a product with user centric approach and why companies should focus on users needs and talk to their potential users as soon as possible.
More details here:

Stéphanie Walter

November 29, 2019
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

  1. UX Starter Crash Course
    Stéphanie Walter - @walterstephanie

    View Slide

  2. UX & Product Designer
    Mobile expert. Pixel & CSS Lover
    stephaniewalter.design @WalterStephanie

    View Slide

  3. 29/11
    ๏ Paper prototyping the pages
    ๏ Testing the prototype
    ๏ Conclusion - Why should I
    invest in a user centred
    design process?
    ๏ Introduction and definition
    ๏ Defining a product concept
    ๏ Getting to know the users
    ๏ Building a user flow
    22/11

    View Slide

  4. Graphic, UI, UX, design: 

    some definitions

    View Slide

  5. Visual design, logo design,
    illustrations, etc.

    View Slide

  6. Visual design

    View Slide

  7. Logo design

    View Slide

  8. Illustrations

    View Slide

  9. View Slide

  10. A pretty object meant
    as a “conversation
    starter”

    View Slide

  11. User Interface (UI)

    View Slide

  12. UI components 

    from the Foyer 

    Design System

    View Slide

  13. A mobile User
    Interface

    View Slide

  14. Same product,
    desktop User
    Interface

    View Slide

  15. The interface
    reflects user
    expectations:
    Good Deals

    View Slide

  16. A pretty but not
    really usable object

    View Slide

  17. User Experience (UX)

    View Slide

  18. “I wanted to cover all aspects
    of the person’s experience
    with the system including
    industrial design graphics, the
    interface, the physical
    interaction and the manual.”
    1993, Don Norman as Apple’s first User Experience Architect

    View Slide

  19. use
    During
    Before After
    use
    use

    View Slide

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

    View Slide

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

    View Slide

  22. Okay, how do I get started?

    View Slide

  23. Define a clear concept for
    your product/service
    01

    View Slide

  24. A well-defined
    project should
    answer the
    following questions:
    ๏ WHAT: what type of project is it? (e-commerce,
    shop window, blog, application, service, shop,
    etc.)
    ๏ WHO: for whom is this product made (aka what is
    the main target audience, who are you users?)
    ๏ WHY: What user problem are you trying to solve?
    Why is it useful for them? Why will they want to us
    it?
    ๏ WHERE: where are your users, what is there
    location, are they in a specific area, all around the
    world, where will be your market?
    ๏ WHEN: when will your product be used? A specific
    time of the day? The year? All the time?

    View Slide

  25. MY PROJECT IS
    What? Type?
    MY USERS ARE
    Who? Target audience?
    THEY ARE LOCATED
    Where?
    THEY NEED // MY PROJECT ALLOWS THEM TO Why, what problem do I solve?
    IT WILL BE USED
    When?

    View Slide

  26. And yes this is marketing 101…

    View Slide

  27. Your turn :)

    View Slide

  28. Get to know your users
    02

    View Slide

  29. But… but we don’t have “UX people”
    But… we don’t have the time
    But… we don’t have budget
    But…

    View Slide

  30. But… but we don’t have “UX people”
    But… we don’t have the time
    But… we don’t have budget
    But… Everyone in your team
    is responsible for the
    user experience of your
    products.

    View Slide

  31. But…
    Here are some guerrilla 

    user research techniques

    View Slide

  32. On a new product/project

    View Slide

  33. Online
    surveys for
    quantitative
    data

    View Slide

  34. Guerilla
    interviews

    View Slide

  35. Remote
    interviews

    View Slide

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

    View Slide

  37. View Slide

  38. On an existing project

    View Slide

  39. Ask the
    support

    View Slide

  40. Online user
    feedback

    View Slide

  41. Analytics &
    backend data

    View Slide

  42. User Experience / Customer Journey Map
    With all this, you can start building a “map” of the experience of a user before, while they are using your service and after
    Source NNgroup

    View Slide

  43. User Journey
    map of going
    to a UX in Lux
    Workshop

    View Slide

  44. Your turn :)

    View Slide

  45. Build a user flow
    03

    View Slide

  46. It shows of all the different steps user will need to
    take to complete their task or goal.

    View Slide

  47. The “nice
    version”

    View Slide

  48. The “guerilla
    paper version”

    View Slide

  49. User flows
    ๏ What are the most likely scenarios and
    sequences users will go through on your
    site?
    ๏ Are there potentiel dead-ends?
    ๏ Are there different “paths” to accomplish
    the same goal?

    View Slide

  50. 1. Find a starting point
    ๏ Identify major “parts” (pages) users will
    need to accomplish the task to find your
    starting point.
    ๏ What are the “key destinations”? 

    (example: the product page and the
    purchase page in ecommerce)

    View Slide

  51. 2. What comes before/next
    ๏ How does user arrive to this particular
    point?
    ๏ What comes before?
    ๏ What are the next steps?

    View Slide

  52. 3. Alternative routes
    ๏ For each steps:
    ๏ is there another way to arrive here?
    ๏ is there another place they can go from
    this step?

    View Slide

  53. Your turn :)

    View Slide

  54. Prototype page content
    04

    View Slide

  55. ๏ Based on your user flow you now
    have a “list” of pages and views to
    help your user accomplish the goal
    of “finding a cooking recipe”.
    ๏ You might also have subpages,
    modals and other small
    “interactions”
    List your main pages

    View Slide

  56. What do I need
    on each page?

    View Slide

  57. Content inventory
    A way to identify and list the different
    types of content and features necessary
    on each page to help users accomplish
    their goal.

    View Slide

  58. Navigation
    You know the navigation path in your user
    flow.
    Now you need to ask: what does the user
    need on the screen to go from one page to
    the other? Don’t forget about secondary
    navigations (internal links)

    View Slide

  59. Paper prototype to explore more options
    A quick tool to let you explore and throw away if needed different options without too much cost risks

    View Slide

  60. Resources
    http://inspirationhut.net/printable-paper/

    View Slide

  61. Your turn :)

    View Slide

  62. Let’s test this prototype!
    05

    View Slide

  63. Guérilla Prototyping: 10 minutes
    to create the "functional" paper
    prototype and test the hypothesis
    "how users will place media on a
    timeline".
    Guerilla usability
    testing

    View Slide

  64. ๏ Testing a paper prototype is
    cheaper than testing a final product
    ๏ It’s better to test x 5 people than
    with none
    ๏ It’s better to test with people in your
    target audience
    Guerilla usability
    testing

    View Slide

  65. ๏ Prepare a test protocol and
    follow it
    ๏ Pre-test your test.
    Usability testing!

    View Slide

  66. ๏ Explain to the person what’s
    going to happen (see
    cheatsheet)
    ๏ Have the person sign an
    authorisation if you record
    them
    Usability testing!

    View Slide

  67. ๏ Be careful about biases
    ๏ Don’t help the users, let them
    finish and then you can answer
    all their questions
    ๏ Take notes (or have a note
    taker)
    Usability testing!

    View Slide

  68. Your turn :)

    View Slide

  69. Okay, then what?

    View Slide

  70. This is just
    the beginning
    UX Design
    UI Design
    Developpement

    View Slide

  71. Why should I invest in a user
    centred design process?

    View Slide

  72. Well-designed & usable
    products cost less support
    and help gain time.
    1.

    View Slide

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

    View Slide

  74. Users today expect 

    well-designed & usable
    products
    2.

    View Slide

  75. Would you
    trust this site
    with your
    credentials?

    View Slide

  76. Why am I punished
    using this for work?

    View Slide

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

    View Slide

  78. Great experience drives
    user satisfaction
    3.

    View Slide

  79. Would you use
    that app?

    View Slide

  80. User research drives
    quality and innovation
    4.

    View Slide

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

  82. User Data helps take
    business decisions
    5.

    View Slide

  83. Avoid feature
    creep and endless
    scope changes

    View Slide

  84. Is there a
    market for this
    TV app?

    View Slide

  85. Design driven products
    make development
    cheaper
    6.

    View Slide

  86. 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
    bring consistency

    View Slide

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

    View Slide

  88. It’s never too late to ask for
    designer’s help on a project!

    View Slide