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 methologies like Atomic Design, changed our design development workflows, did a CSS refactoring - called Project Ironman - , improved our frontend stack and changed the way we build our assets and started to rebuild the core UI components of our main product in 2016.

This 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. #NamingIsHard
   

   View Slide

3. about:me
   creinartz.de
   twitter.com/pistenprinz
   trivago.com
   

   View Slide

4. Christoph Reinartz - @pistenprinz
   Design Systems

   An Overview
   

   View Slide

5. Components
   Process
   UI Layer
   Styleguide
   Design 

   Language
   Documentation
   Assets
   UI Kit
   Design 

   Principles
   

   View Slide

6. Christoph Reinartz - @pistenprinz
   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
   Continuous Integration/Continuous Delivery development
   environment.
   https://medium.com/@NateBaldwin/clarifying-our-style-guide-nomenclature-ab72358ee111
   

   View Slide

7. View Slide

8. Christoph Reinartz - @pistenprinz
   Definition

   Styleguide
   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.
   https://medium.com/@NateBaldwin/clarifying-our-style-guide-nomenclature-ab72358ee111
   

   View Slide

9. View Slide

10. Christoph Reinartz - @pistenprinz
    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
    

    View Slide

11. Christoph Reinartz - @pistenprinz
    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
    

    View Slide

12. Christoph Reinartz - @pistenprinz
    Resources I

    www.styleguides.io
    

    View Slide

13. Christoph Reinartz - @pistenprinz
    Resources II

    designsystems.curated.co
    

    View Slide

14. Christoph Reinartz - @pistenprinz
    Design Systems

    Examples
    

    View Slide

15. Christoph Reinartz - @pistenprinz
    Google Material Design

    

    View Slide

16. Christoph Reinartz - @pistenprinz
    Lightning Design System

    

    View Slide

17. Christoph Reinartz - @pistenprinz
    Design System
    Why do we need it?
    

    View Slide

18. Christoph Reinartz - @pistenprinz
    #1
    Establish design and code consistency
    Remove clutter in code code and design
    

    View Slide

19. Christoph Reinartz - @pistenprinz
    #2
    Improve code quality and
    maintainability
    Reduce technical debt
    

    View Slide

20. Christoph Reinartz - @pistenprinz
    #3
    Provide base for modern & sustainable
    UI rebuild
    Build modern applications fast
    

    View Slide

21. Christoph Reinartz - @pistenprinz
    Specificity graph 2012

    The specificity wall
    

    View Slide

22. View Slide

23. Christoph Reinartz - @pistenprinz
    peaks at the beginning
    of the stylesheet
    Graph 2015 

    Way better, but still…
    

    View Slide

24. HTML5
    

    View Slide

25. Christoph Reinartz - @pistenprinz
    #1
    Sprites were out of control
    We built Frankenstein with Icons
    

    View Slide

26. View Slide

27. Christoph Reinartz - @pistenprinz
    #2
    Too much CSS
    How many Selectors do you use? ALL!
    

    View Slide

28. Christoph Reinartz - @pistenprinz
    #3
    Desktop first approach
    Oh you poor mobile devices
    

    View Slide

29. Christoph Reinartz - @pistenprinz
    #4
    Inconsistency and missing Styleguide
    Or how to create fifty shades of grey
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. Christoph Reinartz - @pistenprinz
    #5
    Repeat yourself
    97 different footers - no single source of truth
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. Christoph Reinartz - @pistenprinz
    #6
    Overly complex CSS/DOM structure
    div, div, div, span, span, span
    

    View Slide

40. Christoph Reinartz - @pistenprinz
    #7
    Too much confusion in code
    Scary comments
    

    View Slide

41. View Slide

42. Components
    Process
    UI Layer
    Styleguide
    Design 

    Language
    Documentation
    Assets
    UI Kit
    Design 

    Principles
    

    View Slide

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

    View Slide

44. Christoph Reinartz - @pistenprinz
    New CSS Core Existing CSS
    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
    

    View Slide

45. Christoph Reinartz - @pistenprinz
    peaks at the beginning
    of the stylesheet
    Graph before Ironman

    Way better, but still…
    

    View Slide

46. Christoph Reinartz - @pistenprinz
    New CSS
    base
    Adapted old UI components.
    Can now be easily rebuilt!
    SVG
    Graph after Ironman

    Improved curve…
    

    View Slide

47. Components
    Process
    CSS Framework
    Styleguide
    Design 

    Language
    Documentation
    Assets
    UI Kit
    Design 

    Principles
    

    View Slide

