1.
@jamesf3rguson
Designing at Scale
Creating a global user experience

2.
@jamesf3rguson
I’m James
and I’m a Designer + Maker
with 12+ years experience in:

3.
@jamesf3rguson
I’m James
and I’m a Designer + Maker
with 12+ years experience in:
•product strategy

4.
@jamesf3rguson
I’m James
and I’m a Designer + Maker
with 12+ years experience in:
•product strategy
•multi-device responsive and adaptive design

5.
@jamesf3rguson
I’m James
and I’m a Designer + Maker
with 12+ years experience in:
•product strategy
•multi-device responsive and adaptive design
•building and leading global design teams

6.
@jamesf3rguson
I’m from
Edinburgh!

7.
@jamesf3rguson
I’m from
Edinburgh!
•Birthplace and home to inventor, Alexander Graham Bell

8.
@jamesf3rguson
I’m from
Edinburgh!
•Birthplace and home to inventor, Alexander Graham Bell
•Hosts festivals attracting visitors from all over the world

9.
@jamesf3rguson
I’m from
Edinburgh!
•Birthplace and home to inventor, Alexander Graham Bell
•Hosts festivals attracting visitors from all over the world
•And if enjoying a wee dram isn’t your thing, we even
make our own Edinburgh Gin!

10.
@jamesf3rguson

11.
@jamesf3rguson

12.
@jamesf3rguson
The world’s travel search engine

13.
@jamesf3rguson
The world’s travel search engine

14.
@jamesf3rguson
Founded 2003, grown to 700+
employees with 9 global offices

15.
@jamesf3rguson
40m+
unique monthly
visitors
Founded 2003, grown to 700+
employees with 9 global offices

16.
@jamesf3rguson
40m+
unique monthly
visitors
35m+
app downloads
Founded 2003, grown to 700+
employees with 9 global offices

17.
@jamesf3rguson
40m+
unique monthly
visitors
35m+
app downloads
Founded 2003, grown to 700+
employees with 9 global offices
£93m
2014 revenue

18.
@jamesf3rguson
But let’s first
rewind a year…

19.
@jamesf3rguson
think “boxes and arrows”
ux team

20.
@jamesf3rguson
think “colouring in”
graphic team

21.
@jamesf3rguson
who were time bound and
decided to ‘simplify it a little’
engineering

22.
@jamesf3rguson
No one was happy.

23.
@jamesf3rguson
No one was happy.
Let alone the user!

24.
@jamesf3rguson
But then,
things changed.

25.
@jamesf3rguson
The entire
organisation was
re-structured.

26.
@jamesf3rguson
lean
agile
continuous delivery
theory of constraints
manufacturing

27.
@jamesf3rguson
Designer Engineers Tester
Product
Owner
We created small ‘start-up’-esque, cross-functional
teams, comprising of no more than 8 people.

28.
@jamesf3rguson
These teams, ‘squads’ are responsible for
a specific part of the Skyscanner product.
They

29.
@jamesf3rguson
These teams, ‘squads’ are responsible for
a specific part of the Skyscanner product.
They
• have an enduring mission

30.
@jamesf3rguson
These teams, ‘squads’ are responsible for
a specific part of the Skyscanner product.
They
• have an enduring mission
• have a product owner to prioritise work

31.
@jamesf3rguson
These teams, ‘squads’ are responsible for
a specific part of the Skyscanner product.
They
• have an enduring mission
• have a product owner to prioritise work
• own their codebase and choose their own technology

32.
@jamesf3rguson
These teams, ‘squads’ are responsible for
a specific part of the Skyscanner product.
They
• have an enduring mission
• have a product owner to prioritise work
• own their codebase and choose their own technology
• establish & improve their own processes

33.
@jamesf3rguson
These teams, ‘squads’ are responsible for
a specific part of the Skyscanner product.
They
• have an enduring mission
• have a product owner to prioritise work
• own their codebase and choose their own technology
• establish & improve their own processes

34.
@jamesf3rguson
So what does
this all mean
for design?

35.
@jamesf3rguson
We no longer sit with
other designers.
Instead we sit with engineers and other
team mates.

