From zero to cosmos
FRONT-END TEAM
Cristiano Rastelli
a journey to a multi-platform design system at Badoo
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
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
Slide 5
Slide 5 text
Dramatis Personae
Slide 6
Slide 6 text
Cristiano Rastelli
@areaweb
FRONT-END TEAM @webdeldn
"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 (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
Slide 60
Slide 60 text
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
Slide 61
Slide 61 text
decision:
a design system for
all our mobile apps*
* desktop web is out (for now)
Slide 62
Slide 62 text
last year
where things have taken off
Slide 63
Slide 63 text
finding a name
Slide 64
Slide 64 text
Space conquerors monument / Cosmonautics Museum in Moscow
Slide 65
Slide 65 text
Cosmos
from Latinized form of Greek kosmos
"order, good order, orderly arrangement"
A complex orderly self-inclusive system,
an orderly harmonious systematic universe.
...And what about the users ?
https://twitter.com/markdalgleish/status/1018760819104890880
Slide 125
Slide 125 text
looking forward
what are the challenges we’re facing
Slide 126
Slide 126 text
how do you design a
multi-product & multi-platform
feature ?
Slide 127
Slide 127 text
What makes something
"On-BranD" ?
Slide 128
Slide 128 text
The right balance
BRAND IDENTITY
COHERENCE
REUSABILITY
CONSISTENCY
Slide 129
Slide 129 text
how do we know
that something "on-brand"
is adding real value for the user ?
Slide 130
Slide 130 text
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