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

Liferay DXP UX Evolution

Liferay DXP UX Evolution

Liferay DXP UX achievements for 7.1, adding the short term improvements we expect to have in Liferay DXP 7.2. Moreover, the lines of work Liferay DXP is working in terms of UX for the mid/long-term future and how Lexicon helps on all this trip.

Victor Valle Juarranz

November 07, 2018
Tweet

More Decks by Victor Valle Juarranz

Other Decks in Design

Transcript

  1. UX_Evolution
    Liferay DXP 7.1 and beyond

    View Slide

  2. 1_Quick Update 7.1
    2_Short term
    3_Medium/Long term
    4_How Lexicon helps
    DXP
    Lexicon

    View Slide

  3. What’s_Lexicon

    View Slide

  4. Experience_
    Language

    View Slide

  5. Partner Portal

    View Slide

  6. Analytics Cloud

    View Slide

  7. lexicondesign.io
    .

    View Slide

  8. 1_Quick Update 7.1
    2_Short term
    3_Medium/Long term
    4_How Lexicon helps
    DXP
    Lexicon

    View Slide

  9. 1_Quick Update 7.1
    2_Short term
    3_Medium/Long term
    4_How Lexicon helps
    DXP
    Lexicon

    View Slide

  10. Clay_

    View Slide

  11. 7.1 7.2
    Color
    Alerts
    Typography
    Management Toolbar
    Forms

    Cards
    Tables
    Management Toolbar
    Navigation
    Style Adjustments


    _ _ _
    7.3

    View Slide

  12. 7.1 7.2 7.3
    Color
    Alerts
    Typography
    Management Toolbar
    Forms

    Cards
    Tables
    Management Toolbar
    Navigation
    Style Adjustments


    _ _ _

    View Slide

  13. font-family-sans-serif:system-
    ui,-apple-system,
    BlinkMacSystemFont, "Segoe UI”,
    Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue”,
    Arial, sans-serif, "Apple Color
    Emoji”, "Segoe UI Emoji”, "Segoe
    UI Symbol";
    Tipografía
    font-family-monospace: SFMono-

    View Slide

  14. Color

    View Slide

  15. Alerts

    View Slide

  16. Alerts

    View Slide

  17. Alerts

    View Slide

  18. Alerts

    View Slide

  19. Management
    Toolbar

    View Slide

  20. Management
    Toolbar

    View Slide

  21. Forms

    View Slide

  22. Forms

    View Slide

  23. Forms

    View Slide

  24. Widgets redesign

    View Slide

  25. 1_Quick Update 7.1
    2_Short term
    3_Medium/Long term
    4_How Lexicon helps
    DXP
    Lexicon

    View Slide

  26. 1_Quick Update 7.1
    2_Short term
    3_Medium/Long term
    4_How Lexicon helps
    DXP
    Lexicon

    View Slide

  27. More_
    Management_
    Toolbar

    View Slide

  28. Filter Bar

    View Slide

  29. Filter Bar

    View Slide

  30. Filter Bar

    View Slide

  31. Contextual Actions

    View Slide

  32. New_Cards

    View Slide

  33. Cards

    View Slide

  34. Cards

    View Slide

  35. New_Table

    View Slide

  36. Header sort

    View Slide

  37. Header sort

    View Slide

  38. Header sort

    View Slide

  39. Header sort

    View Slide

  40. Header sort

    View Slide

  41. Quick Actions

    View Slide

  42. Quick Actions

    View Slide

  43. Quick Actions

    View Slide

  44. Row Interactions

    View Slide

  45. Row Interactions

    View Slide

  46. Row Interactions

    View Slide

  47. Row Interactions

    View Slide

  48. Sticky Header

    View Slide

  49. Sticky Header

    View Slide

  50. Sticky Header

    View Slide

  51. Sticky Header

    View Slide

  52. Column
    Drag & Drop

    View Slide

  53. Column
    Drag & Drop

    View Slide

  54. Column
    Drag & Drop

    View Slide

  55. Hide/show columns

    View Slide

  56. Hide/show columns

    View Slide

  57. Hide/show columns

    View Slide

  58. Hide/show columns

    View Slide

  59. Hide/show columns

    View Slide

  60. Style_Fixes

    View Slide

  61. View Slide

  62. View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. 1_Quick Update 7.1
    2_Short term
    3_Medium/Long term
    4_How Lexicon helps
    DXP
    Lexicon

    View Slide

  67. 1_Quick Update 7.1
    2_Short term
    3_Medium/Long term
    4_How Lexicon helps
    DXP
    Lexicon

    View Slide

  68. Embrace
    Business Users

    View Slide

  69. Marketers

    View Slide

  70. Business users want
    confirmation that the
    end result will be
    what they want

    View Slide

  71. Preview while editing

    View Slide

  72. Preview drafts in page
    Draft

    View Slide

  73. Preview in
    Segment
    Creator
    Preview users
    that result from
    the configured
    rules

    View Slide

  74. Enhance
    Administration Experience

    View Slide

  75. Common
    Administrators
    Super administrator
    Virtual Instance administrator
    Site administrator
    _

    View Slide

  76. View Slide

  77. Common
    Administrators
    Super administrator
    Virtual Instance administrator
    Site administrator
    _
    Manufacturer
    • CSR
    • Order Manager
    • Agent
    _
    Solution-specific
    Administrators
    Customer
    • Account Manager
    • Buyer
    • Catalog Manager
    • Store Manager
    + COMMERCE

    View Slide

  78. University Sites administrator
    Department Site administrator
    Teacher
    Administration worker and staff
    Enquirer - Content manager
    _
    Solution-specific
    Administrators
    + UNIVERSITY
    Common
    Administrators
    Super administrator
    Virtual Instance administrator
    Site administrator
    _

    View Slide

  79. Sometimes you will
    need to create several
    administration experiences

    View Slide

  80. Commerce
    Accelerator

    View Slide

  81. Commerce
    Accelerator

    View Slide

  82. Continue
    improving
    the default
    administration experience

    View Slide

  83. Build
    your own administration
    experience from more
    reusable and customizable
    building blocks.

    View Slide

  84. 1_Quick Update 7.1
    2_Short term
    3_Medium/Long term
    4_How Lexicon helps
    DXP
    Lexicon

    View Slide

  85. 1_Quick Update 7.1
    2_Short term
    3_Medium/Long term
    4_How Lexicon helps
    DXP
    Lexicon

    View Slide

  86. Components.
    Extension points.
    Interfaces to help you.

    View Slide

  87. Foundations
    _
    How is
    Lexicon
    organized?
    Core Components
    _
    Satellite Components
    _
    Templates
    _
    Examples
    _

    View Slide

  88. Foundations
    _
    How is
    Lexicon
    organized?
    Core Components
    _
    Satellite Components
    _
    Templates
    _
    Examples
    _

    View Slide

  89. Aa
    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
    Aa
    Colors Typography 8px Grid
    Foundations
    _

    View Slide

  90. Core Components
    _

    View Slide

  91. Variation

    View Slide

  92. Extension Point

    View Slide

  93. Satellite Components
    _

    View Slide

  94. Templates
    _

    View Slide

  95. Examples
    _

    View Slide

  96. Analytics Cloud

    View Slide

  97. Page Distribution

    View Slide

  98. Partner Portal

    View Slide

  99. lexicondesign.io
    .

    View Slide

  100. Liferay Events Mobile App
    Please, don’t forget to rate this talk!

    View Slide

  101. @juananton_
    @victorvj06
    lexicondesign.io
    Lexicon Repo
    @Liferay_Lexicon
    Thanks!

    View Slide

  102. @juananton_
    @victorvj06
    lexicondesign.io
    Lexicon Repo
    @Liferay_Lexicon

    View Slide