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.

Christoph Reinartz

March 26, 2017
Tweet

More Decks by Christoph Reinartz

Other Decks in Technology

Transcript

  1. Rebuilding an aircraft on the fly

    Christoph Reinartz - @pistenprinz

    View full-size slide

  2. Title

    subtitle

    View full-size slide

  3. Design Systems

    An Overview

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  6. Title

    subtitle

    View full-size slide

  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

    View full-size slide

  8. Title

    subtitle

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  12. Resources II

    designsystems.curated.co

    View full-size slide

  13. Design Systems

    Examples

    View full-size slide

  14. Design System
    Why do we need it?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. Specificity graph 2012

    The specificity wall

    View full-size slide

  19. peaks at the beginning
    of the stylesheet
    Graph 2015 

    Way better, but still…

    View full-size slide

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

    View full-size slide

  21. Title

    subtitle

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. Title

    subtitle

    View full-size slide

  26. Title

    subtitle

    View full-size slide

  27. Title

    subtitle

    View full-size slide

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

    View full-size slide

  29. Title

    subtitle

    View full-size slide

  30. Title

    subtitle

    View full-size slide

  31. Title

    subtitle

    View full-size slide

  32. Title

    subtitle

    View full-size slide

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

    View full-size slide

  34. #7
    Too much confusion in code
    Scary comments

    View full-size slide

  35. Title

    subtitle

    View full-size slide

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

    View full-size slide

  37. Components
    Process
    UI Layer
    Styleguide
    Design 

    Language
    Documentation
    Assets
    UI Kit
    Design 

    Principles

    View full-size slide

  38. Title

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

    View full-size slide

  39. 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 full-size slide

  40. peaks at the beginning
    of the stylesheet
    Graph before Ironman

    Way better, but still…

    View full-size slide

  41. New CSS
    base
    refactored CSS
    Graph after Ironman

    Improved curve…

    View full-size slide

  42. Components
    Process
    CSS 

    Framework
    Styleguide
    Design 

    Language
    Documentation
    Assets
    UI Kit
    Design 

    Principles

    View full-size slide

  43. Processes & Integration
    Methodologies and people

    View full-size slide

  44. #
    Full-stack doesn’t scale
    That doesn’t mean you don’t need full stack devs

    View full-size slide

  45. Digital Design UI Engineering

    View full-size slide

  46. Design Development
    HTML
    CSS
    JavaScript

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  51. “We built a Design System based on
    our needs. You should totally use it”

    View full-size slide


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

    View full-size slide


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

    View full-size slide

  54. #
    Atomic Design
    An approach for modular interfaces

    View full-size slide

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

    View full-size slide

  56. Components
    Process
    UI Layer
    Styleguide
    Design 

    Language
    Documentation
    Assets
    UI Kit
    Design 

    Principles

    View full-size slide

  57. From refactoring to rebuilding

    A new Search Result component

    View full-size slide

  58. Refactoring first

    Disposable refactoring of old code

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. Rebuilding later

    Relaunch a few weeks after the refactoring

    View full-size slide

  62. Release and test

    And qualify it

    View full-size slide

  63. Step 3
    Go to step 2
    Rebuild more Components

    View full-size slide

  64. Rebuild more components

    Relaunch a few weeks after the refactoring

    View full-size slide

  65. <3
    Rolled-out flexbox modules
    Down with the floats

    View full-size slide

  66. float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float
    float

    View full-size slide

  67. Components
    Process
    UI Layer
    Styleguide
    Design 

    Language
    Documentation
    Assets
    UI Kit
    Design 

    Principles

    View full-size slide

  68. <3
    New Icon System
    From sprites to Inline-SVG

    View full-size slide

  69. Title

    subtitle

    View full-size slide

  70. Title

    subtitle

    View full-size slide

  71. Title

    subtitle

    View full-size slide

  72. Title

    subtitle

    View full-size slide

  73. Title

    subtitle

    View full-size slide

  74. 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 full-size slide

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

    View full-size slide

  76. 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 full-size slide

  77. Title

    subtitle
    Now
    2015

    View full-size slide

  78. Components
    Process
    UI Layer
    Styleguide
    Design 

    Language
    Documentation
    Assets
    UI Kit
    Design 

    Principles

    View full-size slide

  79. <3
    Code Styleguide
    And Documentation

    View full-size slide

  80. Components
    Process
    UI Layer
    Styleguide
    Design 

    Language
    Documentation
    Assets
    UI Kit
    Design 

    Principles

    View full-size slide

  81. Lessons learned
    What went wrong? And why?

    View full-size slide

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

    View full-size slide

  83. Title

    subtitle

    View full-size slide

  84. pull-left vs. fl-leading

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

    View full-size slide

  85. CSS deprecation handling

    Salesforce Sass-Deprecate

    View full-size slide

  86. 3
    Is the scope too big?
    There is no approach to rule them all

    View full-size slide

  87. The roll-out Vision handling

    The verbose version

    View full-size slide

  88. The roll-out Vision

    Filtered by Designers

    View full-size slide

  89. Admin Tools Hotelsearch Hotelmanager

    View full-size slide

  90. Admin Tools Hotelsearch Hotelmanager

    View full-size slide

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

    View full-size slide

  92. 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 full-size slide

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

    View full-size slide

  94. daisy-and-trivi applications

    View full-size slide

  95. daisy-and-trivi applications
    trivago core patterns

    View full-size slide

  96. daisy-and-trivi applications
    trivago core patterns

    View full-size slide

  97. daisy-and-trivi applications
    trivago core patterns

    View full-size slide

  98. Learning No.1
    Robustness principle
    “Be conservative in what you do, be liberal in what
    you accept from others”

    View full-size slide

  99. Learning No.2
    Don’t dictate technology
    Be pragmatic

    View full-size slide

  100. Design System Metrics

    Some data

    View full-size slide


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

    View full-size slide


  102. 16 contributors

    View full-size slide


  103. 12 teams using it

    View full-size slide


  104. 15 applications using it

    View full-size slide

  105. Title

    subtitle

    View full-size slide


  106. 5 external companies using it

    View full-size slide


  107. ~50% reduced bug reports

    View full-size slide

  108. Christoph Reinartz
    Team Lead UI/UX @trivago


    Web: www.creinartz.de

    twitter: @pistenprinz


    View full-size slide