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.

Christoph Reinartz

May 23, 2017
Tweet

More Decks by Christoph Reinartz

Other Decks in Technology

Transcript

  1. Design Systems Engineering

    Scaling User Interfaces


    Christoph Reinartz | @pistenprinz |

    View full-size slide

  2. Based on a true story

    Share what you’ve learned

    View full-size slide

  3. Do what works for you

    This is what worked for us

    View full-size slide

  4. 2012

    Let the show begin

    View full-size slide

  5. Legacy PHP Framework

    Come with us they said

    View full-size slide

  6. JavaScript

    Make sure to `onclick` every DOM node

    View full-size slide

  7. CSS.inc

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

    View full-size slide

  8. Specificity graph 2012

    The specificity wall

    View full-size slide

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

  10. Symfony Framework

    Twig templating & Assetic

    View full-size slide

  11. jQuery

    to plugins

    View full-size slide

  12. SCSS

    Pre-processing introduced - Ruby Sass

    View full-size slide

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

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

    Part 2 - Specificity 254

    View full-size slide

  14. Amount of Frontend Developer

    x 1

    View full-size slide

  15. 2013 - 2014

    The first steps

    View full-size slide

  16. Project Moon

    Flat Design facelift

    View full-size slide

  17. The first guidelines

    I make my own rules

    View full-size slide

  18. HTML5 101

    Fight the divitis

    View full-size slide

  19. Templating guidelines

    Naming and structure

    View full-size slide

  20. CSS Tipps

    2 simple rules (Nesting, Naming) + best practices

    View full-size slide

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

    View full-size slide

  22. Mobile traffic

    D’oh

    View full-size slide

  23. How it should not be solved

    Viewport vandalism

    View full-size slide

  24. Project Mars

    Desktop first facelift

    View full-size slide

  25. Project Venus

    Let’s launch in Israel

    View full-size slide

  26. Let’s talk about consistency

    Once again

    View full-size slide

  27. Hackathon Project 2014

    CSS Framework

    View full-size slide


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

    View full-size slide

  29. Amount of Frontend Developer

    x 5

    View full-size slide

  30. 2015

    Let’s scale

    View full-size slide

  31. Graph 2015 

    Way better, but still…

    View full-size slide

  32. Specificity graph 2012

    The specificity wall

    View full-size slide

  33. Graph 2015 

    Way better, but still…

    View full-size slide

  34. Houston, we have a problem

    It doesn’t scale anymore

    View full-size slide

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

    View full-size slide

  36. Title

    subtitle

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. Title

    subtitle

    View full-size slide

  42. Title

    subtitle

    View full-size slide

  43. Title

    subtitle

    View full-size slide

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

    View full-size slide

  45. Title

    subtitle

    View full-size slide

  46. Title

    subtitle

    View full-size slide

  47. Title

    subtitle

    View full-size slide

  48. Title

    subtitle

    View full-size slide

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

    View full-size slide

  50. #7
    Too much confusion in code
    Scary comments

    View full-size slide

  51. Title

    subtitle

    View full-size slide

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

    View full-size slide

  53. Design Systems to the rescue

    An Overview

    View full-size slide

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

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

  56. Title

    subtitle

    View full-size slide

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

  58. Title

    subtitle

    View full-size slide

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

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

  61. Design Systems

    Examples

    View full-size slide

  62. Design System
    Why do we need it?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  67. Digital Design UI Engineering

    View full-size slide

  68. Design Development
    HTML
    CSS
    JavaScript

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

  74. The initial version 

    Simple but it worked

    View full-size slide

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

    View full-size slide

  76. Good news everyone

    We do it differently now - The sales pitch

    View full-size slide

  77. The roll-out Vision handling

    The verbose version

    View full-size slide

  78. The roll-out Vision

    Filtered by Designers

    View full-size slide

  79. Title

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

    View full-size slide

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

  81. From Assetic to Node

    Webpack, ES6, post CSS

    View full-size slide

  82. Graph 2015 

    Way better, but still…

    View full-size slide

  83. New CSS
    base
    refactored CSS
    Graph after Ironman

    Improved curve…

    View full-size slide

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

    View full-size slide

  85. Title

    subtitle

    View full-size slide

  86. Title

    subtitle

    View full-size slide

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

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

    View full-size slide

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

  90. Title

    subtitle
    Now
    2015

    View full-size slide

  91. Amount of Frontend Developer

    x 10

    View full-size slide

  92. 2016

    From refactoring to rebuilding to roll-out

    View full-size slide

  93. Refactoring first

    Disposable refactoring of old code

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  96. Rebuilding later

    Relaunch a few weeks after the refactoring

    View full-size slide

  97. Release and test

    And qualify it

    View full-size slide

  98. Step 3
    Go to step 2
    Rebuild more Components

    View full-size slide

  99. Rebuild more components

    Relaunch a few weeks after the refactoring

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  102. pull-left vs. fl-leading

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

    View full-size slide

  103. <3
    Code Styleguide
    And Documentation

    View full-size slide


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

    View full-size slide

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

    View full-size slide

  106. Title

    subtitle

    View full-size slide

  107. 2017

    From refactoring to rebuilding to roll-out

    View full-size slide

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

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

    View full-size slide

  110. CSS Components
    to be open sourced soon
    80%

    View full-size slide

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

    View full-size slide

  112. daisy-and-trivi applications

    View full-size slide

  113. daisy-and-trivi applications
    trivago core patterns

    View full-size slide

  114. daisy-and-trivi applications
    trivago core patterns

    View full-size slide

  115. daisy-and-trivi applications
    trivago core patterns

    View full-size slide

  116. Design System Metrics

    Some data

    View full-size slide


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

    View full-size slide


  118. 16 contributors

    View full-size slide


  119. 12 teams using it

    View full-size slide


  120. 15 applications using it

    View full-size slide

  121. Title

    subtitle

    View full-size slide


  122. 5 external companies using it

    View full-size slide


  123. ~50% reduced bug reports

    View full-size slide

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

  125. Christoph Reinartz
    UI/UX Engineer @trivago


    Web: www.creinartz.de

    twitter: @pistenprinz


    View full-size slide