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

Rebuilding an aircraft on the fly

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.

030423e4497440d3286862d2106b8eba?s=128

Christoph Reinartz

March 26, 2017
Tweet

Transcript

  1. Rebuilding an aircraft on the fly
 Christoph Reinartz - @pistenprinz

  2. Title
 subtitle

  3. Design Systems
 An Overview

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

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

  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
  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
  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.
  12. Resources II
 designsystems.curated.co

  13. Design Systems
 Examples

  14. None
  15. None
  16. None
  17. None
  18. Design System Why do we need it?

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

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

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

    modern applications fast
  22. Specificity graph 2012
 The specificity wall

  23. None
  24. peaks at the beginning of the stylesheet Graph 2015 


    Way better, but still…
  25. HTML5

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

    Icons
  27. Title
 subtitle

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

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

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

    shades of grey
  31. None
  32. Title
 subtitle

  33. Title
 subtitle

  34. Title
 subtitle

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

    of truth
  36. Title
 subtitle

  37. Title
 subtitle

  38. Title
 subtitle

  39. Title
 subtitle

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

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

  42. Title
 subtitle

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

    live system
  44. None
  45. Components Process UI Layer Styleguide Design 
 Language Documentation Assets

    UI Kit Design 
 Principles
  46. Title
 subtitle Project Ironman Large scale CSS refactoring Christoph Reinartz

    - ScotlandCSS - Edinburgh, June 1st 2016
  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)
  48. peaks at the beginning of the stylesheet Graph before Ironman


    Way better, but still…
  49. New CSS base refactored CSS Graph after Ironman
 Improved curve…

  50. Components Process CSS 
 Framework Styleguide Design 
 Language Documentation

    Assets UI Kit Design 
 Principles
  51. Processes & Integration Methodologies and people

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

    full stack devs
  53. Digital Design UI Engineering

  54. Design Development HTML CSS JavaScript

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

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

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

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

    X
  59. None
  60. 
 “We built a Design System based on our needs.

    You should totally use it”
  61. None
  62. 
 “We built a Design System for you w/o knowing

    your needs. You should totally use it”
  63. None
  64. 
 “We built a Design System together. Everybody can use

    it”
  65. # Atomic Design An approach for modular interfaces

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

  67. Components Process UI Layer Styleguide Design 
 Language Documentation Assets

    UI Kit Design 
 Principles
  68. From refactoring to rebuilding
 A new Search Result component

  69. Refactoring first
 Disposable refactoring of old code

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

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

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

  73. Release and test
 And qualify it

  74. Step 3 Go to step 2 Rebuild more Components

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

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

  78. None
  79. float float float float float float float float float float

    float float float float float float float
  80. None
  81. Components Process UI Layer Styleguide Design 
 Language Documentation Assets

    UI Kit Design 
 Principles
  82. <3 New Icon System From sprites to Inline-SVG

  83. Title
 subtitle

  84. Title
 subtitle

  85. Title
 subtitle

  86. Title
 subtitle

  87. Title
 subtitle

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

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

  92. None
  93. Components Process UI Layer Styleguide Design 
 Language Documentation Assets

    UI Kit Design 
 Principles
  94. <3 Code Styleguide And Documentation

  95. None
  96. None
  97. None
  98. None
  99. None
  100. None
  101. Components Process UI Layer Styleguide Design 
 Language Documentation Assets

    UI Kit Design 
 Principles
  102. Lessons learned What went wrong? And why?

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

  104. Title
 subtitle

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

    class non - deprecated class 97% 3%
  106. CSS deprecation handling
 Salesforce Sass-Deprecate

  107. </3 Is the scope too big? There is no approach

    to rule them all
  108. The roll-out Vision handling
 The verbose version

  109. The roll-out Vision
 Filtered by Designers

  110. Admin Tools Hotelsearch Hotelmanager

  111. Admin Tools Hotelsearch Hotelmanager

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

    package composer package _patterns _patterns
  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
  114. </3 Dependencies From monolith to packages to mono-repo

  115. daisy-and-trivi applications

  116. daisy-and-trivi applications trivago core patterns

  117. daisy-and-trivi applications trivago core patterns

  118. None
  119. None
  120. None
  121. None
  122. None
  123. None
  124. daisy-and-trivi applications trivago core patterns

  125. Learning No.1 Robustness principle “Be conservative in what you do,

    be liberal in what you accept from others”
  126. Learning No.2 Don’t dictate technology Be pragmatic

  127. Design System Metrics
 Some data

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

    *) Communication Team
  129. 
 16 contributors

  130. 
 12 teams using it

  131. 
 15 applications using it

  132. Title
 subtitle

  133. 
 5 external companies using it

  134. 
 ~50% reduced bug reports

  135. Christoph Reinartz Team Lead UI/UX @trivago
 
 Web: www.creinartz.de
 twitter:

    @pistenprinz