Pretty, but not Usable

“Don't worry about the UI, we have a framework for that” they say. Then the designer's job is merely to paint over whatever product comes out of it. Does that sound frustratingly familiar?

How can we change this situation to bring user needs back in the process, while still working with an imposed framework? Let me share with you some stories from my projects, what worked but also failed. I want to help and inspire you find a collaboration process that will also work for your own teams.

Transcript

1. Pretty but Not Usable
   Stéphanie Walter - @walterstephanie
   

   View Slide

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

   View Slide

3. My job is to find the best
   solution to solve 

   users’ problems
   

   View Slide

4. A library of
   generic UI
   components
   

   View Slide

5. It’s the story of a project…
   

   View Slide

6. Mr. Client had a nice idea
   

   View Slide

7. The dream team
   Stéphanie Walter - 2019
   A team of
   developers
   A design team A team of iOS
   developers
   

   View Slide

8. “By the waaaaay,
   who will take care of the
   design of the iPad app?”
   The
   $1,000,000
   question
   

   View Slide

9. “We take care of the
   whole design process”
   “Their designers will
   put some paint 

   on top of our UI
   framework
   components”
   VS
   Us Them
   

   View Slide

10. More than 15 actions, going back and forth
    in the tabs to complete the task
    1 2 3
    1 2 3 1 2 3
    

    View Slide

11. “Suggestions to make it more
    usable? Sure, but we can’t build
    custom components so stick to the
    framework”
    #deadlines
    #budget
    

    View Slide

12. “Just put some paint on the
    components and make it look 

    nice and pretty”
    #makeitpretty
    #makeitshiny
    

    View Slide

13. We made it nice, we
    made it shiny. 

    Sadly, shiny wasn't
    enough.
    #makeitpretty
    #makeitshiny
    

    View Slide

14. 1 morning,
    2 designers,
    1 new user flow
    

    View Slide

15. “The pretty (but not usable app)
    should do the job, we will implement
    your design in the next version”
    #deadline
    #budget
    

    View Slide

16. Why did this happen?
    

    View Slide

17. Don’t blame the tool,
    blame the process!
    

    View Slide

18. How might we work with those UI
    frameworks and still put the users 

    in the center of the process?
    

    View Slide

19. Don’t Skip User Research
    01
    

    View Slide

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

    View Slide

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

22. But…
    Here are some guerrilla 

    user research techniques
    

    View Slide

23. Ask the
    support
    

    View Slide

24. Online user
    feedback
    

    View Slide

25. Analytics &
    backend data
    

    View Slide

26. Street
    Guerilla
    Interviews
    

    View Slide

27. Remote
    interviews
    

    View Slide

28. 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
    Identify and
    analyse users’
    goals and
    tasks
    

    View Slide

29. Build user
    flows
    

    View Slide

30. Try to involve the development teams
    when building user flows.
    #Quicktip
    

    View Slide

31. What do I need
    on each page?
    

    View Slide

32. Learn about & study
    the framework
    02
    

    View Slide

33. Try to know early if there’s going to be a
    UI framework involved. 

    Then take a look at the documentation.
    #Quicktip
    

    View Slide

34. UI components
    overview
    

    View Slide

35. View Slide

36. View Slide

37. Use and challenge
    the components
    03
    

    View Slide

38. Component documentation
    Paper wireframe
    

    View Slide

39. If you can’t find a component,

    ask your developer if it exists.
    #Quicktip
    

    View Slide

40. Source: Shan Shen
    

    View Slide

41. Turn this into a
    collaborative
    exercice
    

    View Slide

42. Don’t distort your
    users problems to
    make them fit into
    the framework UI
    solutions
    Crédit photo Jérémie Cohen
    NOPE!
    

    View Slide

43. Challenge the components when necessary
    What they wanted to use
    

    View Slide

44. Challenge the components when necessary
    What they wanted to use What suits the user needs
    

    View Slide

45. We need the knowledge
    and collaboration of
    both designs and
    developers to chose the
    right component
    Crédit photo Julie Muller
    

    View Slide

46. From paper
    wireframes…
    

    View Slide

47. … to prototype
    usability testing
    

    View Slide

48. Prototype and
    test early!
    

    View Slide

49. UI component
    based
    wireframes
    

    View Slide

50. Listing
    where they
    will be used
    

    View Slide

51. Style the components
    04
    

    View Slide

52. As a designer,
    it’s tempting to change it all…
    

    View Slide

53. Anything that you can put in
    variables should be easy to
    customise
    

    View Slide

54. Be careful with
    accessibility
    

    View Slide

55. One family,
    different weight
    

    View Slide

56. Explicit labels
    are better than
    clumsy icons!
    

    View Slide

57. Built in specific behaviours and
    structure change of a
    component might be

    more complex
    

    View Slide

58. Framework
    

    View Slide

59. Framework Prototype
    

    View Slide

60. Calendar
    15 April
    2019
    Expected
    Content
    30 March
    2019
    Expected
    Content
    30 April
    2019
    Expected
    Content
    Status
    20100043 PIN
    Reference documents::
    Content
    28 Sept
    2018
    10 Jan
    2018
    Content
    23 July
    2018
    Content
    John Doe
    02 Jan 2019
    Missing document for the moment
    Updated by:
    Updated updated on:
    Reference documents:
    Content Status 2
    28 Sept
    2018
    Framework Prototype UI proposal
    

    View Slide

