From Zero to Cosmos

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

A34bc430e87a74eba5d92719ea92cfdc?s=128

Cristiano Rastelli

October 27, 2017
Tweet

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

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

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

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

  70. None
  71. None
  72. None
  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%" } } }
  87. None
  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

  96. None
  97. "We can't create an edge case for this" Pavel shumakov,

    Badoo designer - Oct 2017
  98. show time !

  99. None
  100. None
  101. None
  102. None
  103. None
  104. None
  105. None
  106. None
  107. None
  108. None
  109. None
  110. None
  111. None
  112. None
  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