Skyscanner Design System. One year in.
JamesFerguson16
1,646 views
34 slides
Nov 12, 2017
Slide 1 of 109
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
About This Presentation
Presentation from Codemotion Milan, Friday 10th October.
Design and Engineering at scale is hard. I’ll uncover our journey in creating a Design System for Skyscanner in a bid to bridge the gap between design and engineering. I’ll share our learnings on how we sold it to the business by proving ...
Slide Content
@mrjamesferguson
Skyscanner Design System
One year in.
Skyscanner Design System
One year in.
@mrjamesferguson
Hello!
Hello!
@mrjamesferguson
I’m James, a designer and maker.
Hello!
I’m James, a designer and maker.
Hello!
@mrjamesferguson
Hello!
I’m from Edinburgh.
Hello!
I’m from Edinburgh.
@mrjamesferguson
Hello!
I work here, at Skyscanner.
Hello!
I work here, at Skyscanner.
@mrjamesferguson
Who are Skyscanner?
Who are Skyscanner?
@mrjamesferguson
The world’s travel search engine.
Who are Skyscanner?
The world’s travel search engine.
Who are Skyscanner?
@mrjamesferguson
Who are Skyscanner?
Who are Skyscanner?
@mrjamesferguson
Who are Skyscanner?
Who are Skyscanner?
@mrjamesferguson
Who are Skyscanner?
Founded in 2003.
Who are Skyscanner?
Founded in 2003.
@mrjamesferguson
Who are Skyscanner?
Nearly 1000 employees across 11 global cities.
Who are Skyscanner?
Nearly 1000 employees across 11 global cities.
@mrjamesferguson
Who are Skyscanner?
Over 60m monthly active users.
Who are Skyscanner?
Over 60m monthly active users.
@mrjamesferguson
Who are Skyscanner?
Over 70m app downloads.
Who are Skyscanner?
Over 70m app downloads.
@mrjamesferguson
Who are Skyscanner?
Recently acquired by Chinese travel giant, Ctrip.
Who are Skyscanner?
Recently acquired by Chinese travel giant, Ctrip.
@mrjamesferguson
Setting the scene
Setting the scene
@mrjamesferguson
Setting the scene
2014
Setting the scene
2014
@mrjamesferguson
Setting the scene
2014
One monolithic codebase.
Setting the scene
2014
One monolithic codebase.
@mrjamesferguson
Setting the scene
2014
Designs were funnelled
through a centralised and
co-located team
Setting the scene
2014
Designs were funnelled
through a centralised and
co-located team
@mrjamesferguson
Setting the scene
2015
Setting the scene
2015
@mrjamesferguson
Setting the scene
2015
We squadified.
Setting the scene
2015
We squadified.
@mrjamesferguson
Setting the scene
Product Design Engineering Growth
Setting the scene
Product Design Engineering Growth
@mrjamesferguson
Setting the scene
Product Design Engineering Growth
Setting the scene
Product Design Engineering Growth
@mrjamesferguson
Setting the scene
2015
Spotify and other Interney Economy businesses
Setting the scene
2015
Spotify and other Interney Economy businesses
@mrjamesferguson
Setting the scene
Squad
Small cross functional teams made
up of around 10 people.
Setting the scene
Squad
Small cross functional teams made
up of around 10 people.
@mrjamesferguson
Setting the scene
Squad
Each squad has a clear mission
and are empowered to be
fully autonomous.
Setting the scene
Squad
Each squad has a clear mission
and are empowered to be
fully autonomous.
@mrjamesferguson
Setting the scene
Setting the scene
@mrjamesferguson
Setting the scene
Setting the scene
@mrjamesferguson
Setting the scene
Tribe
Setting the scene
Tribe
@mrjamesferguson
Setting the scene
Tribe
Setting the scene
Tribe
@mrjamesferguson
Setting the scene
Tribe Tribe Tribe Tribe
Setting the scene
Tribe Tribe Tribe Tribe
@mrjamesferguson
Setting the scene
GOOD
Setting the scene
GOOD
@mrjamesferguson
Setting the scene
GOOD
Accelerated our ability to ship at scale.
Setting the scene
GOOD
Accelerated our ability to ship at scale.
@mrjamesferguson
Setting the scene
BAD
Setting the scene
BAD
@mrjamesferguson
Setting the scene
BAD
Duplicated efforts and lack of sharing
Setting the scene
BAD
Duplicated efforts and lack of sharing
@mrjamesferguson
BAD
Setting the scene
BAD
Setting the scene
@mrjamesferguson
BAD
Setting the scene
BAD
Setting the scene
@mrjamesferguson
BAD
Setting the scene
BAD
Setting the scene
@mrjamesferguson
BAD
Setting the scene
BAD
Setting the scene
@mrjamesferguson
Setting the scene
BAD
Inconsistency amongst our products and platforms.
Setting the scene
BAD
Inconsistency amongst our products and platforms.
@mrjamesferguson
Setting the scene
BAD
Setting the scene
BAD
@mrjamesferguson
Setting the scene
BAD
Setting the scene
BAD
@mrjamesferguson
Setting the scene
BAD
Setting the scene
BAD
@mrjamesferguson
Setting the scene
BAD
Making site wide changes was really difficult.
Setting the scene
BAD
Making site wide changes was really difficult.
@mrjamesferguson
Setting the scene
BAD
Setting the scene
BAD
@mrjamesferguson
Setting the scene
BAD
SearchSearch Search Search
Setting the scene
BAD
SearchSearch Search Search
@mrjamesferguson
Setting the scene
UGLY
Setting the scene
UGLY
@mrjamesferguson
Setting the scene
UGLY
No standards resulted in a free for all.
Setting the scene
UGLY
No standards resulted in a free for all.
@mrjamesferguson
Setting the scene
UGLY
Setting the scene
UGLY
@mrjamesferguson
Setting the scene
UGLY
Setting the scene
UGLY
@mrjamesferguson
Setting the scene
Setting the scene
@mrjamesferguson
Setting the scene
Setting the scene
@mrjamesferguson
How we got started
How we got started
@mrjamesferguson
Unify the colour palette.
How we got started
Unify the colour palette.
How we got started
@mrjamesferguson
From this…
Section
#B2E57F
#FFA500#FF0027#F6A1B3
#E7E7E8
#4191D3
#6ACA26
#8265D9
#ED5173
#9CE708
#4C4C4C
#3B404D
#FFD726
#FA8A19
#FF5C4D
#B03743
#00BF96
#008075
#86DD41
#FFC506
#D0021B
#0084FF
#C9C9CE
#000000
#71A220
#C6DAA6
#F5F5F5
#AAE702
#FA7F19
#D00620
#B0B0B0
#17C0E9
#21D7EE
#00BBCC
#02BBC4
#1BA8BC
#006982
#21C4D9
#0094B8
#5BE2ED
#29A8BB
#9EE8ED
#C2EAEC
#1394B5
#E1A70A
#FAC25F
#E8B401
#C7D834
#AAE700
#34363D
#4D5059
#FAF3B0
From this…
Section
#B2E57F
#FFA500#FF0027#F6A1B3
#E7E7E8
#4191D3
#6ACA26
#8265D9
#ED5173
#9CE708
#4C4C4C
#3B404D
#FFD726
#FA8A19
#FF5C4D
#B03743
#00BF96
#008075
#86DD41
#FFC506
#D0021B
#0084FF
#C9C9CE
#000000
#71A220
#C6DAA6
#F5F5F5
#AAE702
#FA7F19
#D00620
#B0B0B0
#17C0E9
#21D7EE
#00BBCC
#02BBC4
#1BA8BC
#006982
#21C4D9
#0094B8
#5BE2ED
#29A8BB
#9EE8ED
#C2EAEC
#1394B5
#E1A70A
#FAC25F
#E8B401
#C7D834
#AAE700
#34363D
#4D5059
#FAF3B0
@mrjamesferguson
…to this.
Section
…to this.
Section
@mrjamesferguson
If we did nothing else, this was still a huge achievement.
How we got started
If we did nothing else, this was still a huge achievement.
How we got started
@mrjamesferguson
Published an npm package of sass variables.
How we got started
Published an npm package of sass variables.
How we got started
@mrjamesferguson
Hard sell
How we got started
Getting teams to try
something new alongside
their existing schedules
was hard. Really hard.
Hard sell
How we got started
Getting teams to try
something new alongside
their existing schedules
was hard. Really hard.
@mrjamesferguson
Beer pays!
How we got started
Naturally, our team at
the time became the
first adopter.
A few beers later, we managed to convince a couple of other
teams to give it ago.
Beer pays!
How we got started
Naturally, our team at
the time became the
first adopter.
A few beers later, we managed to convince a couple of other
teams to give it ago.
@mrjamesferguson
Started to gain traction
How we got started
Started to gain traction
How we got started
@mrjamesferguson
Getting buy in.
How we got started
Getting buy in.
How we got started
@mrjamesferguson
An equal partnership between design and engineering.
How we got started
An equal partnership between design and engineering.
How we got started
@mrjamesferguson
Money talks
How we got started
SearchSearch
Money talks
How we got started
SearchSearch
@mrjamesferguson
@mrjamesferguson
@mrjamesferguson
Our approach
Our approach
@mrjamesferguson
Our mission
Our approach
Bring Design and
Engineering together to
enable squads to create
beautiful, coherent
products at scale.
Our mission
Our approach
Bring Design and
Engineering together to
enable squads to create
beautiful, coherent
products at scale.
@mrjamesferguson
The need to standardise.
Our approach
The need to standardise.
Our approach
@mrjamesferguson
Clarity Conf
Our approach
Clarity Conf
Our approach
@mrjamesferguson
Tech tour
Our approach
•Salesforce
•Facebook
•Dropbox
•Twitter
•Google
Tech tour
Our approach
•Salesforce
•Dropbox
@mrjamesferguson
Our approach
Atomic Design principles
Our approach
Atomic Design principles
@mrjamesferguson
Our approach
Atomic Design principles
Tokens
e.g. colour
Our approach
Atomic Design principles
Tokens
e.g. colour
@mrjamesferguson
Our approach
Atomic Design principles
Atoms
e.g. buttons
Tokens
e.g. colour
Our approach
Atomic Design principles
Atoms
e.g. buttons
Tokens
e.g. colour
@mrjamesferguson
Our approach
Atomic Design principles
Atoms
e.g. buttons
Tokens
e.g. colour
Molecules
e.g. date picker
Our approach
Atomic Design principles
Atoms
e.g. buttons
Tokens
e.g. colour
Molecules
e.g. date picker
@mrjamesferguson
Our approach
Atomic Design principles
Atoms
e.g. buttons
Tokens
e.g. colour
Molecules
e.g. date picker
Organisms
e.g. search controls
Our approach
Atomic Design principles
Atoms
e.g. buttons
Tokens
e.g. colour
Molecules
e.g. date picker
Organisms
e.g. search controls
@mrjamesferguson
Our approach
Atomic Design principles
Atoms
e.g. buttons
Tokens
e.g. colour
Molecules
e.g. date picker
Organisms
e.g. search controls
Systems
e.g. results view
Our approach
Atomic Design principles
Atoms
e.g. buttons
Tokens
e.g. colour
Molecules
e.g. date picker
Organisms
e.g. search controls
Systems
e.g. results view
@mrjamesferguson
Our approach
Atomic Design principles
Atoms
e.g. buttons
Tokens
e.g. colour
Molecules
e.g. date picker
Organisms
e.g. search controls
Systems
e.g. results view
Owned by Us
Our approach
Atomic Design principles
Atoms
e.g. buttons
Tokens
e.g. colour
Molecules
e.g. date picker
Organisms
e.g. search controls
Systems
e.g. results view
Owned by Us
@mrjamesferguson
Our approach
Atomic Design principles
Atoms
e.g. buttons
Tokens
e.g. colour
Molecules
e.g. date picker
Organisms
e.g. search controls
Systems
e.g. results view
Owned by Us Owned by Squads
Our approach
Atomic Design principles
Atoms
e.g. buttons
Tokens
e.g. colour
Molecules
e.g. date picker
Organisms
e.g. search controls
Systems
e.g. results view
Owned by Us Owned by Squads
@mrjamesferguson
Our approach
Typography + Spacing
Our approach
Typography + Spacing
@mrjamesferguson
Baseline grid
Our approach
A baseline grid is an underlying
structure that helps guide the
vertical spacing of a design.
Just like using columns for laying out elements horizontally, the baseline
grid is a way to help you make decisions and build consistency into a layout.
Baseline grid
Our approach
A baseline grid is an underlying
structure that helps guide the
vertical spacing of a design.
Just like using columns for laying out elements horizontally, the baseline
grid is a way to help you make decisions and build consistency into a layout.
@mrjamesferguson
Native font-stack
Our approach
-apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue', 'Arial', sans-serif
Native font-stack
Our approach
-apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue', 'Arial', sans-serif
@mrjamesferguson
Our approach
Core principles
Our approach
Core principles
@mrjamesferguson
Our approach
Core principles
Accessibility
Our approach
Core principles
Accessibility
@mrjamesferguson
Our approach
Core principles
ThemingAccessibility
Our approach
Core principles
ThemingAccessibility
@mrjamesferguson
Our approach
Core principles
ThemingAccessibility Right to Left
Our approach
Core principles
ThemingAccessibility Right to Left
@mrjamesferguson
Our approach
Supporting Designers
Our approach
Supporting Designers
@mrjamesferguson
Our approach
Supporting Designers
Vs
Our approach
Supporting Designers
Vs
@mrjamesferguson
Our approach
Supporting Designers
And many, many others.
Vs
Our approach
Supporting Designers
And many, many others.
Vs
@mrjamesferguson
Our approach
Supporting Engineers
Our approach
Supporting Engineers
@mrjamesferguson
Our approach
Supporting Engineers
JSON{ }
Design tokens
Our approach
Supporting Engineers
JSON{ }
Design tokens
@mrjamesferguson
Our approach
Supporting Engineers
JSON{ }
Design tokens Mixins
Our approach
Supporting Engineers
JSON{ }
Design tokens Mixins
@mrjamesferguson
Our approach
Supporting Engineers
JSON{ }
Design tokens Mixins
React
components
Our approach
Supporting Engineers
JSON{ }
Design tokens Mixins
React
components
@mrjamesferguson
Our approach
Supporting Engineers
JSON{ }
Design tokens Mixins
React
components
React Native
components
Our approach
Supporting Engineers
JSON{ }
Design tokens Mixins
React
components
React Native
components
@mrjamesferguson
Our approach
Supporting Engineers
JSON{ }
Design tokens Mixins
React
components
React Native
components
All opt-in, versioned using SEMVER and available as npm packages.
Our approach
Supporting Engineers
JSON{ }
Design tokens Mixins
React
components
React Native
components
All opt-in, versioned using SEMVER and available as npm packages.
@mrjamesferguson
3 simple steps
Our approach
3 simple steps
Our approach
@mrjamesferguson
3 simple steps
Our approach
3 simple steps
Our approach
@mrjamesferguson
3 simple steps
Our approach
3 simple steps
Our approach
@mrjamesferguson
3 simple steps
Our approach
3 simple steps
Our approach
@mrjamesferguson
Adoption
Adoption
@mrjamesferguson
Adoption
Adoption
@mrjamesferguson
Adoption
Adoption
@mrjamesferguson
2017
Adoption
0
75
150
225
300
2017
JanFebMarAprMayJunJulAugSeptOct
Sass React React Native
2017
Adoption
0
75
150
225
300
2017
JanFebMarAprMayJunJulAugSeptOct
Sass React React Native
@mrjamesferguson
The elephant in the room
The elephant in the room
@mrjamesferguson
The elephant in the room
Design Engineering
The elephant in the room
Design Engineering
@mrjamesferguson
The elephant in the room
Design EngineeringPeople
The elephant in the room
Design EngineeringPeople
@mrjamesferguson
Collaborating, enabling and helping.
The elephant in the room
Collaborating, enabling and helping.
The elephant in the room
@mrjamesferguson
Stu! we found useful
Stu! we found useful
@mrjamesferguson
Useful tools
Section
•Sketch libraries
•Auto layout plugin for Sketch
•React Storybook
•Lerna
•Theo
•Design Systems Slack
Useful tools
Section
•Sketch libraries
•Auto layout plugin for Sketch
•React Storybook
•Lerna
•Theo
•Design Systems Slack
@mrjamesferguson
backpack.prod.aws.skyscnr.com
backpack.prod.aws.skyscnr.com
Tags
Categories
DesignDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 1,646
- Slides 34
- Favorites 5
- Age 2944 days
Related Slideshows
1
MGV Residential Design projects for different clients, including a New Mexico Adobe project-1-.pdf
mannyvesa
28 views
16
EUNITED_Advocacy and Public Engagement through Visual Media
GeorgeDiamandis11
33 views
31
DESIGN THINKINGGG PPT 2 TOPIC IDEATION.pptx
HibaZaidi2
27 views
36
DESIGN THINKING CHAPTER 1 PPTT PPT 1.pptx
HibaZaidi2
30 views
112
Hinduism and Its History - PowerPoint Slides.pptx
ConorMcCormack10
26 views
20
Service Attributes of Manufactured Parts.pptx
MustafaEnesKrmac
27 views