48. Christoph Reinartz - @pistenprinz
    Processes & Integration
    Methodologies and people
    

    View Slide

49. Christoph Reinartz - @pistenprinz
    #
    Full-stack doesn’t scale
    That doesn’t mean you don’t need full stack devs
    

    View Slide

50. Christoph Reinartz - @pistenprinz
    Digital Design UI Engineering
    

    View Slide

51. Design Development
    HTML
    CSS
    JavaScript
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

56. Christoph Reinartz - @pistenprinz
    Atomic Design

    Modular User Inferfaces
    http://bradfrost.com/blog/post/atomic-design-in-one-gif/
    

    View Slide

57. Components
    Process
    UI Layer
    Styleguide
    Design 

    Language
    Documentation
    Assets
    UI Kit
    Design 

    Principles
    

    View Slide

58. Christoph Reinartz - @pistenprinz
    From refactoring to rebuilding

    A new Search Result component
    

    View Slide

59. View Slide

60. View Slide

61. Christoph Reinartz - @pistenprinz
    Refactoring first

    Disposable refactoring of old code
    

    View Slide

62. Christoph Reinartz - @pistenprinz
    Step 1
    New codebase integrated
    Old layout kept because don’t release what you haven’t tested
    

    View Slide

63. Christoph Reinartz - @pistenprinz
    Step 2
    Iterate new versions of UI components
    A new Search Result component based on the new base
    

    View Slide

64. Christoph Reinartz - @pistenprinz
    Rebuilding later

    Relaunch a few weeks after the refactoring
    

    View Slide

65. Christoph Reinartz - @pistenprinz
    Release and test

    And qualify it
    

    View Slide

66. Christoph Reinartz - @pistenprinz
    Step 3
    Go to step 2
    Rebuild more Components
    

    View Slide

67. Christoph Reinartz - @pistenprinz
    Rebuild more components

    Relaunch a few weeks after the refactoring
    

    View Slide

68. Christoph Reinartz - @pistenprinz
    

    View Slide

69. Christoph Reinartz - @pistenprinz
    <3
    Rolled-out flexbox modules
    Down with the floats
    

    View Slide

70. View Slide

71. float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    

    View Slide

72. View Slide

73. Components
    Process
    UI Layer
    Styleguide
    Design 

    Language
    Documentation
    Assets
    UI Kit
    Design 

    Principles
    

    View Slide

74. Christoph Reinartz - @pistenprinz
    From Sprites to Inline-SVG

    In less than a year
    

    View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. 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

81. View Slide

82. Christoph Reinartz - @pistenprinz
    Showcase 3

    HTTP requests
    

    View Slide

83. Christoph Reinartz - @pistenprinz
    Showcase 3

    HTTP requests
    

    View Slide

84. Components
    Process
    UI Layer
    Styleguide
    Design 

    Language
    Documentation
    Assets
    UI Kit
    Design 

    Principles
    

    View Slide

85. Christoph Reinartz - @pistenprinz
    <3
    Sorted the colors
    Established and introduce a color palette
    

    View Slide

86. 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

87. Now
    2015
    

    View Slide

88. Christoph Reinartz - @pistenprinz
    <3
    Code Styleguide
    And documentation
    

    View Slide

89. View Slide

90. View Slide

91. View Slide

92. Components
    Process
    UI Layer
    Styleguide
    Design 

    Language
    Documentation
    Assets
    UI Kit
    Design 

    Principles
    

    View Slide

93. Christoph Reinartz - @pistenprinz
    Lessons learned
    What went wrong? And why?
    

    View Slide

94. Christoph Reinartz - @pistenprinz
    3
    Let’s remove this CSS class
    Famous last words
    

    View Slide

95. View Slide

96. Christoph Reinartz - @pistenprinz
    pull-left vs. fl-leading

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

    View Slide

97. Christoph Reinartz - @pistenprinz
    CSS deprecation handling

    Salesforce Sass-Deprecate
    

    View Slide

98. Christoph Reinartz - @pistenprinz
    3
    Is the scope too big?
    So much diversity in front-end stacks
    

    View Slide

99. Christoph Reinartz - @pistenprinz
    The roll-out Vision handling

    The verbose version
    

    View Slide

100. Christoph Reinartz - @pistenprinz
     The roll-out Vision

     Filtered by Designers
     

     View Slide

101. Admin Tools Hotelsearch Hotelmanager
     

     View Slide

102. Admin Tools Hotelsearch Hotelmanager
     

     View Slide

103. Thanks! I’m done.
     Christoph Reinartz - @pistenprinz
     

     View Slide