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.

Transcript

1. Lessons learned from running a Design System … or how to escape a filter bubble @pistenprinz
2. Where it all began
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 …
12. Getting inspired
13. The first conference
15. Anticipating interest
17. In the meantime…
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?
27. Why is this build with Bootstrap?
29. Proof of concept
30. The master file…
32. It’s 500 megabyte
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
40. A minimum viable Design System in code…
41. Scope creep
42. How difficult can it be? Let’s go all in…
45. Scaling and roll-out
47. We promised…
48. We delivered…
49. We qualified…
50. 12 months later…
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
64. Teams and people
66. The centralised team
68. What’s really needed…
70. The reality and the value chain…
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
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
93. Mindset
95. Raise the bar
96. Christoph Reinartz @pistenprinz