From zero to Cosmos: a journey to a multi-platform design system at Badoo

This is the story of a Design System called Cosmos, that started as a small style guide and soon became a core element in the design and development process of a product with 400 million users. Appreciated by both developers and designers, with strong buy-in from managers and leads, today Cosmos has become a complex project of UI unification that involves multiple platforms, multiple brands, and multiple products. A success story - with visible metrics that confirm its impact - with a lot of lessons learned along the way.

This is the updated version of the previous talk: https://speakerdeck.com/didoo/from-zero-to-cosmos

Video of the talk: https://www.youtube.com/watch?v=Dl5u1gRcsos

Transcript

1. From zero to cosmos FRONT-END TEAM Cristiano Rastelli a journey to a multi-platform design system at Badoo
2. http://rosenfeldmedia.com/books/storymapping/
3. beginning evolution crisis enlightenment nirvana We are here
4. The full story • From zero to Cosmos — Part #1 / #2 / #3
 https://badootech.badoo.com/from-zero-to-cosmos-part-1-2d080fe35bf2
 https://badootech.badoo.com/from-zero-to-cosmos-part-2-97929e13f839
 https://badootech.badoo.com/from-zero-to-cosmos-part-3-95e2c98c45a6 • Systemantics — a review of the book
 https://medium.com/@didoo/systemantics-a778c4247cbb • How to manage your Design Tokens with Style Dictionary
 https://medium.com/@didoo/how-to-manage-your-design-tokens-with-style-dictionary-98c795b938aa • Generating multi-brand multi-platform icons with Sketch and a Node.js script —  Part #1 / #2
 https://badootech.badoo.com/generating-multi-brand-multi-platform-icons-with-sketch-and-a-node-js-script-part1-82f438c7e16c
 https://badootech.badoo.com/generating-multi-brand-multi-platform-icons-with-sketch-and-a-node-js-script-part2-8d02e8bb915a • Measuring the Impact of a Design System
 https://medium.com/@didoo/measuring-the-impact-of-a-design-system-7f925af090f7
5. Dramatis Personae
6. Cristiano Rastelli @areaweb FRONT-END TEAM @webdeldn
7. team.badoo.com
9. 108 product 280 engineering 580 15 design 22 Front-end 50 ios / Android We’re hiring!
10. Under the radar where everything started
11. No components No atomic design
12. Global declarations
13. Copy&paste, no Modularisation
14. design handoffs
15. decision:
 we need a style guide
16. started small & lean working incrementally one component at a time
 with little overhead
17. Mobile Web style guide
19. Living Styleguide
20. Visual Regression Testing
21. diff AFTER before https://speakerdeck.com/nikhilverma/visual-regression-testing-from-a-tool-to-a-process
22. Deliver value* * business value, from day one
23. me, a pain in the ___ * * *
25. it gets noticed where I reaped the fruits of my labour
26. visible/tangible improvements • modularisation of components • reusability of code & components • speed of development • better visual consistency & overall quality
27. pitch to head of design for a shared component Library (between Mobile & desktop web)
28. The grand plan
32. the "re-think" project here come the dragons
33. BIGGER THAN DATING https://www.behance.net/gallery/55344175/New-Badoo-identity
36. 2009 2013 2017
40. In theory the perfect use case for a style guide
41. In practice...
42. "There is no time !"
43. master RETHINK
44. the style guide was more and more in disarray, not maintained
45. components were broken or missing
46. VRT tests were broken
47. VRT tests were not added Rethink project
48. living Styleguide dead
49. it was a personal failure
50. I have not been able
 to communicate
 the value, the importance &
 the real potential of a style guide
51. Why keep it alive ?
52. not everything is lost where the “grand plan” takes place
53. https://medium.com/@didoo/systemantics-a778c4247cbb
55. "Failure to function as expected
 is an intrinsic feature
 of the systems".
56. a crucial email message
59. This is a designer telling (pushing) a front-end developer 
 to build a design system he didn't build a fence to protect
 his territory, he didn't say 
 "this is design, stay out of here !” He was understanding the value
60. a turning-point meeting “I want a Design System for all our mobile apps. 
 A style guide built together with the designers,
 based on the optimal / new / upcoming designs
 to serve as visual reference for the developers.” Sasha Grishin, Head of Design
61. decision:
 a design system for
 all our mobile apps*
 * desktop web is out (for now)
62. last year where things have taken off
63. finding a name
64. Space conquerors monument / Cosmonautics Museum in Moscow
65. Cosmos from Latinized form of Greek kosmos
 "order, good order, orderly arrangement" A complex orderly self-inclusive system,
 an orderly harmonious systematic universe.
