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

Pretty, but not Usable

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.

Stéphanie Walter

June 13, 2019
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size slide

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

    users’ problems

    View full-size slide

  4. A library of
    generic UI
    components

    View full-size slide

  5. It’s the story of a project…

    View full-size slide

  6. Mr. Client had a nice idea

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    nice and pretty”
    #makeitpretty
    #makeitshiny

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Why did this happen?

    View full-size slide

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

    View full-size slide

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

    in the center of the process?

    View full-size slide

  19. Don’t Skip User Research
    01

    View full-size 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 full-size 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 full-size slide

  22. But…
    Here are some guerrilla 

    user research techniques

    View full-size slide

  23. Ask the
    support

    View full-size slide

  24. Online user
    feedback

    View full-size slide

  25. Analytics &
    backend data

    View full-size slide

  26. Street
    Guerilla
    Interviews

    View full-size slide

  27. Remote
    interviews

    View full-size 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 full-size slide

  29. Build user
    flows

    View full-size slide

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

    View full-size slide

  31. What do I need
    on each page?

    View full-size slide

  32. Learn about & study
    the framework
    02

    View full-size 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 full-size slide

  34. UI components
    overview

    View full-size slide

  35. Use and challenge
    the components
    03

    View full-size slide

  36. Component documentation
    Paper wireframe

    View full-size slide

  37. If you can’t find a component,

    ask your developer if it exists.
    #Quicktip

    View full-size slide

  38. Source: Shan Shen

    View full-size slide

  39. Turn this into a
    collaborative
    exercice

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. From paper
    wireframes…

    View full-size slide

  45. … to prototype
    usability testing

    View full-size slide

  46. Prototype and
    test early!

    View full-size slide

  47. UI component
    based
    wireframes

    View full-size slide

  48. Listing
    where they
    will be used

    View full-size slide

  49. Style the components
    04

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. Be careful with
    accessibility

    View full-size slide

  53. One family,
    different weight

    View full-size slide

  54. Explicit labels
    are better than
    clumsy icons!

    View full-size slide

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

    more complex

    View full-size slide

  56. Framework Prototype

    View full-size slide

  57. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  60. Document and share
    05

    View full-size slide

  61. Why document?

    View full-size slide

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

    View full-size slide

  63. How do they
    work?

    View full-size slide

  64. 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 full-size slide

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

    View full-size slide

  66. Design
    specifications:
    Invision, Zeplin,
    Figma…

    View full-size slide

  67. Sketch
    Measure

    View full-size slide

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

    View full-size slide

  69. What can be
    overridden ?
    baseweb.design

    View full-size slide

  70. Some governance 

    is required

    View full-size slide

  71. Check the quality of
    the product
    06

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  74. 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 full-size slide

  75. Designers, in quality reviews, 

    explain the design decisions behind
    the feedback.
    #Quicktip

    View full-size slide

  76. User testing on
    before we launch

    View full-size slide

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

    View full-size slide

  78. It all comes down to
    communication & collaboration

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  81. 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 full-size slide

  82. Thank you :)
    stephaniewalter.design @WalterStephanie

    View full-size slide