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

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

A34bc430e87a74eba5d92719ea92cfdc?s=128

Cristiano Rastelli

April 09, 2019
Tweet

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

  8. None
  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

  18. None
  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 ___ * * *

  24. None
  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

  29. None
  30. None
  31. None
  32. the "re-think" project here come the dragons

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

  34. None
  35. None
  36. 2009 2013 2017

  37. None
  38. None
  39. None
  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

  54. None
  55. "Failure to function as expected
 is an intrinsic feature
 of

    the systems".
  56. a crucial email message

  57. None
  58. None
  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.
  66. None
  67. None
  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
  71. None
  72. +

  73. a great collaboration

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

  75. None
  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/

  89. None
  90. None
  91. None
  92. None
  93. None
  94. None
  95. None
  96. None
  97. None
  98. None
  99. None
  100. None
  101. None
  102. None
  103. None
  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

  123. None
  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