Rebuilding an aircraft on the fly

At trivago we started with an iterative rebuild of our user interface in the beginning of 2015. Next to establishing a pattern library and thereby introducing a Design System we started to rethink the way we build our user interfaces in code and design. We adapted several methodologies like Atomic Design, changed our design development workflows, did a CSS refactoring – called Project Ironman – , improved our front-end stack and changed the way we build our assets and started to rebuild the core UI components of our main product in 2016.

The talk will provide insights in our journey with rebuilding our UI at large scale in an iterative way. It will present the challenges we encountered in code, design and our processes and how we solved them. The outcome will be highlighted with real data and some of our business metrics. However it will also show some of our mistakes we did while integrating the Design System and will present the lessons we have learned out of that.

Transcript

1. Rebuilding an aircraft on the fly

   Christoph Reinartz - @pistenprinz
   

   View Slide

2. Title

   subtitle
   

   View Slide

3. Design Systems

   An Overview
   

   View Slide

4. Components
   Process
   UI Layer
   Styleguide
   Design 

   Language
   Documentation
   Assets
   UI Kit
   Design 

   Principles
   Inspired by: https://medium.com/@NateBaldwin/anatomy-of-a-design-system-7a6b0677bf5
   

   View Slide

5. Definition

   CSS Framework
   This is the front-end code and production-ready design
   assets. The CSS framework is referenced and consumed by
   the product(s). It is a modular, scalable, and extensible tool
   that fosters rapid development and typically confirms to a CI/
   CD development environment.
   https://medium.com/@NateBaldwin/clarifying-our-style-guide-nomenclature-ab72358ee111#.nduusckg1
   

   View Slide

6. Title

   subtitle
   

   View Slide

7. This is the documentation resource for the design system.
   Since the design system is purely code and assets, the style
   guide is a site to demonstrate the UI patterns with references
   to aid in implementation and usage.
   Definition

   Styleguide
   https://medium.com/@NateBaldwin/clarifying-our-style-guide-nomenclature-ab72358ee111#.nduusckg1
   

   View Slide

8. Title

   subtitle
   

   View Slide

9. Definition

   Pattern Library
   This is a library of standardized UI patterns. They are the final
   designs, and can be delivered in the form of a repository of
   design files, or a symbol library/UI kit. It is the resource for
   designers to build from.
   https://medium.com/@NateBaldwin/clarifying-our-style-guide-nomenclature-ab72358ee111#.nduusckg1
   

   View Slide

10. Definition

    Design System
    The entirety of the standardized UI patterns, framework,
    assets, and documentation, as well as the processes and
    people involved. It is the ecosystem that drives and supports
    the unified evolution of the product(s).
    https://medium.com/@NateBaldwin/clarifying-our-style-guide-nomenclature-ab72358ee111#.nduusckg1
    

    View Slide

11. Resources I

    www.styleguides.io
    This is the front-end code and production-ready design
    assets. The CSS framework is referenced and consumed by
    the product(s). It is a modular, scalable, and extensible tool
    that fosters rapid development and typically confirms to a CI/
    CD development environment.
    

    View Slide

12. Resources II

    designsystems.curated.co
    

    View Slide

13. Design Systems

    Examples
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. Design System
    Why do we need it?
    

    View Slide

19. #1
    Establish design and code
    consistency
    Remove clutter in code code and design
    

    View Slide

20. #2
    Improve code quality and
    maintainability
    Reduce technical debt
    

    View Slide

21. #3
    Provide base for modern &
    sustainable UI rebuild
    Build modern applications fast
    

    View Slide

22. Specificity graph 2012

    The specificity wall
    

    View Slide

23. View Slide

24. peaks at the beginning
    of the stylesheet
    Graph 2015 

    Way better, but still…
    

    View Slide

25. HTML5
    

    View Slide

26. #1
    Sprites were out of control
    We built Frankenstein with Icons
    

    View Slide

27. Title

    subtitle
    

    View Slide

