Designing Adaptive Components, beyond responsive breakpoints

Transcript

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

   View Slide

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

   Mobile expert. Pixel & CSS Lover
   

   View Slide

3. Designing reusable
   components
   

   View Slide

4. It all starts with a strong
   information architecture
   

   View Slide

5. Overview
   List of Overviews
   Overview
   Overview
   Overview
   Overview
   Details
   

   View Slide

6. Example on existing content:
   
   
   the “Link Item” component
   

   View 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 Slide

8. 1. Start with the
   content model
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. 2. Rank and
    prioritize elements
    

    View 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 Slide

14. How to decide?
    

    Do your homework:
    

    User Research!
    

    View Slide

15. 3. Identify variations
    and similar components
    

    View 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 Slide

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

    View 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 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 Slide

20. Variations & similar
    components :
    

    same player, play again !
    

    View Slide

21. Expand the
    content priority for
    more variations
    

    View 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 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 Slide

24. 5. Documentation and
    the design-dev
    collaboration
    

    View 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 Slide

26. View Slide

27. Example on a new project:
    
    
    The “cooking recipe thumbnail” component
    

    View Slide

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

    View Slide

29. Content priority
    

    (based on user research)
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

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

    View Slide

34. Adapt to different layout
    contraints as well
    

    View Slide

35. Container
    queries
    Media
    queries
    

    View Slide

36. Container
    Queries?
    Soooooon
    

    View Slide

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

    View Slide

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

    View Slide

39. Codepen Demo by Geoffrey Crofte
    

    View Slide

40. 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 Slide

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

    View Slide

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

    View Slide

43. 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 Slide

44. 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 Slide

45. 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 Slide

46. 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 Slide

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

    View Slide

48. 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 Slide

49. Language ratio
    after translation
    from English
    

    View Slide

50. 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 Slide

51. 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 Slide

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

    View Slide

53. Designing for component
    interactivity
    

    View Slide

54. 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 Slide

55. 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 Slide

56. 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 Slide

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

    View Slide

58. Show don’t tell:
    interactive
    prototypes
    

    View Slide

59. Adaptive Components
    towards User’s Context
    

    View Slide

60. 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 Slide

61. 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 Slide

62. 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 Slide

63. 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 Slide

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

    View Slide

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

    View Slide

66. Allow users to
    manage adaptive
    features
    

    View Slide

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

    View Slide

68. 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 Slide

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

    View Slide

70. ๏ 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 Slide

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

    Mobile expert. Pixel & CSS Lover
    

    View Slide