From Zero to Cosmos

The unabridged story of how a small style guide that was first introduced under the radar, became so appreciated by both developers and designers that it made its way to become a complex project of unification - a design system called Cosmos.

## This talk has been presented at Konect Design System meetup in London ##

Read the full transcript here:
- Part #1: https://badootech.badoo.com/from-zero-to-cosmos-part-1-2d080fe35bf2
- Part #2: https://badootech.badoo.com/from-zero-to-cosmos-part-2-97929e13f839
- Part #3
: https://badootech.badoo.com/from-zero-to-cosmos-part-3-95e2c98c45a6

Transcript

1. From zero to cosmos MOBILE WEB TEAM Cristiano Rastelli DIDOO.NET / @AREAWEB LONDON - 26 OCT 2017
2. http://rosenfeldmedia.com/books/storymapping/
3. beginning evolution crisis enlightenment nirvana We are here
4. Dramatis Personae
5. Cristiano Rastelli didoo . net / @areaweb Mobile Web Team @webdeldn webdeldn.eventbrite.com
6. team.badoo.com
7. 87 product 250 engineering 413 12 design 12 mobile web 12 desktop web 33 ios / Android
8. Under the radar where everything started
9. No components No atomic design
10. Global declarations
11. Copy&paste, no Modularisation
12. design handoffs
13. decision:
 we need a style guide
14. started small & lean working incrementally one component at a time
 with little overhead
15. Mobile Web style guide
17. Living Styleguide
18. Visual Regression Testing
19. diff AFTER before https://speakerdeck.com/nikhilverma/visual-regression-testing-from-a-tool-to-a-process
20. Deliver value* * business value, from day one
21. me, a pain in the ___ * * *
23. It's a tool
24. ... but Don't make it your* tool ! * let other people help and contribute, even if they will “break” it
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. shared component Library (between Mobile & desktop web)
28. The pitch
29. problems we're trying to solve • Copy & Paste • code duplication & non re-usability • Small differences & inconsistencies • Obsolescence • No holistic view
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 a front-end developer to build a design system
60. he wasn't building a wall to protect his territory, saying 
 "this is design, stay out of here !"
61. He was understanding the value
62. decision:
 seize the moment to not lose the designers
63. "When can we see something?" Sasha Grishin, Head of Design - Jun 2017
64. a turning-point meeting
66. decision:
 a design system for
 all our mobile apps*
 * desktop web is out (for now)
67. decision: detach the design system
 from the codebase
68. https://twitter.com/nathanacurtis/status/918257735766028289
69. The grand plan
73. the quest for the holy grail
74. cross-platform,
 cross-disciplinary
 design systems https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660
75. cross-platform code
 as the source of truth https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660
76. https://markdalgleish.github.io/presentation-a-unified-styling-language/
77. https://airbnb.design/painting-with-code/
78. web CODE Design decisions “magic”
79. Design decisions CODE Android web Library iOS design system
80. finding a name
81. Space conquerors monument / Cosmonautics Museum in Moscow
82. Cosmos from Latinized form of Greek kosmos
 "order, good order, orderly arrangement" A complex orderly self-inclusive system,
 an orderly harmonious systematic universe.
83. !
84. today where things have taken off
85. the technical stack
86. design tokens { "global": { "type": "token", "category": "bricks" }, "props": { "TOKEN_BRICK_BORDER_RADIUS_CIRCLE": { "value": "50%" }, "TOKEN_BRICK_BORDER_RADIUS_SQUARED": { "value": "11.4%" } } }
88. +
89. the "Atomic" problem
90. “Everything is a component.” Jina Anne, Nathan Curtis, Trent Walton, 
 Adam Morse, and many others
91. Flat folder structure Flat organiisation structure + “icon” meta-information
92. quark atom molecule organism layout other
93. we tend to have two distinct
 kind of components: pure layout & content decoration
94. when in doubt, break down
 a component * Don't go “up” (using inheritance), or “sideways” (trying to cover too much)
95. a great collaboration
97. "We can't create an edge case for this" Pavel shumakov, Badoo designer - Oct 2017
98. show time !
113. looking forward where we try to predict the future
114. next steps • more and more coverage of the User-interface • From “zombie” to living, resuscitating the code • involve + onboard all the other developers • documentation, communication channels, etc.
115. how much Coverage ? https://twitter.com/resmini/status/912373274323103751
116. what metrics to use ?
117. Components Jul 2017 Oct 2017 extrasmall 2 2 small 1 5 medium 2 7 large 1 3 extralarge 0 2 overall* 9 61 * components + subcomponents LOC - components/jsx 204 2479 LOC - components/SCSS 529 1865 LOC - WEBSITE/jsx 479 2657
118. Visual Regression Tests - Number of snapshots
119. next challenges • tracking, A/B Testing, animations (where? how?) • Define a more “formal” team structure and process • Integration with the other native platforms (how?) • Business/Management involvement (when? how?)
120. team structure https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0 solitary “federated” centralised
121. conclusions lessons learned on this journey
122. you can't push change you have to deliver value first
123. learn from the others But then make your choices
124. be prepared to fail because every system FAILs, it's its nature
125. "Nothing is particularly hard
 if you divide it in small jobs."
 Henry Ford Manifacturer
126. Thanks cristiano rastelli MOBILE WEB TEAM didoo . net / @areaweb