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.

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