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.

030423e4497440d3286862d2106b8eba?s=128

Christoph Reinartz

May 13, 2019
Tweet

Transcript

  1. Lessons learned from running a Design System … or how

    to escape a filter bubble @pistenprinz
  2. Where it all began

  3. None
  4. Welcome to trivago

  5. “It will be fun” - they said

  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 A first directory listing…
  7. -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
  8. .inc files Specificity graph 2012

  9. View source …

  10. None
  11. None
  12. Getting inspired

  13. The first conference

  14. None
  15. Anticipating interest

  16. None
  17. In the meantime…

  18. None
  19. Title
 subtitle

  20. Title
 subtitle

  21. Title
 subtitle

  22. colours? trivago!

  23. Can you add a new icon?

  24. Title
 subtitle

  25. Can you change that CSS file?

  26. None
  27. Why is this build with Bootstrap?

  28. None
  29. Proof of concept

  30. The master file…

  31. None
  32. It’s 500 megabyte

  33. None
  34. None
  35. A minimum viable Design System in code…

  36. Form Elements Buttons Navigation Teaser Header Footer Typography Icons Tabs

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

    Grid
  38. None
  39. None
  40. A minimum viable Design System in code…

  41. Scope creep

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

  43. None
  44. None
  45. Scaling and roll-out

  46. None
  47. We promised…

  48. We delivered…

  49. We qualified…

  50. 12 months later…

  51. None
  52. None
  53. None
  54. Complexity • Documentation

  55. Complexity • Documentation • Release process

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

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

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

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

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

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

    • Maintenance • Delivery & Integration • Stakeholders • Developer Experience • Designer Experience
  62. 15 consumers

  63. None
  64. Teams and people

  65. None
  66. The centralised team

  67. None
  68. What’s really needed…

  69. None
  70. The reality and the value chain…

  71. None
  72. Global functions Hotelsearch Marketing Advertiser

  73. Global functions Hotelsearch Marketing Advertiser you are here

  74. Acceptance rate and demand…

  75. Global functions Hotelsearch Marketing Advertiser

  76. Global functions Hotelsearch Marketing Advertiser you are here

  77. None
  78. None
  79. None
  80. Learning

  81. Aim high Start small

  82. Overconfidence effect

  83. Filter Bubble

  84. Followership vs. Leadership

  85. Decision making and thinking errors

  86. Availability bias

  87. Confirmation 
 Bias

  88. Sunk cost fallacy

  89. What’s left

  90. Success or failure?

  91. Consistency

  92. None
  93. Mindset

  94. None
  95. Raise the bar

  96. Christoph Reinartz @pistenprinz