36.
@jamesf3rguson
We no longer divide
ux + graphic design.
Instead we look for T-shaped designers.

37.
@jamesf3rguson
We experiment.
Almost every thing we do, we measure
to validate our learning.

38.
@jamesf3rguson
We iterate.
Early and often.

39.
@jamesf3rguson
No more Photoshop.
Well, less.

40.
@jamesf3rguson
We’ve come to learn
that tools like Git,
SASS, and Grunt are
not just for developers.

41.
@jamesf3rguson
And even Terminal
can be your friend.
Honest :)

42.
@jamesf3rguson
So what
challenges
have we faced?

43.
@jamesf3rguson
Syncing as a team
of designers can
be tricky.

44.
@jamesf3rguson

45.
@jamesf3rguson

46.
@jamesf3rguson

47.
@jamesf3rguson

48.
@jamesf3rguson

49.
@jamesf3rguson

50.
@jamesf3rguson

51.
@jamesf3rguson

52.
@jamesf3rguson

53.
@jamesf3rguson

54.
@jamesf3rguson
Recommended
Reading
Tools
Our
Work
Conferences
Inspiration

55.
@jamesf3rguson
Recommended
Reading
Tools
Our
Work
Conferences
Inspiration
Virtual
stand-up

56.
@jamesf3rguson
Consistency
at Scale

57.
@jamesf3rguson
The great green
button debate

58.
@jamesf3rguson
The great green
button debate

59.
@jamesf3rguson
Select menus
Close buttons
Calendar icons
Filters

60.
@jamesf3rguson
Some questionable and then some
almost identical colours have
infiltrated out site
#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

61.
@jamesf3rguson
So how are we
fixing it?
We’re using some of our new skills and
tools mentioned earlier…

62.
@jamesf3rguson
Common styles
service
Search
form
Date
Picker Filters
Search results
Summary bar
Booking
panel

63.
@jamesf3rguson
CSS
SASS
Less
Stylus
Formats
RGBA
HEX
Units
PX, EM, REM,
PT, SP, DIP
Base
Colours
Typography
Spacing
Icons
Animations
etc.
Asset
management
Icons
Fonts
Graphics
etc.
UI guidelines
Elements
Forms
Buttons
Surfaces
etc.
Specifies Stores Generates

64.
@jamesf3rguson
Common styles
service
Search
form
Date
Picker Filters
Search results
Summary bar
Booking
panel

65.
@jamesf3rguson
Common styles
service
Search
form
Date
Picker Filters
Search results
Summary bar
Booking
panel
SASS
LESS
Stylus
CSS
LESS
SASS

66.
@jamesf3rguson
Common styles
service
Search
form
Date
Picker Filters
Search results
Summary bar
Booking
panel
SASS
LESS
Stylus
CSS
LESS
SASS
Backbone
Angular
Backbone
Angular

67.
@jamesf3rguson
Common styles
service
Search
form
Date
Picker Filters
Search results
Summary bar
Booking
panel
SASS
LESS
Stylus
CSS
LESS
SASS
Backbone
Angular
Backbone
Angular
lodash
jQuery
CoffeeScript
JavaScript
Handlebars
Polymer

68.
@jamesf3rguson
SASS
LESS
Stylus
Vanilla CSS
HTML JS
(with jQuery)
SASS
CoffeeScript + jQuery
Luckily, the
output always
boils down to:

69.
@jamesf3rguson

70.
@jamesf3rguson
Want to change
something?

71.
@jamesf3rguson
Want to change
something?
•Clone a copy of the repo

72.
@jamesf3rguson
Want to change
something?
•Clone a copy of the repo
•Make the change

73.
@jamesf3rguson
Want to change
something?
•Clone a copy of the repo
•Make the change
•Submit a merge request.

74.
@jamesf3rguson
What are the
benefits?

75.
@jamesf3rguson
Highly
collaborative.

76.
@jamesf3rguson
Everyone owns
the product.

77.
@jamesf3rguson
We iterate
often.

78.
@jamesf3rguson
Ultimately,
One single source
of truth for design

79.
@jamesf3rguson
@jamesf3rguson