Design Systems Engineering - Scaling User Interfaces @trivago

In 2015 we started with an iterative rebuild of our user interface at trivago. With this we introduced a Design System and started to rethink the way we build our user interfaces in code and design. I'll present our experiences, approaches and learnings with integrating and rolling out the System.

Transcript

1. Design Systems Engineering

   Scaling User Interfaces

   

   Christoph Reinartz | @pistenprinz |
   

   View Slide

2. Based on a true story

   Share what you’ve learned
   

   View Slide

3. Do what works for you

   This is what worked for us
   

   View Slide

4. 2012

   Let the show begin
   

   View Slide

5. View Slide

6. View Slide

7. Legacy PHP Framework

   Come with us they said
   

   View Slide

8. JavaScript

   Make sure to `onclick` every DOM node
   

   View Slide

9. CSS.inc

   We don’t always write CSS but when we do we make
   sure to save it in dot inc files
   

   View Slide

10. Specificity graph 2012

    The specificity wall
    

    View Slide

11. .gradient_bright_hover:hover,
    .gradient_bright_hover:hover *,
    .gradient_dark_hover:hover,
    .gradient_dark_hover:hover * {
    color:#fff !important
    }
    Show me your code

    Part 1 - Specificity 20
    

    View Slide

12. View Slide

13. Symfony Framework

    Twig templating & Assetic
    

    View Slide

14. jQuery

    to plugins
    

    View Slide

15. SCSS

    Pre-processing introduced - Ruby Sass
    

    View Slide

16. #banner_topnav div.tablink li
    div.dropdown #table.localization

    a.plain:hover {
    color:#fff !important;
    }
    Show me your code

    Part 2 - Specificity 254
    

    View Slide

17. View Slide

18. Amount of Frontend Developer

    x 1
    

    View Slide

19. 2013 - 2014

    The first steps
    

    View Slide

20. Project Moon

    Flat Design facelift
    

    View Slide

21. View Slide

22. View Slide

23. The first guidelines

    I make my own rules
    

    View Slide

24. HTML5 101

    Fight the divitis
    

    View Slide

25. Templating guidelines

    Naming and structure
    

    View Slide

26. CSS Tipps

    2 simple rules (Nesting, Naming) + best practices
    

    View Slide

27. View Slide

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

    View Slide

29. View Slide

30. View Slide

31. Mobile traffic

    D’oh
    

    View Slide

32. View Slide

33. How it should not be solved

    Viewport vandalism
    

    View Slide

34. View Slide

35. Project Mars

    Desktop first facelift
    

    View Slide

36. View Slide

37. Project Venus

    Let’s launch in Israel
    

    View Slide

38. View Slide

39. View Slide

40. Let’s talk about consistency

    Once again
    

    View Slide

41. View Slide

42. View Slide

43. Hackathon Project 2014

    CSS Framework
    

    View Slide

44. View Slide

45. View Slide

46. 

    “We built a CSS Framework. You
    should totally use it”
    

    View Slide

47. Amount of Frontend Developer

    x 5
    

    View Slide

48. 2015

    Let’s scale
    

    View Slide

49. Graph 2015 

    Way better, but still…
    

    View Slide

50. Specificity graph 2012

    The specificity wall
    

    View Slide

51. Graph 2015 

    Way better, but still…
    

    View Slide

52. Houston, we have a problem

    It doesn’t scale anymore
    

    View Slide

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

    View Slide

54. Title

    subtitle
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

59. View Slide

60. Title

    subtitle
    

    View Slide

61. Title

    subtitle
    

    View Slide

62. Title

    subtitle
    

    View Slide

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

    View Slide

64. Title

    subtitle
    

    View Slide

65. Title

    subtitle
    

    View Slide

66. Title

    subtitle
    

    View Slide

67. Title

    subtitle
    

    View Slide

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

    View Slide

69. #7
    Too much confusion in code
    Scary comments
    

    View Slide

70. Title

    subtitle
    

    View Slide

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

    View Slide

72. View Slide

73. Design Systems to the rescue

    An Overview
    

    View Slide

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

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

76. Title

    subtitle
    

    View Slide

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

78. Title

    subtitle
    

    View Slide

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

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

81. Design Systems

    Examples
    

    View Slide

82. View Slide

83. View Slide

