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
   

   View Slide

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

   View Slide

3. beginning
   evolution
   crisis
   enlightenment
   nirvana
   We are here
   

   View Slide

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
   

   View Slide

5. Dramatis Personae
   

   View Slide

6. Cristiano Rastelli
   @areaweb
   FRONT-END TEAM @webdeldn
   

   View Slide

7. team.badoo.com
   

   View Slide

8. View Slide

9. 108
   product
   280
   engineering
   580
   15 design
   22 Front-end
   50 ios / Android
   We’re hiring!
   

   View Slide

10. Under the radar
    where everything started
    

    View Slide

11. No components
    No atomic design
    

    View Slide

12. Global declarations
    

    View Slide

13. Copy&paste, no Modularisation
    

    View Slide

14. design handoffs
    

    View Slide

15. decision:

    we need a style guide
    

    View Slide

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

    with little overhead
    

    View Slide

17. Mobile Web style guide
    

    View Slide

18. View Slide

19. Living Styleguide
    

    View Slide

20. Visual Regression Testing
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. 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. pitch to head of design for a
    shared component Library
    (between Mobile & desktop web)
    

    View Slide

28. The grand plan
    

    View Slide

29. 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 (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
    

    View Slide

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
    

    View Slide

61. decision:

    a design system for

    all our mobile apps*

    * desktop web is out (for now)
    

    View Slide

62. last year
    where things have taken off
    

    View Slide

63. finding a name
    

    View Slide

64. Space conquerors monument / Cosmonautics Museum in Moscow
    

    View Slide

65. 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

66. View Slide

67. View Slide

68. the technical stack
    

    View Slide

69. design tokens
    {
    "button": {
    "border_radius": {
    "value": "{base.border_radius.value}",
    "type": "size"
    },
    "border_width": {
    "value": “1px",
    "type": "size"
    }
    }
    }
    

    View Slide

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
    

    View Slide

71. View Slide

72. +
    

    View Slide

73. a great collaboration
    

    View Slide

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

    View Slide

75. View Slide

76. "We can't create
    an edge case
    for this"
    Pavel shumakov, Badoo designer
    

    View Slide

77. before
    Product Design Development QA
    

    View Slide

78. after
    Product Design Development QA
    Cosmos
    

    View Slide

79. Blocker (or bottleneck?)
    Product Design Development QA
    Cosmos
    

    View Slide

80. components breakdown
    

    View Slide

81. Cosmos celebration
    

    View Slide

82. the native apps

    & design teams
    

    View Slide

83. Badoo UI KIT & GALLERy
    

    View Slide

84. Badoo UI KIT & GALLERy
    

    View Slide

85. UI libraries in Sketch
    

    View Slide

86. Today
    where are we now?
    

    View Slide

87. show time !
    

    View Slide

88. http://cosmos/
    

    View Slide

89. View Slide

90. View Slide

91. View Slide

92. View Slide

93. View Slide

94. View Slide

95. View Slide

96. View Slide

97. View Slide

98. View Slide

99. View Slide

100. View Slide

101. View Slide

102. View Slide

103. View Slide

104. the human part
     

     View Slide

105. everyone can see only a small part
     

     View Slide

106. It's not in cosmos!!!
     

     View Slide

107. The real "story"
     “dragons”
     “dragons”
     “dragons”
     

     View Slide

108. The invisible

     human part

     of our daily jobs
     

     View Slide

109. This! this! This again & again!
     https://twitter.com/robinrendle/status/1113897759206072320
     

     View Slide

110. the "Atomic" problem
     

     View Slide

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

     Adam Morse, and many others
     

     View Slide

112. quark atom molecule organism layout other
     

     View Slide

113. flat Folders structure
     DESIGN TOKENS (JSON) UI COMPONENTS (React) STYLE GUIDE (React Web App)
     

     View Slide

114. we tend to have two distinct

     kind of components:
     pure layout & content decoration
     

     View Slide

115. “Layout”
     Composition
     “Content”
     

     View Slide

116. when in doubt, break down

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

     View Slide

117. The complexity is in the connections
     http://www.didoo.net/2015/07/modules-components-and-systems/
     

     View Slide

118. what metrics to use ?
     

     View Slide

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
     

     View Slide

120. Visual Regression Tests - Number of snapshots
     

     View Slide

121. The impact of Cosmos
     https://medium.com/@didoo/measuring-the-impact-of-a-design-system-7f925af090f7
     

     View Slide

122. git log --stat --reverse --date=short -- 'src/css/*.less' > ~/data-raw/logs_less.txt
     

     View Slide

123. View Slide

124. ...And what about the users ?
     https://twitter.com/markdalgleish/status/1018760819104890880
     

     View Slide

125. looking forward
     what are the challenges we’re facing
     

     View Slide

126. how do you design a

     multi-product & multi-platform
     feature ?
     

     View Slide

127. What makes something

     "On-BranD" ?
     

     View Slide

128. The right balance
     BRAND IDENTITY
     COHERENCE
     REUSABILITY
     CONSISTENCY
     

     View Slide

129. how do we know

     that something "on-brand"

     is adding real value for the user ?
     

     View Slide

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
     

     View Slide

131. one design system, but...

     how many libraries ?
     

     View Slide

132. https://speakerdeck.com/yeseniaperezcruz/building-flexible-design-systems
     

     View Slide

133. how much of

     the User Interface

     should be covered?
     

     View Slide

134. " What can be reasonably left out "
     https://twitter.com/resmini/status/912373274323103751
     

     View Slide

135. conclusions
     lessons learned on this journey
     

     View Slide

136. it takes time to have buy in
     be patient (and don't give up!)
     

     View Slide

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

     View Slide

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

     View Slide

139. learn from the others
     But then make your choices
     

     View Slide

140. A synthetic / approximate MEASURE
     IS BETTER T
     HAN NO MEASURE
     

     View Slide

141. "Nothing is particularly hard

     if you divide it in small jobs."

     Henry Ford
     Manifacturer
     

     View Slide

142. Thanks
     cristiano rastelli
     FRONT-END TEAM
     didoo . net / @areaweb
     

     View Slide