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
   

   View Slide

2. http://rosenfeldmedia.com/books/storymapping/
   

   View Slide

3. beginning
   evolution
   crisis
   enlightenment
   nirvana
   We are here
   

   View Slide

4. Dramatis Personae
   

   View Slide

5. Cristiano Rastelli
   didoo . net / @areaweb
   Mobile Web Team
   @webdeldn
   webdeldn.eventbrite.com
   

   View Slide

6. team.badoo.com
   

   View Slide

7. 87
   product
   250
   engineering
   413
   12 design
   12 mobile web
   12 desktop web
   33 ios / Android
   

   View Slide

8. Under the radar
   where everything started
   

   View Slide

9. No components
   No atomic design
   

   View Slide

10. Global declarations
    

    View Slide

11. Copy&paste, no Modularisation
    

    View Slide

12. design handoffs
    

    View Slide

13. decision:

    we need a style guide
    

    View Slide

14. started small & lean
    working incrementally
    one component at a time

    with little overhead
    

    View Slide

15. Mobile Web style guide
    

    View Slide

16. View Slide

17. Living Styleguide
    

    View Slide

18. Visual Regression Testing
    

    View Slide

19. diff AFTER
    before
    https://speakerdeck.com/nikhilverma/visual-regression-testing-from-a-tool-to-a-process
    

    View Slide

20. Deliver value*
    * business value, from day one
    

    View Slide

21. me, a pain in the ___
    * * *
    

    View Slide

22. View Slide

23. It's a tool
    

    View Slide

24. ... but Don't make it your* tool !
    * let other people help and contribute, even if they will “break” it
    

    View Slide

25. it gets noticed
    where I reaped the fruits of my labour
    

    View Slide

26. visible/tangible improvements
    • modularisation of components
    • reusability of code & components
    • speed of development
    • better visual consistency & overall quality
    

    View Slide

27. shared component Library
    (between Mobile & desktop web)
    

    View Slide

28. The pitch
    

    View Slide

29. problems we're trying to solve
    • Copy & Paste
    • code duplication & non re-usability
    • Small differences & inconsistencies
    • Obsolescence
    • No holistic view
    

    View Slide

30. View Slide

31. View Slide

32. the "re-think" project
    here come the dragons
    

    View Slide

33. BIGGER THAN DATING
    https://www.behance.net/gallery/55344175/New-Badoo-identity
    

    View Slide

34. View Slide

35. View Slide

36. 2009 2013 2017
    

    View Slide

37. View Slide

38. View Slide

39. View Slide

40. In theory
    the perfect use case
    for a style guide
    

    View Slide

41. In practice...
    

    View Slide

42. "There is no time !"
    

    View Slide

43. master
    RETHINK
    

    View Slide

44. the style guide was
    more and more in disarray,
    not maintained
    

    View Slide

45. components were broken or missing
    

    View Slide

46. VRT tests were broken
    

    View Slide

47. VRT tests were not added
    Rethink project
    

    View Slide

48. living Styleguide
    dead
    

    View Slide

49. it was a personal failure
    

    View Slide

50. I have not been able

    to communicate

    the value, the importance &

    the real potential
    of a style guide
    

    View Slide

51. Why keep it alive ?
    

    View Slide

52. not everything is lost
    where the “grand plan” takes place
    

    View Slide

53. https://medium.com/@didoo/systemantics-a778c4247cbb
    

    View Slide

54. View Slide

55. "Failure to function as expected

    is an intrinsic feature

    of the systems".
    

    View Slide

56. a crucial email message
    

    View Slide

57. View Slide

58. View Slide

59. This is a designer
    telling a front-end developer to
    build a design system
    

    View Slide

60. he wasn't building a wall to
    protect his territory, saying 

    "this is design, stay out of here !"
    

    View Slide

61. He was understanding the value
    

    View Slide

62. decision:

    seize the moment
    to not lose the designers
    

    View Slide

63. "When can we
    see something?"
    Sasha Grishin, Head of Design - Jun 2017
    

    View Slide

