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

Designing Adaptive Components, beyond responsive breakpoints

Designing Adaptive Components, beyond responsive breakpoints

How can we design components that are re-usable and not only adapt to different viewport size (responsive web design) but also to different context of use in the browser? What about designing for scale, beyond the “default" state & content? About adapting components towards user's context or point in a journey?

Stéphanie Walter

March 25, 2021
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

  1. Stéphanie Walter 2022
    Designing reusable adaptive components
    for design systems


    View full-size slide

  2. stephaniewalter.design @WalterStephanie
    🦊
    User Researcher & Product Designer



    Mobile expert. Pixel & CSS Lover

    View full-size slide

  3. Designing reusable
    components

    View full-size slide

  4. It all starts with a strong
    information architecture

    View full-size slide

  5. Overview
    List of Overviews
    Overview
    Overview
    Overview
    Overview
    Details

    View full-size slide

  6. Example on existing content:


    the “Link Item” component

    View full-size slide

  7. My Bookmarks
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
    12345
    CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX)
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) WITH MORE
    TEXT SO IT NEEDS 2 LINES TO DISPLAY
    12345
    CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX)
    12345-01
    COUNTERPART NAME SOMETHING SA
    12345-01
    Counterpart name Something SA
    DOCUMENT NAME
    List of Overviews
    Overview
    Overview
    Overview
    Overview

    View full-size slide

  8. 1. Start with the
    content model

    View full-size slide

  9. Current content analysis
    Content Audit - Inventory on current
    interface + Database sometimes

    View full-size slide

  10. Content model: what
    will this type of content
    consist of?

    View full-size slide

  11. Revisit the model
    based on research
    ๏ Does it still fit business needs?


    ๏ Does it still fit user needs

    View full-size slide

  12. 2. Rank and
    prioritize elements

    View full-size slide

  13. The whole “detail” model
    Priority for the “Entity List Item”
    Component “Entity List Item”
    1967 - 7024
    OPERATION NAME HERE (AROUND 52 CHAR)

    View full-size slide

  14. How to decide?

    Do your homework:

    User Research!

    View full-size slide

  15. 3. Identify variations
    and similar components

    View full-size slide

  16. 1967 - 7024
    OPERATION NAME HERE (AROUND 52 CHAR)
    12345
    CONTRACT NAME HERE (AROUND 72 CHAR)
    12345-01
    COUNTERPART NAME SOMETHING SA
    24.10.2019
    Date:
    DOCUMENT NAME

    View full-size slide

  17. 4. Identify different
    context where this
    could be re-used

    View full-size slide

  18. Advanced search
    123
    All
    Search a content by keyword
    View All Results (1000+)
    12345
    CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX)
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
    12345-01
    COUNTERPART NAME SOMETHING SA
    24.10.2019
    Date:
    DOCUMENT NAME
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
    My Bookmarks
    1967 - 7024
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52
    CHAR MAX)
    1967 - 7024
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52
    CHAR MAX)
    1967 - 7024
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52
    CHAR MAX)
    1967 - 7024
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52
    CHAR MAX)
    12345
    CONTRACT NAME HERE AROUND 72 CHAR
    12345-01
    COUNTERPART NAME SOMETHING SA
    2
    Hi Alexandre
    More
    My Portfolio
    My Planning
    My Dashboard
    Search a content by name, id, etc.
    All
    1234- 4321
    OPERATION NAME HERE
    1967 - 7024
    OPERATION NAME HERE THAT IS TOO
    LONG AND NEEDS 2 LINES
    12345
    CONTRACT NAME
    12345-01
    COUNTERPART NAME SA
    12345-01
    COUNTERPART NAME SA
    View All Results (1000+)
    Bookmarks link Quick Search (homepage)
    Quick Search (header)

    View full-size slide

  19. 1967 - 7024
    OPERATION NAME HERE (AROUND 52 CHAR)
    12345
    CONTRACT NAME HERE (AROUND 72 CHAR)
    12345-01
    COUNTERPART NAME SOMETHING SA
    24.10.2019
    Date:
    DOCUMENT NAME
    24.10.2019
    Date:
    DOCUMENT NAME
    12345-01
    COUNTERPART NAME SA
    12345
    CONTRACT NAME
    1234- 4321
    OPERATION NAME HERE
    Entity Link Default — Medium Entity Link Default — Small

    View full-size slide

  20. Variations & similar
    components :

    same player, play again !

    View full-size slide

  21. Expand the
    content priority for
    more variations

    View full-size slide

  22. Entity Link Default — Medium
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
    Fully Signed
    Active
    Expected
    29.04.2019
    Signature:
    12345
    CONTRACT NAME HERE AROUND 72 CHAR
    Active
    12345-01
    COUNTERPART NAME GOES HERE
    Another Document Type
    KnC
    01.10.2020
    Date:
    DOCUMENT NAME GOES HERE
    Entity Link Search Results — Medium
    1967 - 7024
    OPERATION NAME HERE (AROUND 52 CHAR)
    12345
    CONTRACT NAME HERE (AROUND 72 CHAR)
    12345-01
    COUNTERPART NAME SOMETHING SA
    24.10.2019
    Date:
    DOCUMENT NAME

    View full-size slide

  23. Content Model Low Fidelity Wireframe Component
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
    Fully Signed
    Active
    Expected
    29.04.2019
    Signature:
    12345
    CONTRACT NAME HERE AROUND 72 CHAR
    Active
    12345-01
    COUNTERPART NAME GOES HERE
    Another Document Type
    KnC
    01.10.2020
    Date:
    DOCUMENT NAME GOES HERE

    View full-size slide

  24. 5. Documentation and
    the design-dev
    collaboration

    View full-size slide

  25. That component has some variations from the default one. Here’s the content model so far.
    For the measures please refere to the individual component specs.
    Entity Link Items — All the variations
    Variations
    Contracts
    1967 - 7024
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
    12345
    CONTRACT NAME HERE AROUND 72 CHAR
    1967 - 7024
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) WITH MORE
    TEXT SO IT NEEDS 2 LINES TO DISPLAY
    CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX) WITH A LITTLE BIT
    29.04.2019
    BoD:
    1967 - 7024
    OPERATION NAME AROUND 52 CHAR
    MC PIN
    29.04.2019
    BoD:
    1967 - 7024
    OPERATION NAME AROUND 52 CHAR
    MC AFS Overdue
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
    Fully Signed
    Active
    1234- 4321
    OPERATION NAME HERE
    1967 - 7024
    OPERATION NAME HERE THAT IS TOO
    LONG AND NEEDS 2 LINES
    12345
    CONTRACT NAME
    Small (<= 450px)
    CONTRACT NAME THAT IS WAY
    LONGER HERE AND NEEDS 2 LINES
    Entity Link — Next Deadlines
    Entity Link — Default
    Entity Link — Default
    Entity Link — Search Results
    Operations
    Fully Signed
    Active
    1234- 4321
    OPERATION NAME HERE
    Fully Signed
    Active
    1234- 4321
    OPERATION NAME HERE WITH MORE
    CONTENT ON 2 LINES
    29.04.2019
    BoD:
    1967 - 7024
    OPERATION NAME AROUND 52 CHAR
    MC PIN
    29.04.2019
    BoD:
    1967 - 7024
    OPERATION NAME AROUND 52 CHAR
    MC AFS Overdue
    Small (<= 450px)
    Entity link items are used to display a clickable list of interactive entities (operations, contracts, counterparts). Each entity type has its own specifications
    Those are used in different places in the interface including Dashboard Tiles, search auto-complete, and other places where a list of clickable entities is required
    Entity Link Items
    Anatomy
    Border
    rgba(204,204,204,1);
    #cccccc
    palette.divider
    Icon hover
    rgba(181,67,0,1);
    #B54300
    palette.primary.dark
    Background hover
    rgba(252,246,242,1);
    #FCF6F2
    palette.primary.contra
    stText
    Icon default
    rgba(115,115,115,1);
    #737373
    palette.text.secondary
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
    12345
    CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX)
    12345-01
    COUNTERPART NAME SOMETHING SA
    24.10.2019
    Date:
    DOCUMENT NAME
    16px
    16px
    16px
    16px
    24px
    8px
    24px
    24px
    40px
    4px
    1234- 4321
    24.10.2019
    Typography
    Date:
    TITLES OF ENTITY
    color: #303030 100%
    font-size: 18px
    font-face: Roboto Medium
    color: #303030 100%
    font-size: 14px
    font-face: Roboto
    color: #303030 100%
    font-size: 14px
    font-face: Roboto color: #737373 100%
    font-size: 14px
    font-face: Roboto
    Entity link default — Medium (> 450px)
    Items hover
    Items hover
    Entity link default — Small (<= 450px)
    We have 4 items type: operation, contract, counterpart and documents. Each use the corresponding entity item.
    1234- 4321
    OPERATION NAME HERE
    4px
    12px
    24px
    1967 - 7024
    OPERATION NAME HERE THAT IS TOO
    LONG AND NEEDS 2 LINES
    12345
    CONTRACT NAME
    12345-01
    COUNTERPART NAME SA
    24.10.2019
    Date:
    DOCUMENT NAME
    Typography
    24.10.2019
    1234- 4321 Date:
    TITLE GOES HERE
    color: #303030 100%
    font-size: 16px
    font-face: Roboto Medium
    color: #303030 100%
    font-size: 12px
    font-face: Roboto
    color: #303030 100%
    font-size: 12px
    font-face: Roboto
    color: #737373 100%
    font-size: 12px
    font-face: Roboto
    8px 12px
    12px
    12px 12px
    8px
    Border Icon hover Background hover
    Icon default
    We have 4 items type: operation, contract, counterpart and documents. Each use the corresponding entity item.
    Documenting the
    content model in
    deliverables helps dev
    teams understand
    variations

    View full-size slide

  26. Example on a new project:


    The “cooking recipe thumbnail” component

    View full-size slide

  27. Content model: what will
    this type of content
    consist of?

    View full-size slide

  28. Content priority

    (based on user research)

    View full-size slide

  29. Auto-layout and
    Variants for
    responsive
    component in Figma

    View full-size slide

  30. Adapt to different layout
    contraints as well

    View full-size slide

  31. Container
    queries
    Media
    queries

    View full-size slide

  32. Container
    Queries?
    Soooooon

    View full-size slide

  33. Faking
    container
    queries with
    ResizeObserver
    Container Queries by Philp Walton

    View full-size slide

  34. Flexbox, Grid Layout, clamp() and more to build responsive layouts without media queries

    View full-size slide

  35. Codepen Demo by Geoffrey Crofte

    View full-size slide

  36. We need to stop obsessing over
    pixel perfection and embrace the
    fluid intrinsic nature of the web:


    Design in tools,

    Decide in the browser!

    View full-size slide

  37. Design/dev peer
    reviewing to fine tune
    the details

    View full-size slide

  38. Designing for scale, beyond
    the “default" state & content

    View full-size slide

  39. What happens if
    there is no
    image?
    It really is possible to make excellent gluten free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    My Grand’ Ma’s Gluten Free Pan Pizza
    Save
    GLUTEN FREE MAIN DISH
    Preparation time:
    3 hours
    Cooking time:
    25 min
    Serving:
    4-6 persons
    Cost:
    3€/person
    It really is possible to make excellent
    gluten free pizza at home in your own
    oven with our different recipes and
    techniques
    (12 votes)
    My Grand’ Ma’s Gluten
    Free Pan Pizza
    Save
    GLUTEN FREE MAIN DISH
    Preparation time:
    3 hours
    Cooking time:
    25 min
    Serving:
    4-6 persons
    Cost:
    3€/person

    View full-size slide

  40. What happens
    if there’s no
    content value
    (yet)?
    It really is possible to make excellent
    gluten free pizza at home in your own
    oven with our different recipes and
    techniques
    (0 votes)
    Gluten Free Pan Pizza
    Save
    GLUTEN FREE MAIN DISH
    Preparation time:
    3 hours
    Cooking time:
    25 min
    Serving:
    4-6 persons
    Cost:
    3€/person
    It really is possible to make excellent
    gluten free pizza at home in your own
    oven with our different recipes and
    techniques
    (No Rating available)
    Gluten Free Pan Pizza
    Save
    GLUTEN FREE MAIN DISH
    Preparation time:
    3 hours
    Cooking time:
    25 min
    Serving:
    4-6 persons
    Cost:
    3€/person
    It really is possible to make excellent
    gluten free pizza at home in your own
    oven with our different recipes and
    techniques
    Gluten Free Pan Pizza
    GLUTEN FREE MAIN DISH
    Preparation time:
    3 hours
    Cooking time:
    25 min
    Serving:
    4-6 persons

    View full-size slide

  41. It really is possible to make excellent
    gluten free pizza at home in your own
    oven with our different recipes and
    techniques
    (12 votes)
    My Grand’ Ma’s Gluten
    Free Pan Pizza
    Save
    GLUTEN FREE MAIN DISH
    Preparation time:
    3 hours
    Cooking time:
    25 min
    Serving:
    4-6 persons
    Cost:
    3€/person
    It really is possible to make excellent
    gluten free pizza at home in your own
    oven with our different recipes and
    techniques
    (12 votes)
    Gluten Free Pan Pizza
    Save
    GLUTEN FREE MAIN DISH
    Preparation time:
    3 hours
    Cooking time:
    25 min
    Serving:
    4-6 persons
    Cost:
    3€/person
    What happens
    if the title needs

    2 lines or more?

    View full-size slide

  42. It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    My Grand’ Ma’s Gluten
    Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    My Grand’ Ma’s Gluten
    Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    Gluten Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    Gluten Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    Gluten Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    Gluten Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    My Grand’ Ma’s Gluten
    Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    My Grand’ Ma’s Gluten
    Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    Gluten Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    Gluten Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    Gluten Free Pan Pizza
    GLUTEN FREE MAIN DISH
    It really is possible to make excellent gluten
    free pizza at home in your own oven with our
    different recipes and techniques
    (12 votes)
    Save
    Gluten Free Pan Pizza
    GLUTEN FREE MAIN DISH
    How does it behave
    in a gallery with
    different content
    length?

    View full-size slide

  43. Does my design
    still work with
    other
    languages?
    Stef
    Geoff

    View full-size slide

  44. Scaling components based on
    content tips
    ๏ If you use “fake content”, make sure the structure is close to
    the real one.


    ๏ If you are a designer: ask the devs for the limits of those fields
    in the database, ask for min, max and average content length.


    ๏ If you are a developer: if something is missing, ask the
    designer how it should behave.


    ๏ For translations: try to know upfront if you need other
    languages, which ones, and the ratio of those.

    View full-size slide

  45. Language ratio
    after translation
    from English

    View full-size slide

  46. What about
    loading, data
    population, errors
    and no data?
    Loading
    My division
    Label
    Card title My division
    Label
    2019
    Label
    2019
    Label
    Data Population
    Empty state - no data
    Card title My division
    Label
    2019
    Label
    2019
    Label
    There are no [Elements Title] to display.
    Error and warning
    My division
    Label
    Card title
    There is a technical problem with the content of this Tile. If the problem persists,
    please contact Serapis technical support team by email ([email protected]) or
    phone (Ext. 54000)
    My division
    Label
    2019
    Label
    2020
    Label

    View full-size slide

  47. Card title
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
    12345
    CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX)
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) WITH MORE TEXT SO
    IT NEEDS 2 LINES TO DISPLAY
    12345
    CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX)
    12345-01
    COUNTERPART NAME SOMETHING SA
    Card title
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
    Card title
    1-5 of 15
    5
    Row per tile
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
    12345
    CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX)
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) WITH MORE TEXT SO
    IT NEEDS 2 LINES TO DISPLAY
    12345
    CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX)
    12345-01
    COUNTERPART NAME SOMETHING SA
    Card title
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)
    12345
    CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX)
    1234- 4321
    OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) WITH MORE TEXT SO
    IT NEEDS 2 LINES TO DISPLAY
    12345
    CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX)
    COUNTERPART NAME SOMETHING SA
    How does the
    component
    scale?

    View full-size slide

  48. I don’t need to “design” all of
    them, just “decide” what will
    happen and communicate
    this to / with the dev team.

    View full-size slide

  49. Designing for component
    interactivity

    View full-size slide

  50. Providing different
    interaction states
    for button
    components
    Action Verb
    Focus
    Action Verb
    Disabled Focus
    Action Verb
    Active
    Action Verb
    Default
    Action Verb
    Hover
    Action Verb
    Disabled

    View full-size slide

  51. Email adress
    stephaniemydomain.com
    Email adress
    Your email is missing a @
    |
    Email adress
    [email protected]
    Email adress
    Email adress
    [email protected]
    Email adress
    [email protected]
    Email adress
    Email verified
    [email protected]
    Email adress
    This email is already used
    [email protected]
    Email adress
    Verification...
    [email protected]
    Email adress
    Empty
    Default Default
    Error
    Hover Hover
    Warning
    Focus/Active Focus/Active
    Success
    Information
    Filled Validation
    [email protected]
    Email adress
    Placeholder
    Email adress
    Placeholder Disabled
    There
    might be
    more…

    View full-size slide

  52. All
    Item 02
    Item 01
    All
    Item 02
    Item 01
    All
    Item 02
    Item 01
    All
    Item 02
    Item 01
    All
    Item 02
    Item 01
    All
    All
    All
    Item 01
    Item 01
    All
    By default the current
    item is highlighted
    : the next element is highlighted.
    : the previous element is
    highlighted.
    If the user hits , this element
    becomes the active one and the dropdown
    closes
    When user hovers another element, we
    apply the default “dropdown hover” style.
    If the user clicks on an element, this
    element becomes the active one and the
    dropdown closes.
    User open the dropdown menu when:
    - they click on it
    - they put the keyboard focus on it
    and hit /
    Interaction flow
    What about
    keyboard
    users?

    View full-size slide

  53. Documenting
    interactions, steps
    and cases to bridge
    the gap with dev
    teams
    User Flow
    Screen flow

    View full-size slide

  54. Show don’t tell:
    interactive
    prototypes

    View full-size slide

  55. Adaptive Components
    towards User’s Context

    View full-size slide

  56. You are offline. Your email(s) will be sent
    once you are online again
    1 unsent messsage in mailbox Here goes the message subject
    Some message description goes here
    12:30
    S
    Here goes the message subject
    Some message description goes here
    12:30
    S
    Here goes the message subject
    Some message description goes here
    12:30
    S
    Here goes the message subject
    Some message description goes here
    12:30
    S
    “Ideal” state
    “Synchronization fail” state
    “Synchronizing” state
    “Synchronization success” state
    Adapting to
    user’s network
    condition and
    connection
    loses

    View full-size slide

  57. Vehicle drop off details
    Close
    100%
    9 41 AM
    XXX
    Follow the steps to drop off your vehicle
    Get the rental car keys and drop your vehicle keys in
    a safe. Further instructions will be available.
    5 Pickup rental & Drop keys
    Open gate
    Use the code to open the parking gate
    Show gate code
    Enter the parking space and park your vehicle in an
    available spot
    Vehicle is parked
    2 Park vehicle
    You asked for a category 1 rental. Your car is ready
    for pick-up, we just need you to sign a few
    documents.
    3 Sign documents
    Fill in rental car damage report. Further instructions
    will be available.
    4 Rental damage report
    Vehicle drop off details
    Close
    100%
    9 41 AM
    XXX
    Follow the steps to drop off your vehicle
    Get the rental car keys and drop your vehicle keys in
    a safe. Further instructions will be available.
    5 Pickup rental & Drop keys
    Open gate
    Gate was opened
    Vehicle was parked
    Park vehicle
    You asked for a category 1 rental. Your car is ready
    for pick-up, we just need you to sign a few
    documents.
    Sign the documents
    3 Sign documents
    Fill in rental car damage report. Further instructions
    will be available.
    4 Rental damage report
    Vehicle drop off details
    Close
    100%
    9 41 AM
    XXX
    Follow the steps to drop off your vehicle
    Get the rental car keys and drop your vehicle keys in
    a safe. Further instructions will be available.
    5 Pickup rental & Drop keys
    Open gate
    Gate was opened
    Vehicle was parked
    Park vehicle
    ID card and Driving Licence uploaded and confirmed,
    rental car contract and general rental conditions
    signed.
    Sign documents
    Please go around the vehicle and fill in the rental car
    damage report.
    Start rental damage report
    Tesla
    Model 3
    4 Rental damage report
    Vehicle drop off details
    Close
    100%
    9 41 AM
    XXX
    Follow the steps to drop off your vehicle
    Pickup rental & Drop keys
    Rental car picked up and keys were droped in the
    safe.
    Get safe information
    5
    Open gate
    Gate was opened
    Vehicle was parked
    Park vehicle
    Rental damage report was done and signed
    Rental damage report
    ID card and Driving Licence uploaded and confirmed,
    rental car contract and general rental conditions
    signed.
    Sign documents
    Vehicle drop off details
    Close
    100%
    9 41 AM
    XXX
    Follow the steps to drop off your vehicle
    Pickup rental & Drop keys
    Rental car picked up and keys were droped in the
    safe.
    Show gate code
    Open gate
    Gate was opened
    Vehicle was parked
    Park vehicle
    Rental damage report was done and signed
    Rental damage report
    ID card and Driving Licence uploaded and confirmed,
    rental car contract and general rental conditions
    signed.
    Sign documents
    I finished the drop off
    Adapting to
    different steps
    in a process

    View full-size slide

  58. WAW
    Warsaw
    LUX
    Luxembourg
    Passenger Seat
    Terminal Gate
    Boarding
    Date
    Class
    Stéphanie Walter 13D
    - -
    12:55
    10:55 XZ- 9019
    10:30
    28/06/2020
    Eco
    D - 2 H - 1
    Adapting to user
    needs and
    expectations
    across the journey
    WAW
    Warsaw
    12:55
    LUX
    Luxembourg
    10:55 XZ- 9019
    Date: 28/06/2020
    Passenger
    Seat
    Terminal Gate
    Boarding
    13D
    D A12
    10:30
    Class
    Stéphanie Walter Eco
    XZ- 9019
    WAW
    LUX
    28/06/2020
    Gate Terminal
    Boarding
    A12 A12
    Seat
    13D
    10:30

    View full-size slide

  59. This last part is more
    “experimental” and I would be
    careful with it and heavily test it
    because it might go against the
    “predictability of the interface”.


    So be careful.

    View full-size slide

  60. Dark vs Light
    mode: prefers-
    color-scheme

    View full-size slide

  61. Adapting to user
    environment, like
    ambiant light or
    geolocation

    View full-size slide

  62. Allow users to
    manage adaptive
    features

    View full-size slide

  63. AGAIN, you need to deeply
    understand your users needs
    and behaviour to build those
    kind of adaptive experiences:
    User Research!!!

    View full-size slide

  64. Going beyond what
    happens in the app/site,
    understanding user
    behaviour and journeys
    Phases
    PHASE 1 PHASE 2 PHASE 3
    Touchpoints & channels
    Emotions and pain points
    Actions / Tasks
    Opportunities for features and improvements
    User, goal, scope

    View full-size slide

  65. Predict user
    behaviour and
    needs with machine
    learning, big data
    Epidemiology
    Demography

    View full-size slide

  66. ๏ Do you User Research upfront


    ๏ Start with the content model, build a solid
    information architecture


    ๏ Identify variants and similar components


    ๏ Anticipate flexibility by providing different
    states, beyond the “perfect” content scenario


    ๏ Anticipate different interactions, different
    interaction devices


    ๏ Test the components, adapt, iterate


    ๏ It’s a big collaborative process with between
    design and development team

    View full-size slide

  67. stephaniewalter.design @WalterStephanie
    🦊
    User Researcher & Product Designer



    Mobile expert. Pixel & CSS Lover

    View full-size slide