Design
decisions
CODE
Android
web Library
iOS
design
system
Slide 80
Slide 80 text
finding a name
Slide 81
Slide 81 text
Space conquerors monument / Cosmonautics Museum in Moscow
Slide 82
Slide 82 text
Cosmos
from Latinized form of Greek kosmos
"order, good order, orderly arrangement"
A complex orderly self-inclusive system,
an orderly harmonious systematic universe.
we tend to have two distinct
kind of components:
pure layout & content decoration
Slide 94
Slide 94 text
when in doubt, break down
a component
* Don't go “up” (using inheritance), or “sideways” (trying to cover too much)
Slide 95
Slide 95 text
a great collaboration
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
"We can't create
an edge case
for this"
Pavel shumakov, Badoo designer - Oct 2017
Slide 98
Slide 98 text
show time !
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
No content
Slide 106
Slide 106 text
No content
Slide 107
Slide 107 text
No content
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
No content
Slide 112
Slide 112 text
No content
Slide 113
Slide 113 text
looking forward
where we try to predict the future
Slide 114
Slide 114 text
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.
Slide 115
Slide 115 text
how much Coverage ?
https://twitter.com/resmini/status/912373274323103751
Slide 116
Slide 116 text
what metrics to use ?
Slide 117
Slide 117 text
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
Slide 118
Slide 118 text
Visual Regression Tests - Number of snapshots
Slide 119
Slide 119 text
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?)
Slide 120
Slide 120 text
team structure
https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
solitary “federated” centralised
Slide 121
Slide 121 text
conclusions
lessons learned on this journey
Slide 122
Slide 122 text
you can't push change
you have to deliver value first
Slide 123
Slide 123 text
learn from the others
But then make your choices
Slide 124
Slide 124 text
be prepared to fail
because every system
FAILs, it's its nature
Slide 125
Slide 125 text
"Nothing is particularly hard
if you divide it in small jobs."
Henry Ford
Manifacturer
Slide 126
Slide 126 text
Thanks
cristiano rastelli
MOBILE WEB TEAM
didoo . net / @areaweb