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?".

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