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

030423e4497440d3286862d2106b8eba?s=128

Christoph Reinartz

October 29, 2016
Tweet

Transcript

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

  2. #NamingIsHard

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

  4. Christoph Reinartz - @pistenprinz Design Systems
 An Overview

  5. Components Process UI Layer Styleguide Design 
 Language Documentation Assets

    UI Kit Design 
 Principles
  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
  7. None
  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
  9. None
  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
  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
  12. Christoph Reinartz - @pistenprinz Resources I
 www.styleguides.io

  13. Christoph Reinartz - @pistenprinz Resources II
 designsystems.curated.co

  14. Christoph Reinartz - @pistenprinz Design Systems
 Examples

  15. Christoph Reinartz - @pistenprinz Google Material Design


  16. Christoph Reinartz - @pistenprinz Lightning Design System


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

    it?
  18. Christoph Reinartz - @pistenprinz #1 Establish design and code consistency

    Remove clutter in code code and design
  19. Christoph Reinartz - @pistenprinz #2 Improve code quality and maintainability

    Reduce technical debt
  20. Christoph Reinartz - @pistenprinz #3 Provide base for modern &

    sustainable UI rebuild Build modern applications fast
  21. Christoph Reinartz - @pistenprinz Specificity graph 2012
 The specificity wall

  22. None
  23. Christoph Reinartz - @pistenprinz peaks at the beginning of the

    stylesheet Graph 2015 
 Way better, but still…
  24. HTML5

  25. Christoph Reinartz - @pistenprinz #1 Sprites were out of control

    We built Frankenstein with Icons
  26. None
  27. Christoph Reinartz - @pistenprinz #2 Too much CSS How many

    Selectors do you use? ALL!
  28. Christoph Reinartz - @pistenprinz #3 Desktop first approach Oh you

    poor mobile devices
  29. Christoph Reinartz - @pistenprinz #4 Inconsistency and missing Styleguide Or

    how to create fifty shades of grey
  30. None
  31. None
  32. None
  33. None
  34. Christoph Reinartz - @pistenprinz #5 Repeat yourself 97 different footers

    - no single source of truth
  35. None
  36. None
  37. None
  38. None
  39. Christoph Reinartz - @pistenprinz #6 Overly complex CSS/DOM structure div,

    div, div, span, span, span
  40. Christoph Reinartz - @pistenprinz #7 Too much confusion in code

    Scary comments
  41. None
  42. Components Process UI Layer Styleguide Design 
 Language Documentation Assets

    UI Kit Design 
 Principles
  43. Project Ironman Large scale CSS refactoring Christoph Reinartz - ScotlandCSS

    - Edinburgh, June 1st 2016
  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
  45. Christoph Reinartz - @pistenprinz peaks at the beginning of the

    stylesheet Graph before Ironman
 Way better, but still…
  46. Christoph Reinartz - @pistenprinz New CSS base Adapted old UI

    components. Can now be easily rebuilt! SVG Graph after Ironman
 Improved curve…
  47. Components Process CSS Framework Styleguide Design 
 Language Documentation Assets

    UI Kit Design 
 Principles
  48. Christoph Reinartz - @pistenprinz Processes & Integration Methodologies and people

  49. Christoph Reinartz - @pistenprinz # Full-stack doesn’t scale That doesn’t

    mean you don’t need full stack devs
  50. Christoph Reinartz - @pistenprinz Digital Design UI Engineering

  51. Design Development HTML CSS JavaScript

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

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

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

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

    X
  56. Christoph Reinartz - @pistenprinz Atomic Design
 Modular User Inferfaces http://bradfrost.com/blog/post/atomic-design-in-one-gif/

  57. Components Process UI Layer Styleguide Design 
 Language Documentation Assets

    UI Kit Design 
 Principles
  58. Christoph Reinartz - @pistenprinz From refactoring to rebuilding
 A new

    Search Result component
  59. None
  60. None
  61. Christoph Reinartz - @pistenprinz Refactoring first
 Disposable refactoring of old

    code
  62. Christoph Reinartz - @pistenprinz Step 1 New codebase integrated Old

    layout kept because don’t release what you haven’t tested
  63. Christoph Reinartz - @pistenprinz Step 2 Iterate new versions of

    UI components A new Search Result component based on the new base
  64. Christoph Reinartz - @pistenprinz Rebuilding later
 Relaunch a few weeks

    after the refactoring
  65. Christoph Reinartz - @pistenprinz Release and test
 And qualify it

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

    Rebuild more Components
  67. Christoph Reinartz - @pistenprinz Rebuild more components
 Relaunch a few

    weeks after the refactoring
  68. Christoph Reinartz - @pistenprinz

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

    the floats
  70. None
  71. float float float float float float float float float float

    float float float float float float float
  72. None
  73. Components Process UI Layer Styleguide Design 
 Language Documentation Assets

    UI Kit Design 
 Principles
  74. Christoph Reinartz - @pistenprinz From Sprites to Inline-SVG
 In less

    than a year
  75. None
  76. None
  77. None
  78. None
  79. None
  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
  81. None
  82. Christoph Reinartz - @pistenprinz Showcase 3
 HTTP requests

  83. Christoph Reinartz - @pistenprinz Showcase 3
 HTTP requests

  84. Components Process UI Layer Styleguide Design 
 Language Documentation Assets

    UI Kit Design 
 Principles
  85. Christoph Reinartz - @pistenprinz <3 Sorted the colors Established and

    introduce a color palette
  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
  87. Now 2015

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

  89. None
  90. None
  91. None
  92. Components Process UI Layer Styleguide Design 
 Language Documentation Assets

    UI Kit Design 
 Principles
  93. Christoph Reinartz - @pistenprinz Lessons learned What went wrong? And

    why?
  94. Christoph Reinartz - @pistenprinz </3 Let’s remove this CSS class

    Famous last words
  95. None
  96. Christoph Reinartz - @pistenprinz pull-left vs. fl-leading
 nobody uses this

    old thing, or? deprecated class non - deprecated class 97% 3%
  97. Christoph Reinartz - @pistenprinz CSS deprecation handling
 Salesforce Sass-Deprecate

  98. Christoph Reinartz - @pistenprinz </3 Is the scope too big?

    So much diversity in front-end stacks
  99. Christoph Reinartz - @pistenprinz The roll-out Vision handling
 The verbose

    version
  100. Christoph Reinartz - @pistenprinz The roll-out Vision
 Filtered by Designers

  101. Admin Tools Hotelsearch Hotelmanager

  102. Admin Tools Hotelsearch Hotelmanager

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