Slide 1
Slide 1 text
From zero to cosmos
MOBILE WEB TEAM
Cristiano Rastelli
DIDOO.NET / @AREAWEB LONDON - 26 OCT 2017
Slide 2
Slide 2 text
http://rosenfeldmedia.com/books/storymapping/
Slide 3
Slide 3 text
beginning
evolution
crisis
enlightenment
nirvana
We are here
Slide 4
Slide 4 text
Dramatis Personae
Slide 5
Slide 5 text
Cristiano Rastelli
didoo . net / @areaweb
Mobile Web Team
@webdeldn
webdeldn.eventbrite.com
Slide 6
Slide 6 text
team.badoo.com
Slide 7
Slide 7 text
87
product
250
engineering
413
12 design
12 mobile web
12 desktop web
33 ios / Android
Slide 8
Slide 8 text
Under the radar
where everything started
Slide 9
Slide 9 text
No components
No atomic design
Slide 10
Slide 10 text
Global declarations
Slide 11
Slide 11 text
Copy&paste, no Modularisation
Slide 12
Slide 12 text
design handoffs
Slide 13
Slide 13 text
decision:
we need a style guide
Slide 14
Slide 14 text
started small & lean
working incrementally
one component at a time
with little overhead
Slide 15
Slide 15 text
Mobile Web style guide
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Living Styleguide
Slide 18
Slide 18 text
Visual Regression Testing
Slide 19
Slide 19 text
diff AFTER
before
https://speakerdeck.com/nikhilverma/visual-regression-testing-from-a-tool-to-a-process
Slide 20
Slide 20 text
Deliver value*
* business value, from day one
Slide 21
Slide 21 text
me, a pain in the ___
* * *
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
It's a tool
Slide 24
Slide 24 text
... but Don't make it your* tool !
* let other people help and contribute, even if they will “break” it
Slide 25
Slide 25 text
it gets noticed
where I reaped the fruits of my labour
Slide 26
Slide 26 text
visible/tangible improvements
• modularisation of components
• reusability of code & components
• speed of development
• better visual consistency & overall quality
Slide 27
Slide 27 text
shared component Library
(between Mobile & desktop web)
Slide 28
Slide 28 text
The pitch
Slide 29
Slide 29 text
problems we're trying to solve
• Copy & Paste
• code duplication & non re-usability
• Small differences & inconsistencies
• Obsolescence
• No holistic view
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
the "re-think" project
here come the dragons
Slide 33
Slide 33 text
BIGGER THAN DATING
https://www.behance.net/gallery/55344175/New-Badoo-identity
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
2009 2013 2017
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
In theory
the perfect use case
for a style guide
Slide 41
Slide 41 text
In practice...
Slide 42
Slide 42 text
"There is no time !"
Slide 43
Slide 43 text
master
RETHINK
Slide 44
Slide 44 text
the style guide was
more and more in disarray,
not maintained
Slide 45
Slide 45 text
components were broken or missing
Slide 46
Slide 46 text
VRT tests were broken
Slide 47
Slide 47 text
VRT tests were not added
Rethink project
Slide 48
Slide 48 text
living Styleguide
dead
Slide 49
Slide 49 text
it was a personal failure
Slide 50
Slide 50 text
I have not been able
to communicate
the value, the importance &
the real potential
of a style guide
Slide 51
Slide 51 text
Why keep it alive ?
Slide 52
Slide 52 text
not everything is lost
where the “grand plan” takes place
Slide 53
Slide 53 text
https://medium.com/@didoo/systemantics-a778c4247cbb
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
"Failure to function as expected
is an intrinsic feature
of the systems".
Slide 56
Slide 56 text
a crucial email message
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
This is a designer
telling a front-end developer to
build a design system
Slide 60
Slide 60 text
he wasn't building a wall to
protect his territory, saying
"this is design, stay out of here !"
Slide 61
Slide 61 text
He was understanding the value
Slide 62
Slide 62 text
decision:
seize the moment
to not lose the designers
Slide 63
Slide 63 text
"When can we
see something?"
Sasha Grishin, Head of Design - Jun 2017
Slide 64
Slide 64 text
a turning-point meeting
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
decision:
a design system for
all our mobile apps*
* desktop web is out (for now)
Slide 67
Slide 67 text
decision:
detach the design system
from the codebase
Slide 68
Slide 68 text
https://twitter.com/nathanacurtis/status/918257735766028289
Slide 69
Slide 69 text
The grand plan
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
the quest for the holy grail
Slide 74
Slide 74 text
cross-platform,
cross-disciplinary
design systems
https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660
Slide 75
Slide 75 text
cross-platform code
as the source of truth
https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660
Slide 76
Slide 76 text
https://markdalgleish.github.io/presentation-a-unified-styling-language/
Slide 77
Slide 77 text
https://airbnb.design/painting-with-code/
Slide 78
Slide 78 text
web
CODE
Design
decisions
“magic”
Slide 79
Slide 79 text
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.
Slide 83
Slide 83 text
!
Slide 84
Slide 84 text
today
where things have taken off
Slide 85
Slide 85 text
the technical stack
Slide 86
Slide 86 text
design tokens
{
"global": {
"type": "token",
"category": "bricks"
},
"props": {
"TOKEN_BRICK_BORDER_RADIUS_CIRCLE": {
"value": "50%"
},
"TOKEN_BRICK_BORDER_RADIUS_SQUARED": {
"value": "11.4%"
}
}
}
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
+
Slide 89
Slide 89 text
the "Atomic" problem
Slide 90
Slide 90 text
“Everything is a component.”
Jina Anne, Nathan Curtis, Trent Walton,
Adam Morse, and many others
Slide 91
Slide 91 text
Flat folder structure Flat organiisation structure
+
“icon” meta-information
Slide 92
Slide 92 text
quark atom molecule organism layout other
Slide 93
Slide 93 text
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