61. Ask your team about what’s easy to
    customise and what isn’t.
    Communication is key.
    #Quicktip
    

    View Slide

62. This is slowly becoming your
    product’s custom UI library.
    

    View Slide

63. Document and share
    05
    

    View Slide

64. Why document?
    

    View Slide

65. 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
    What and when
    to use them?
    

    View Slide

66. How do they
    work?
    

    View Slide

67. Small Medium Large
    3 Fuites
    0 Température élevée
    1 Saturation
    8 Changes
    Événements cette semaine (évolution par rapport à la semaine dernière)
    Normale
    Protection
    Normale
    Température:
    Sur le corps
    Capteur
    Chambre 01
    M. Rousseau
    3 Fuites
    0 Température élevée
    1 Saturation
    8 Changes
    Événements cette semaine (évolution par rapport à la semaine dernière)
    Normale
    Protection
    Normale
    Température:
    Sur le corps
    Capteur
    Chambre 01
    M. Rousseau
    3 Fuites
    0 Température élevée
    1 Saturation
    8 Changes
    Événements cette semaine
    (évolution par rapport à la semaine dernière)
    Normale
    Protection :
    Sur le corps
    Capteur :
    Normale
    Température :
    Chambre 01
    M. Rousseau
    3 Fuites
    0 Température élevée
    1 Saturation
    8 Changes
    Événements cette semaine
    (évolution par rapport à la semaine dernière)
    Normale
    Protection :
    Sur le corps
    Capteur :
    Normale
    Température :
    Chambre 01
    M. Rousseau
    3 Fuites
    0 Température élevée
    1 Saturation
    8 Changes
    Événements cette semaine
    (évolution par rapport à la semaine dernière)
    Chambre 01
    M. Rousseau
    A changer
    Protection :
    Sur le corps
    Capteur :
    Normale
    Température :
    Chambre 01
    M. Rousseau
    3 Fuites
    0 Température élevée
    1 Saturation
    8 Changes
    Événements cette semaine (évolution par rapport à la semaine dernière)
    Normale
    Protection
    Elevée
    Température :
    Sur le corps
    Capteur
    Chambre 04
    M.Martin
    3 Fuites
    0 Température élevée
    1 Saturation
    8 Changes
    Événements cette semaine (évolution par rapport à la semaine dernière)
    Normale
    Protection
    Normale
    Température:
    Sur le corps
    Capteur
    Chambre 05
    M. Johnes
    3 Fuites
    0 Température élevée
    1 Saturation
    8 Changes
    Événements cette semaine (évolution par rapport à la semaine dernière)
    Normale
    Protection
    Normale
    Température:
    Hors du corps
    Capteur
    Chambre 01
    M. Dupont
    Responsive
    adaptation
    

    View Slide

68. Discuss about what kind of hand-off
    are expected and how to deliver them.
    #Quicktip
    

    View Slide

69. Design
    specifications:
    Invision, Zeplin,
    Figma…
    

    View Slide

70. Sketch
    Measure
    

    View Slide

71. Don’t keep your awesome work a secret!
    The custom UI
    components in code
    A design style guide with
    custom UI components
    +
    

    View Slide

72. Storybook
    

    View Slide

73. What can be
    overridden ?
    baseweb.design
    

    View Slide

74. Some governance 

    is required
    

    View Slide

75. Check the quality of
    the product
    06
    

    View Slide

76. Don’t forget the quality review
    “Raw” dev version
    

    View Slide

77. Don’t forget the quality review
    “Raw” dev version
    Dev version using the
    UI Framework
    

    View Slide

78. Don’t forget the quality review
    “Raw” dev version
    Dev version using the
    UI Framework
    Final version after
    quality review
    100%
    9:41 AM
    BMW
    Louyet Mons
    Rue des Sandrinettes, 48, 7033 Mons
    + 32 (63) 23 05 60
    Dealership Bodyshop
    7AM - 7PM
    Tuesday
    7AM - 7PM
    Monday
    7AM - 12AM 1PM-6PM
    Wednesday
    7AM - 7PM
    Thursday
    7AM - 7PM
    Friday
    7AM - 7PM
    Saturday
    Opening hours
    

    View Slide

79. Designers, in quality reviews, 

    explain the design decisions behind
    the feedback.
    #Quicktip
    

    View Slide

80. User testing on
    before we launch
    

    View Slide

81. 6 months after: is
    this still the right
    component?
    

    View Slide

82. It all comes down to
    communication & collaboration
    

    View Slide

83. Yes, it is possible to work with a UI
    frameworks and have a user
    centric process.
    

    View Slide

84. Building a great
    user experience
    with a UI framework
    is a team effort!
    UX Design
    UI Design
    Developpement
    

    View Slide

85. 1. Don’t Skip User Research
    2. Learn about & Study the framework
    3. Use and challenge the components
    4. Style the components
    5. Document and share
    6. Check the quality of the product
    

    View Slide

86. Thank you :)
    stephaniewalter.design @WalterStephanie
    
    

    View Slide