28. #2
    Too much CSS
    How many Selectors do you use? ALL!
    

    View Slide

29. #3
    Desktop first approach
    Oh you poor mobile devices
    

    View Slide

30. #4
    Inconsistency and missing
    Styleguide
    Or how to create fifty shades of grey
    

    View Slide

31. View Slide

32. Title

    subtitle
    

    View Slide

33. Title

    subtitle
    

    View Slide

34. Title

    subtitle
    

    View Slide

35. #5
    Repeat yourself
    97 different footers - no single source of truth
    

    View Slide

36. Title

    subtitle
    

    View Slide

37. Title

    subtitle
    

    View Slide

38. Title

    subtitle
    

    View Slide

39. Title

    subtitle
    

    View Slide

40. #6
    Overly complex CSS/DOM structure
    div, div, div, span, span, span
    

    View Slide

41. #7
    Too much confusion in code
    Scary comments
    

    View Slide

42. Title

    subtitle
    

    View Slide

43. #8
    JPG to Jira Task driven development
    Developing on the live system
    

    View Slide

44. View Slide

45. Components
    Process
    UI Layer
    Styleguide
    Design 

    Language
    Documentation
    Assets
    UI Kit
    Design 

    Principles
    

    View Slide

46. Title

    subtitle
    Project Ironman
    Large scale CSS refactoring
    Christoph Reinartz - ScotlandCSS - Edinburgh, June 1st 2016
    

    View Slide

47. New CSS Core Old CSS Core
    normalize.css reset.css
    border-box content-box
    mobile first (min-width) desktop first (max-width)
    media queries inline in separate files
    embed SVG icon image sprites
    ITCSS layering [something]
    BEM, OOCSS [something]
    Post processing (MQPacker etc.) nothing (Assetic)
    

    View Slide

48. peaks at the beginning
    of the stylesheet
    Graph before Ironman

    Way better, but still…
    

    View Slide

49. New CSS
    base
    refactored CSS
    Graph after Ironman

    Improved curve…
    

    View Slide

50. Components
    Process
    CSS 

    Framework
    Styleguide
    Design 

    Language
    Documentation
    Assets
    UI Kit
    Design 

    Principles
    

    View Slide

51. Processes & Integration
    Methodologies and people
    

    View Slide

52. #
    Full-stack doesn’t scale
    That doesn’t mean you don’t need full stack devs
    

    View Slide

53. Digital Design UI Engineering
    

    View Slide

54. Design Development
    HTML
    CSS
    JavaScript
    

    View Slide

55. Design Development
    Accessibility
    Animations
    Integration
    Semantic
    Usability
    Performance
    JS Framework X
    

    View Slide

56. Design Development
    Accessibility
    Animations
    Integration
    Semantic
    Usability
    Performance
    JS Framework X
    

    View Slide

57. Design Development
    Accessibility
    Animations
    Integration
    Semantic
    Usability
    Performance
    JS Framework X
    

    View Slide

58. Design Development
    Accessibility
    Animations
    Integration
    Semantic
    Usability
    Performance
    JS Framework X
    

    View Slide

59. View Slide

60. 

    “We built a Design System based on
    our needs. You should totally use it”
    

    View Slide

61. View Slide

62. 

    “We built a Design System for you w/o
    knowing your needs. You should totally use it”
    

    View Slide

63. View Slide

64. 

    “We built a Design System together.
    Everybody can use it”
    

    View Slide

65. #
    Atomic Design
    An approach for modular interfaces
    

    View Slide

66. http://bradfrost.com/blog/post/atomic-design-in-one-gif/
    

    View Slide

67. Components
    Process
    UI Layer
    Styleguide
    Design 

    Language
    Documentation
    Assets
    UI Kit
    Design 

    Principles
    

    View Slide

68. From refactoring to rebuilding

    A new Search Result component
    

    View Slide

69. Refactoring first

    Disposable refactoring of old code
    

    View Slide

70. Step 1
    New codebase integrated
    Old layout kept because don’t release what you haven’t tested
    

    View Slide

