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:

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