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

Investing in User Centric Design is a Good Business Decision

Stéphanie Walter
October 16, 2019
1.1k

Investing in User Centric Design is a Good Business Decision

The slides of my keynote in front of the LOIC event on UX/UI design in Luxembourg.

I start the talk by explaining what user interface (UI) design and user experience (UX) designer are. I give advice on how companies start getting to know their users: conducting face to face and remote guerilla user research, online surveys, gathering data from supports, online communities, etc. I then present a few different levels of design maturities within the organisations, what happens at each of those levels and the problems that might arise. I end the talk with advice on "How to sell the benefits of a design and user driven process?".

Stéphanie Walter

October 16, 2019
Tweet

More Decks by Stéphanie Walter

Transcript

  1. Investing in User Centric Design
    is a Good Business Decision

    View Slide

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

    View Slide

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

    View Slide

  4. User Interface (UI)

    View Slide

  5. UI components 

    from the Foyer 

    Design System

    View Slide

  6. The interface
    reflects user
    expectations:
    Good Deals

    View Slide

  7. A pretty but not
    really usable object

    View Slide

  8. User Experience (UX)

    View Slide

  9. “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

  10. use
    During
    Before After
    use
    use

    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
    experience

    View Slide

  13. How do you get to know 

    your users?

    View Slide

  14. Ask the
    support

    View Slide

  15. Online user
    feedback

    View Slide

  16. Analytics &
    backend data

    View Slide

  17. Online
    surveys for
    quantitative
    data

    View Slide

  18. Guerilla
    interviews

    View Slide

  19. Remote
    interviews

    View Slide

  20. What’s your company 

    design maturity?

    View Slide

  21. Hostility
    “It’s not worth it”

    View Slide

  22. Self-Referential
    People rely on their own intuition

    View Slide

  23. UX-UI-Unicorn team of one
    Because you need to start somewhere

    View Slide

  24. Scattered
    “I too want my own designer!!”

    View Slide

  25. Centralised
    Design as a service

    View Slide

  26. User Driven Company
    User Experience is part of the culture

    View Slide

  27. How to sell the benefits of a
    design and user driven process?

    View Slide

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

    View Slide

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

    View Slide

  30. Users today expect 

    well-designed & usable
    products
    2.

    View Slide

  31. Would you
    trust this site
    with your
    credentials?

    View Slide

  32. Why am I punished
    using this for work?

    View Slide

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

    View Slide

  34. Great experience drives
    user satisfaction
    3.

    View Slide

  35. Would you use
    that app?

    View Slide

  36. User research drives
    quality and innovation
    4.

    View Slide

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

  38. User Data helps take
    business decisions
    5.

    View Slide

  39. Avoid feature
    creep and endless
    scope changes

    View Slide

  40. Is there a
    market for this
    TV app?

    View Slide

  41. Design driven products
    make development
    cheaper
    6.

    View Slide

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

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

    View Slide

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

    View Slide

  45. inpx.it/LOIC
    stephaniewalter.design @WalterStephanie

    View Slide