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

Design Systems Engineering - Scaling User Interfaces @trivago

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.

030423e4497440d3286862d2106b8eba?s=128

Christoph Reinartz

May 23, 2017
Tweet

Transcript

  1. Design Systems Engineering
 Scaling User Interfaces
 
 Christoph Reinartz |

    @pistenprinz |
  2. Based on a true story
 Share what you’ve learned

  3. Do what works for you
 This is what worked for

    us
  4. 2012
 Let the show begin

  5. None
  6. None
  7. Legacy PHP Framework
 Come with us they said

  8. JavaScript
 Make sure to `onclick` every DOM node

  9. CSS.inc
 We don’t always write CSS but when we do

    we make sure to save it in dot inc files
  10. Specificity graph 2012
 The specificity wall

  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
  12. None
  13. Symfony Framework
 Twig templating & Assetic

  14. jQuery
 to plugins

  15. SCSS
 Pre-processing introduced - Ruby Sass

  16. #banner_topnav div.tablink li div.dropdown #table.localization
 a.plain:hover { color:#fff !important; }

    Show me your code
 Part 2 - Specificity 254
  17. None
  18. Amount of Frontend Developer
 x 1

  19. 2013 - 2014
 The first steps

  20. Project Moon
 Flat Design facelift

  21. None
  22. None
  23. The first guidelines
 I make my own rules

  24. HTML5 101
 Fight the divitis

  25. Templating guidelines
 Naming and structure

  26. CSS Tipps
 2 simple rules (Nesting, Naming) + best practices

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

  29. None
  30. None
  31. Mobile traffic
 D’oh

  32. None
  33. How it should not be solved
 Viewport vandalism

  34. None
  35. Project Mars
 Desktop first facelift

  36. None
  37. Project Venus
 Let’s launch in Israel

  38. None
  39. None
  40. Let’s talk about consistency
 Once again

  41. None
  42. None
  43. Hackathon Project 2014
 CSS Framework

  44. None
  45. None
  46. 
 “We built a CSS Framework. You should totally use

    it”
  47. Amount of Frontend Developer
 x 5

  48. 2015
 Let’s scale

  49. Graph 2015 
 Way better, but still…

  50. Specificity graph 2012
 The specificity wall

  51. Graph 2015 
 Way better, but still…

  52. Houston, we have a problem
 It doesn’t scale anymore

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

    Icons
  54. Title
 subtitle

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

    ALL!
  56. Christoph Reinartz - @pistenprinz #3 Too much CSS How many

    Selectors do you use? ALL!
  57. #3 Desktop first approach Oh you poor mobile devices

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

    shades of grey
  59. None
  60. Title
 subtitle

  61. Title
 subtitle

  62. Title
 subtitle

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

    of truth
  64. Title
 subtitle

  65. Title
 subtitle

  66. Title
 subtitle

  67. Title
 subtitle

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

    span
  69. #7 Too much confusion in code Scary comments

  70. Title
 subtitle

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

    live system
  72. None
  73. Design Systems to the rescue
 An Overview

  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
  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
  76. Title
 subtitle

  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
  78. Title
 subtitle

  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
  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
  81. Design Systems
 Examples

  82. None
  83. None
  84. None
  85. None
  86. Design System Why do we need it?

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

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

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

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

  91. Digital Design UI Engineering

  92. Design Development HTML CSS JavaScript

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

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

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

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

    X
  97. None
  98. 
 “We built a Design System for you w/o knowing

    your needs. You should totally use it”
  99. The initial version 
 Simple but it worked

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

    Grid
  101. None
  102. Good news everyone
 We do it differently now - The

    sales pitch
  103. None
  104. None
  105. None
  106. None
  107. The roll-out Vision handling
 The verbose version

  108. The roll-out Vision
 Filtered by Designers

  109. Title
 subtitle Project Ironman Large scale CSS refactoring Christoph Reinartz

    - ScotlandCSS - Edinburgh, June 1st 2016
  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)
  111. From Assetic to Node
 Webpack, ES6, post CSS

  112. Graph 2015 
 Way better, but still…

  113. New CSS base refactored CSS Graph after Ironman
 Improved curve…

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

  115. Title
 subtitle

  116. Title
 subtitle

  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
  118. <3 Sorted the colors Established and introduce a color palette

  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
  120. Title
 subtitle Now 2015

  121. Amount of Frontend Developer
 x 10

  122. 2016
 From refactoring to rebuilding to roll-out

  123. Refactoring first
 Disposable refactoring of old code

  124. Step 1 New codebase integrated Old layout kept because don’t

    release what you haven’t tested
  125. Step 2 Iterate new versions of UI components A new

    Search Result component based on the new base
  126. Rebuilding later
 Relaunch a few weeks after the refactoring

  127. Release and test
 And qualify it

  128. Step 3 Go to step 2 Rebuild more Components

  129. Rebuild more components
 Relaunch a few weeks after the refactoring

  130. None
  131. </3 What about a package? Copy & paste didn’t scale

  132. None
  133. </3 Let’s remove this CSS class Famous last words

  134. pull-left vs. fl-leading
 nobody uses this old thing, or? deprecated

    class non - deprecated class 97% 3%
  135. <3 Code Styleguide And Documentation

  136. None
  137. None
  138. None
  139. None
  140. None
  141. None
  142. 
 “We build a Design System together. Everybody can use

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

  144. Title
 subtitle

  145. 2017
 From refactoring to rebuilding to roll-out

  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
  147. 100% Pattern lab loader reusable shared templates 100%

  148. CSS Components to be open sourced soon 80%

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

  150. daisy-and-trivi applications

  151. daisy-and-trivi applications trivago core patterns

  152. daisy-and-trivi applications trivago core patterns

  153. None
  154. None
  155. None
  156. None
  157. None
  158. daisy-and-trivi applications trivago core patterns

  159. Design System Metrics
 Some data

  160. 
 “We saved two weeks when using the System” *

    *) Communication Team
  161. 
 16 contributors

  162. 
 12 teams using it

  163. 
 15 applications using it

  164. Title
 subtitle

  165. 
 5 external companies using it

  166. 
 ~50% reduced bug reports

  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
  168. Christoph Reinartz UI/UX Engineer @trivago
 
 Web: www.creinartz.de
 twitter: @pistenprinz