84. View Slide

85. View Slide

86. Design System
    Why do we need it?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

90. Design System Case Study
    A first try-out with patternlab.io
    

    View Slide

91. Digital Design UI Engineering
    

    View Slide

92. Design Development
    HTML
    CSS
    JavaScript
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

97. View Slide

98. 

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

    View Slide

99. The initial version 

    Simple but it worked
    

    View Slide

100. Form Elements
     Buttons
     Navigation
     Teaser
     Header
     Footer
     Typographie
     Icons
     Tabs
     Grid
     

     View Slide

101. View Slide

102. Good news everyone

     We do it differently now - The sales pitch
     

     View Slide

103. View Slide

104. View Slide

105. View Slide

106. View Slide

107. The roll-out Vision handling

     The verbose version
     

     View Slide

108. The roll-out Vision

     Filtered by Designers
     

     View Slide

109. Title

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

     View Slide

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

111. From Assetic to Node

     Webpack, ES6, post CSS
     

     View Slide

112. Graph 2015 

     Way better, but still…
     

     View Slide

113. New CSS
     base
     refactored CSS
     Graph after Ironman

     Improved curve…
     

     View Slide

114. <3
     New Icon System
     From sprites to embed-SVG
     

     View Slide

115. Title

     subtitle
     

     View Slide

116. Title

     subtitle
     

     View Slide

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

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

     View Slide

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

120. Title

     subtitle
     Now
     2015
     

     View Slide

121. Amount of Frontend Developer

     x 10
     

     View Slide

122. 2016

     From refactoring to rebuilding to roll-out
     

     View Slide

123. Refactoring first

     Disposable refactoring of old code
     

     View Slide

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

     View Slide

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

     View Slide

126. Rebuilding later

     Relaunch a few weeks after the refactoring
     

     View Slide

127. Release and test

     And qualify it
     

     View Slide

128. Step 3
     Go to step 2
     Rebuild more Components
     

     View Slide

129. Rebuild more components

     Relaunch a few weeks after the refactoring
     

     View Slide

130. View Slide

131. 3
     What about a package?
     Copy & paste didn’t scale
     

     View Slide

132. View Slide

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

     View Slide

134. pull-left vs. fl-leading

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

     View Slide

135. <3
     Code Styleguide
     And Documentation
     

     View Slide

136. View Slide

137. View Slide

138. View Slide

139. View Slide

140. View Slide

141. View Slide

142. 

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

     View Slide

143. <3
     New Icon System iterated
     From embed-SVG to Inline-SVG
     

     View Slide

144. Title

     subtitle
     

     View Slide

145. 2017

     From refactoring to rebuilding to roll-out
     

     View Slide

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

147. 100%
     Pattern lab loader
     reusable shared templates
     100%
     

     View Slide

148. CSS Components
     to be open sourced soon
     80%
     

     View Slide

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

     View Slide

150. daisy-and-trivi applications
     

     View Slide

151. daisy-and-trivi applications
     trivago core patterns
     

     View Slide

152. daisy-and-trivi applications
     trivago core patterns
     

     View Slide

153. View Slide

154. View Slide

155. View Slide

156. View Slide

157. View Slide

158. daisy-and-trivi applications
     trivago core patterns
     

     View Slide

159. Design System Metrics

     Some data
     

     View Slide

160. 

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

     View Slide

161. 

     16 contributors
     

     View Slide

162. 

     12 teams using it
     

     View Slide

163. 

     15 applications using it
     

     View Slide

164. Title

     subtitle
     

     View Slide

165. 

     5 external companies using it
     

     View Slide

166. 

     ~50% reduced bug reports
     

     View Slide

167. Thank you

     all this wouldn’t have been possible without
     Jean, Ann-Kristin, Daniela, Kay, Ian, Ailin, Lukas, Jan,
     Radovan, Tom, Janine, Frank, Gregory, Jessica, Daniel, Ulf,
     Dejan, Mirja, Christina, Karan, Celine, Andrej, Lisa, Victor,
     Timon, William, Andrea, David, Annett, Thomas, Tim,
     Alexandru, Irfan and many many more
     

     View Slide

168. Christoph Reinartz
     UI/UX Engineer @trivago

     

     Web: www.creinartz.de

     twitter: @pistenprinz

     

     View Slide