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

    From zero to cosmos FRONT-END TEAM Cristiano Rastelli a journey

    to a multi-platform design system at Badoo
  2. 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
  3. 8.
  4. 18.
  5. 24.
  6. 26.

    visible/tangible improvements • modularisation of components • reusability of code

    & components • speed of development • better visual consistency & overall quality
  7. 27.
  8. 29.
  9. 30.
  10. 31.
  11. 34.
  12. 35.
  13. 37.
  14. 38.
  15. 39.
  16. 50.

    I have not been able
 to communicate
 the value, the

    importance &
 the real potential of a style guide
  17. 54.
  18. 57.
  19. 58.
  20. 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
  21. 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
  22. 65.

    Cosmos from Latinized form of Greek kosmos
 "order, good order,

    orderly arrangement" A complex orderly self-inclusive system,
 an orderly harmonious systematic universe.
  23. 66.
  24. 67.
  25. 69.

    design tokens { "button": { "border_radius": { "value": "{base.border_radius.value}", "type":

    "size" }, "border_width": { "value": “1px", "type": "size" } } }
  26. 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
  27. 71.
  28. 72.

    +

  29. 75.
  30. 89.
  31. 90.
  32. 91.
  33. 92.
  34. 93.
  35. 94.
  36. 95.
  37. 96.
  38. 97.
  39. 98.
  40. 99.
  41. 100.
  42. 101.
  43. 102.
  44. 103.
  45. 116.

    when in doubt, break down
 a component * Don't go

    “up” (using inheritance), or “sideways” (trying to cover too much)
  46. 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
  47. 123.
  48. 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
  49. 141.