64. a turning-point meeting
    

    View Slide

65. View Slide

66. decision:

    a design system for

    all our mobile apps*

    * desktop web is out (for now)
    

    View Slide

67. decision:
    detach the design system

    from the codebase
    

    View Slide

68. https://twitter.com/nathanacurtis/status/918257735766028289
    

    View Slide

69. The grand plan
    

    View Slide

70. View Slide

71. View Slide

72. View Slide

73. the quest for the holy grail
    

    View Slide

74. cross-platform,

    cross-disciplinary

    design systems
    https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660
    

    View Slide

75. cross-platform code

    as the source of truth
    https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660
    

    View Slide

76. https://markdalgleish.github.io/presentation-a-unified-styling-language/
    

    View Slide

77. https://airbnb.design/painting-with-code/
    

    View Slide

78. web
    CODE
    Design
    decisions
    “magic”
    

    View Slide

79. Design
    decisions
    CODE
    Android
    web Library
    iOS
    design
    system
    

    View Slide

80. finding a name
    

    View Slide

81. Space conquerors monument / Cosmonautics Museum in Moscow
    

    View Slide

82. Cosmos
    from Latinized form of Greek kosmos

    "order, good order, orderly arrangement"
    A complex orderly self-inclusive system,

    an orderly harmonious systematic universe.
    

    View Slide

83. !
    

    View Slide

84. today
    where things have taken off
    

    View Slide

85. the technical stack
    

    View Slide

86. design tokens
    {
    "global": {
    "type": "token",
    "category": "bricks"
    },
    "props": {
    "TOKEN_BRICK_BORDER_RADIUS_CIRCLE": {
    "value": "50%"
    },
    "TOKEN_BRICK_BORDER_RADIUS_SQUARED": {
    "value": "11.4%"
    }
    }
    }
    

    View Slide

87. View Slide

88. +
    

    View Slide

89. the "Atomic" problem
    

    View Slide

90. “Everything is a component.”
    Jina Anne, Nathan Curtis, Trent Walton, 

    Adam Morse, and many others
    

    View Slide

91. Flat folder structure Flat organiisation structure
    +
    “icon” meta-information
    

    View Slide

92. quark atom molecule organism layout other
    

    View Slide

93. we tend to have two distinct

    kind of components:
    pure layout & content decoration
    

    View Slide

94. when in doubt, break down

    a component
    * Don't go “up” (using inheritance), or “sideways” (trying to cover too much)
    

    View Slide

95. a great collaboration
    

    View Slide

96. View Slide

97. "We can't create
    an edge case
    for this"
    Pavel shumakov, Badoo designer - Oct 2017
    

    View Slide

98. show time !
    

    View Slide

99. View Slide

100. View Slide

101. View Slide

102. View Slide

103. View Slide

104. View Slide

105. View Slide

106. View Slide

107. View Slide

108. View Slide

109. View Slide

110. View Slide

111. View Slide

112. View Slide

113. looking forward
     where we try to predict the future
     

     View Slide

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.
     

     View Slide

115. how much Coverage ?
     https://twitter.com/resmini/status/912373274323103751
     

     View Slide

116. what metrics to use ?
     

     View Slide

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
     

     View Slide

118. Visual Regression Tests - Number of snapshots
     

     View Slide

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?)
     

     View Slide

120. team structure
     https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
     solitary “federated” centralised
     

     View Slide

121. conclusions
     lessons learned on this journey
     

     View Slide

122. you can't push change
     you have to deliver value first
     

     View Slide

123. learn from the others
     But then make your choices
     

     View Slide

124. be prepared to fail
     because every system
     FAILs, it's its nature
     

     View Slide

125. "Nothing is particularly hard

     if you divide it in small jobs."

     Henry Ford
     Manifacturer
     

     View Slide

126. Thanks
     cristiano rastelli
     MOBILE WEB TEAM
     didoo . net / @areaweb
     

     View Slide