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

Lessons learned from running a Design System or How to escape a filter bubble

Lessons learned from running a Design System or How to escape a filter bubble

Inspired by Brad Frost's talk about Atomic Design in 2013 at beyond tellerrand Christoph went back to trivago with the mission to completely change the way they deal with developing and designing the user interfaces for our products. From changing the mindset on how to approach Frontend Development and Design to refactoring our whole CSS codebase (know as Project Ironman) to introducing the first version of a Design System in 2015. In this talk Christoph shares learning, successes and failures during the introduction, roll-out and maintenance of the Design System. Christoph will touch on collaboration, fast changing environments, biases and technical requirements. A journey from ups and downs and the result of craving their own path and deprecating their Pattern Library while still having achieved the original mission to change the mindset around UI Engineering.

Christoph Reinartz

May 13, 2019
Tweet

More Decks by Christoph Reinartz

Other Decks in Technology

Transcript

  1. Lessons learned from
    running a Design
    System
    … or how to escape a filter bubble
    @pistenprinz

    View full-size slide

  2. Where it all began

    View full-size slide

  3. Welcome to trivago

    View full-size slide

  4. “It will be fun”
    - they said

    View full-size slide

  5. -rw-r--r-- 2487 Nov 20 13:17 main.inc
    -rw-r--r-- 311 Nov 20 13:17 styles.inc
    -rw-r--r-- 713 Nov 20 13:17 seo.inc
    -rw-r--r-- 3814 Nov 20 13:17 dealform.inc
    A first directory listing…

    View full-size slide

  6. -rw-r--r-- 2487 Nov 20 13:17 main.inc
    -rw-r--r-- 311 Nov 20 13:17 styles.inc
    -rw-r--r-- 713 Nov 20 13:17 seo.inc
    -rw-r--r-- 3814 Nov 20 13:17 dealform.inc
    .inc files

    View full-size slide

  7. .inc files Specificity graph 2012

    View full-size slide

  8. View source …

    View full-size slide

  9. Getting inspired

    View full-size slide

  10. The first
    conference

    View full-size slide

  11. Anticipating interest

    View full-size slide

  12. In the meantime…

    View full-size slide

  13. Title

    subtitle

    View full-size slide

  14. Title

    subtitle

    View full-size slide

  15. Title

    subtitle

    View full-size slide

  16. colours? trivago!

    View full-size slide

  17. Can you add a new icon?

    View full-size slide

  18. Title

    subtitle

    View full-size slide

  19. Can you change that CSS file?

    View full-size slide

  20. Why is this build with Bootstrap?

    View full-size slide

  21. Proof of concept

    View full-size slide

  22. The master file…

    View full-size slide

  23. It’s 500 megabyte

    View full-size slide

  24. A minimum viable Design System in code…

    View full-size slide

  25. Form Elements
    Buttons
    Navigation
    Teaser
    Header
    Footer
    Typography
    Icons
    Tabs
    Grid

    View full-size slide

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

    View full-size slide

  27. A minimum viable Design System in code…

    View full-size slide

  28. How difficult can it be? Let’s go all in…

    View full-size slide

  29. Scaling and roll-out

    View full-size slide

  30. We promised…

    View full-size slide

  31. We delivered…

    View full-size slide

  32. We qualified…

    View full-size slide

  33. 12 months later…

    View full-size slide

  34. Complexity
    • Documentation

    View full-size slide

  35. Complexity
    • Documentation
    • Release process

    View full-size slide

  36. Complexity
    • Documentation
    • Release process
    • Linting and quality

    View full-size slide

  37. Complexity • Documentation
    • Release process
    • Linting and quality
    • Maintenance

    View full-size slide

  38. Complexity • Documentation
    • Release process
    • Linting and quality
    • Maintenance
    • Delivery & Integration

    View full-size slide

  39. Complexity
    • Documentation
    • Release process
    • Linting and quality
    • Maintenance
    • Delivery & Integration
    • Stakeholders

    View full-size slide

  40. Complexity
    • Documentation
    • Release process
    • Linting and quality
    • Maintenance
    • Delivery & Integration
    • Stakeholders
    • Developer Experience

    View full-size slide

  41. Complexity
    • Documentation
    • Release process
    • Linting and quality
    • Maintenance
    • Delivery & Integration
    • Stakeholders
    • Developer Experience
    • Designer Experience

    View full-size slide

  42. 15 consumers

    View full-size slide

  43. Teams and people

    View full-size slide

  44. The centralised team

    View full-size slide

  45. What’s really needed…

    View full-size slide

  46. The reality and the value chain…

    View full-size slide

  47. Global functions
    Hotelsearch
    Marketing
    Advertiser

    View full-size slide

  48. Global functions
    Hotelsearch
    Marketing
    Advertiser
    you are
    here

    View full-size slide

  49. Acceptance rate and demand…

    View full-size slide

  50. Global functions
    Hotelsearch
    Marketing
    Advertiser

    View full-size slide

  51. Global functions
    Hotelsearch
    Marketing
    Advertiser
    you are
    here

    View full-size slide

  52. Aim high
    Start small

    View full-size slide

  53. Overconfidence effect

    View full-size slide

  54. Filter Bubble

    View full-size slide

  55. Followership vs. Leadership

    View full-size slide

  56. Decision making and thinking errors

    View full-size slide

  57. Availability bias

    View full-size slide

  58. Confirmation 

    Bias

    View full-size slide

  59. Sunk cost fallacy

    View full-size slide

  60. What’s left

    View full-size slide

  61. Success or failure?

    View full-size slide

  62. Raise the bar

    View full-size slide

  63. Christoph Reinartz
    @pistenprinz

    View full-size slide