68. the technical stack
69. design tokens { "button": { "border_radius": { "value": "{base.border_radius.value}", "type": "size" }, "border_width": { "value": “1px", "type": "size" } } }
70. https://amzn.github.io/style-dictionary/ Design decisions Tokens Data source docS system Tokens (JSON) Tokens (XML) VARIABLES (SASS) Tokens (PLIST) iOS Android web COSMOS VARIABLES (SASS) EMAIL
72. +
73. a great collaboration
74. team structure https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0 solitary “federated” centralised
76. "We can't create an edge case for this" Pavel shumakov, Badoo designer
77. before Product Design Development QA
78. after Product Design Development QA Cosmos
79. Blocker (or bottleneck?) Product Design Development QA Cosmos
80. components breakdown
81. Cosmos celebration
82. the native apps
 & design teams
83. Badoo UI KIT & GALLERy
84. Badoo UI KIT & GALLERy
85. UI libraries in Sketch
86. Today where are we now?
87. show time !
88. http://cosmos/
104. the human part
105. everyone can see only a small part
106. It's not in cosmos!!!
107. The real "story" “dragons” “dragons” “dragons”
108. The invisible
 human part
 of our daily jobs
109. This! this! This again & again! https://twitter.com/robinrendle/status/1113897759206072320
110. the "Atomic" problem
111. “Everything is a component.” Jina Anne, Nathan Curtis, Trent Walton, 
 Adam Morse, and many others
112. quark atom molecule organism layout other
113. flat Folders structure DESIGN TOKENS (JSON) UI COMPONENTS (React) STYLE GUIDE (React Web App)
114. we tend to have two distinct
 kind of components: pure layout & content decoration
115. “Layout” Composition “Content”
116. when in doubt, break down
 a component * Don't go “up” (using inheritance), or “sideways” (trying to cover too much)
117. The complexity is in the connections http://www.didoo.net/2015/07/modules-components-and-systems/
118. what metrics to use ?
119. Components Jul 2017 apr 2019 extrasmall 2 15 small 1 13 medium 2 10 large 1 5 extralarge 0 4 overall* 9 167 * components + subcomponents LOC - components/jsx 204 8075 LOC - components/SCSS 529 5851 LOC - WEBSITE/jsx 479 19294
120. Visual Regression Tests - Number of snapshots
121. The impact of Cosmos https://medium.com/@didoo/measuring-the-impact-of-a-design-system-7f925af090f7
122. git log --stat --reverse --date=short -- 'src/css/*.less' > ~/data-raw/logs_less.txt
124. ...And what about the users ? https://twitter.com/markdalgleish/status/1018760819104890880
125. looking forward what are the challenges we’re facing
126. how do you design a
 multi-product & multi-platform feature ?
127. What makes something
 "On-BranD" ?
128. The right balance BRAND IDENTITY COHERENCE REUSABILITY CONSISTENCY
129. how do we know
 that something "on-brand"
 is adding real value for the user ?
130. example: date of birth picker To continue you need to fill this forms D M D M Y Y Y Y D M D M Y Y Y Y 1 0 2 4 1 8 9 4 1 M D M Y Y Y Y Chappy Day Month Year 1 D M M Y Y Y Y Day Month Year D D M M Y Y Y Y Day Month Year 1 7 0 6 1 9 6 2 You must be over 55 to use Lumen 1 7 0 6 1 9 6 2 D D Day M M Month Y Y Y Y Year D D Day M M Month Y Y Y Y Year 1 D Day M M Month Y Y Y Y Year 1 4 Day 0 5 Month 1 9 9 3 Year 1 D You must be over 18 to use Badoo M M Y Y Y Y D D You can't be younger than 13 M D M Y Y Y Y 1 M 0 D 4 M 5 Y 1 Y 9 Y 9 Y 3 1 M D M Y Y Y Y Y D M Y M Y Y Day Month Year D Y D M Y M Y Y You must be over 18 to use Bumble D 2 7 0 1 6 9 2 Day Month Year 1 Y D M Y M Y Y Day Month Year 1 Bumble Badoo Quack Lumen
131. one design system, but...
 how many libraries ?
132. https://speakerdeck.com/yeseniaperezcruz/building-flexible-design-systems
133. how much of
 the User Interface
 should be covered?
134. " What can be reasonably left out " https://twitter.com/resmini/status/912373274323103751
135. conclusions lessons learned on this journey
136. it takes time to have buy in be patient (and don't give up!)
137. you can't push change you have to deliver value first
138. be prepared to fail because every system FAILs, it's its nature
139. learn from the others But then make your choices
140. A synthetic / approximate MEASURE IS BETTER T HAN NO MEASURE
141. "Nothing is particularly hard
 if you divide it in small jobs."
 Henry Ford Manifacturer
142. Thanks cristiano rastelli FRONT-END TEAM didoo . net / @areaweb