71. Step 2
    Iterate new versions of UI
    components
    A new Search Result component based on the new base
    

    View Slide

72. Rebuilding later

    Relaunch a few weeks after the refactoring
    

    View Slide

73. Release and test

    And qualify it
    

    View Slide

74. Step 3
    Go to step 2
    Rebuild more Components
    

    View Slide

75. Rebuild more components

    Relaunch a few weeks after the refactoring
    

    View Slide

76. View Slide

77. <3
    Rolled-out flexbox modules
    Down with the floats
    

    View Slide

78. View Slide

79. float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    

    View Slide

80. View Slide

81. Components
    Process
    UI Layer
    Styleguide
    Design 

    Language
    Documentation
    Assets
    UI Kit
    Design 

    Principles
    

    View Slide

82. <3
    New Icon System
    From sprites to Inline-SVG
    

    View Slide

83. Title

    subtitle
    

    View Slide

84. Title

    subtitle
    

    View Slide

85. Title

    subtitle
    

    View Slide

86. Title

    subtitle
    

    View Slide

87. Title

    subtitle
    

    View Slide

88. description details infobig hotelconnect smiley heart towel star pictures
    wifi spa beach breakfast pool pet golf tv family eco parking
    bed_single bed_double bed_small couple universal home menu share edit
    checkout checkin general rates
    faq_circle faq info_circle
    info
    arrow_right_circle arrow_left_circle arrow_down_circle arrow_up_circle arrow_right arrow_left arrow_down arrow_up tick exclamation x plus minus
    image media bag chair team candy journalist news hoteltest plus_circle minus_circle x_circle filter
    dashboard statistics hotel2 hotel travel2 travel booking hotelchain upload delete tick_circle exclamation_circle contact
    profile info product history giveback lock calendar search publisher career comment download map
    smiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellent smiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellent
    level sort department
    poi_citycentre poi_airport poi_sight poi_conference poi_harbor poi_mainstation poi_nature poi_nightlife poi_sports
    filterreset join
    thin
    share2 movie call piechart diagram music multimedia
    wifi spa beach breakfast pool pet golf tv family eco parking
    bed_single bed_double bed_small couple universal home menu share edit
    checkout checkin general rates description details infobig hotelconnect smiley heart towel star pictures
    icn_profile icn_info icn_product icn_history icn_giveback icn_lock icn_calendar icn_search icn_publisher icn_career icn_comment icn_download icn_map
    icn_dashboard icn_statistics icn_hotel2 icn_hotel icn_travel2 icn_travel icn_booking icn_hotelchain icn_upload icn_delete icn_tick_circle exclamation_circle contact
    image media bag chair team candy journalist news hoteltest plus_circle minus_circle x_circle icn_filter
    arrow_right_circle arrow_left_circle arrow_down_circle arrow_up_circle arrow_right arrow_left arrow_down arrow_up tick exclamation x plus minus
    faq_circle faq info_circle info
    smiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellent
    smiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellent
    level sort department
    poi_citycentre poi_airport poi_sight poi_conference poi_harbor poi_mainstation poi_nature poi_nightlife poi_sports
    join
    thin
    filterreset share2 movie call piechart diagram music multimedia
    

    View Slide

89. <3
    Sorted the colors
    Established and introduce a color palette
    

    View Slide

90. trv-blue-light
    #3f9fc1
    trv-red-light
    #d67763
    trv-green-light
    #8cba3f
    trv-green-lighter
    #b2d17f
    trv-green-dark
    #4c7b00
    trv-juri-light
    #697379
    trv-juri-lighter
    #9ba2a6
    trv-juri-lightest
    #ebeced
    trv-blue-dark
    #005f81
    trv-blue
    #007fad
    trv-orange
    #f48f00
    trv-red
    #c94a30
    trv-orange-dark
    #b76b00
    trv-orange-light
    #f6ab3f
    trv-blue-lightest
    #e5f2f6
    trv-red-lightest
    #f9ecea
    trv-orange-lightest
    #fdf3e5
    trv-red-dark
    #963724
    trv-green
    #66a400
    trv-juri
    #37454d
    trv-juri-dark
    #293339
    16
    12 18
    16
    12
    12
    18
    12
    18
    16
    *
    trv-juri-very-light
    #cdd0d2
    trv-red-very-light
    #f1d1cb
    trv-green-very-light
    #d8e8bf
    trv-orange-very-light
    #fce3bf
    trv-blue-very-light
    #bfdfea
    trv-red-lighter
    #e4a49b
    trv-orange-lighter
    #f9c780
    trv-blue-lighter
    #7fbfd6
    trv-green-lightest
    #eff5e5
    

    View Slide

91. Title

    subtitle
    Now
    2015
    

    View Slide

92. View Slide

93. Components
    Process
    UI Layer
    Styleguide
    Design 

    Language
    Documentation
    Assets
    UI Kit
    Design 

    Principles
    

    View Slide

94. <3
    Code Styleguide
    And Documentation
    

    View Slide

95. View Slide

96. View Slide

97. View Slide

98. View Slide

99. View Slide

100. View Slide

101. Components
     Process
     UI Layer
     Styleguide
     Design 

     Language
     Documentation
     Assets
     UI Kit
     Design 

     Principles
     

     View Slide

102. Lessons learned
     What went wrong? And why?
     

     View Slide

103. 3
     Let’s remove this CSS class
     Famous last words
     

     View Slide

104. Title

     subtitle
     

     View Slide

105. pull-left vs. fl-leading

     nobody uses this old thing, or?
     deprecated class non - deprecated class
     97%
     3%
     

     View Slide

106. CSS deprecation handling

     Salesforce Sass-Deprecate
     

     View Slide

107. 3
     Is the scope too big?
     There is no approach to rule them all
     

     View Slide

108. The roll-out Vision handling

     The verbose version
     

     View Slide

109. The roll-out Vision

     Filtered by Designers
     

     View Slide

110. Admin Tools Hotelsearch Hotelmanager
     

     View Slide

111. Admin Tools Hotelsearch Hotelmanager
     

     View Slide

112. admin-library patternlab-loader
     admin-lib
     trivago-core_patterns
     daisy-and-trivi
     fork
     visualisation
     composer package
     composer package
     composer package
     _patterns
     _patterns
     

     View Slide

113. 21
     admin-library patternlab-loader
     admin-lib
     trivago-core_patterns
     daisy-and-trivi
     fork
     visualisation
     admin-tools application
     composer package
     composer package
     composer package symfony application
     scss
     _patterns
     _patterns
     

     View Slide

114. 3
     Dependencies
     From monolith to packages to mono-repo
     

     View Slide

115. daisy-and-trivi applications
     

     View Slide

116. daisy-and-trivi applications
     trivago core patterns
     

     View Slide

117. daisy-and-trivi applications
     trivago core patterns
     

     View Slide

118. View Slide

119. View Slide

120. View Slide

121. View Slide

122. View Slide

123. View Slide

124. daisy-and-trivi applications
     trivago core patterns
     

     View Slide

125. Learning No.1
     Robustness principle
     “Be conservative in what you do, be liberal in what
     you accept from others”
     

     View Slide

126. Learning No.2
     Don’t dictate technology
     Be pragmatic
     

     View Slide

127. Design System Metrics

     Some data
     

     View Slide

128. 

     “We saved two weeks when using
     the System” *
     *) Communication Team
     

     View Slide

129. 

     16 contributors
     

     View Slide

130. 

     12 teams using it
     

     View Slide

131. 

     15 applications using it
     

     View Slide

132. Title

     subtitle
     

     View Slide

133. 

     5 external companies using it
     

     View Slide

134. 

     ~50% reduced bug reports
     

     View Slide

135. Christoph Reinartz
     Team Lead UI/UX @trivago

     

     Web: www.creinartz.de

     twitter: @pistenprinz

     

     View Slide