designing at scale: creating a global user experience
Post on 14-Apr-2017
958 Views
Preview:
TRANSCRIPT
@jamesf3rguson
Designing at ScaleCreating a global user experience
@jamesf3rguson
I’m James and I’m a Designer + Maker with 12+ years experience in:
@jamesf3rguson
I’m James and I’m a Designer + Maker with 12+ years experience in:• product strategy
@jamesf3rguson
I’m James and I’m a Designer + Maker with 12+ years experience in:• product strategy• multi-device responsive and adaptive design
@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
@jamesf3rguson
I’m from Edinburgh!
@jamesf3rguson
I’m from Edinburgh!• Birthplace and home to inventor, Alexander Graham Bell
@jamesf3rguson
I’m from Edinburgh!• Birthplace and home to inventor, Alexander Graham Bell• Hosts festivals attracting visitors from all over the world
@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!
@jamesf3rguson
@jamesf3rguson
@jamesf3rguson
The world’s travel search engine
@jamesf3rguson
The world’s travel search engine
@jamesf3rguson
Founded 2003, grown to 700+ employees with 9 global offices
@jamesf3rguson
40m+ unique monthly
visitors
Founded 2003, grown to 700+ employees with 9 global offices
@jamesf3rguson
40m+ unique monthly
visitors35m+
app downloads
Founded 2003, grown to 700+ employees with 9 global offices
@jamesf3rguson
40m+ unique monthly
visitors35m+
app downloads
Founded 2003, grown to 700+ employees with 9 global offices
£93m 2014 revenue
@jamesf3rguson
But let’s first rewind a year…
@jamesf3rguson
think “boxes and arrows”
ux team
@jamesf3rguson
think “colouring in”
graphic team
@jamesf3rguson
who were time bound and decided to ‘simplify it a little’
engineering
@jamesf3rguson
No one was happy.
@jamesf3rguson
No one was happy.Let alone the user!
@jamesf3rguson
But then, things changed.
@jamesf3rguson
The entire organisation was re-structured.
@jamesf3rguson
lean agile continuous delivery theory of constraints manufacturing
@jamesf3rguson
Designer Engineers Tester Product Owner
We created small ‘start-up’-esque, cross-functional teams, comprising of no more than 8 people.
@jamesf3rguson
These teams, ‘squads’ are responsible for a specific part of the Skyscanner product.
They
@jamesf3rguson
These teams, ‘squads’ are responsible for a specific part of the Skyscanner product.
They• have an enduring mission
@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
@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
@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
@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
@jamesf3rguson
So what does this all mean for design?
@jamesf3rguson
We no longer sit with other designers. Instead we sit with engineers and other team mates.
@jamesf3rguson
We no longer divide ux + graphic design. Instead we look for T-shaped designers.
@jamesf3rguson
We experiment. Almost every thing we do, we measure to validate our learning.
@jamesf3rguson
We iterate. Early and often.
@jamesf3rguson
No more Photoshop. Well, less.
@jamesf3rguson
We’ve come to learn that tools like Git, SASS, and Grunt are not just for developers.
@jamesf3rguson
And even Terminal can be your friend. Honest :)
@jamesf3rguson
So what challenges have we faced?
@jamesf3rguson
Syncing as a team of designers can be tricky.
@jamesf3rguson
@jamesf3rguson
@jamesf3rguson
@jamesf3rguson
@jamesf3rguson
@jamesf3rguson
@jamesf3rguson
@jamesf3rguson
@jamesf3rguson
@jamesf3rguson
@jamesf3rguson
Recommended Reading
Tools
Our Work
Conferences
Inspiration
@jamesf3rguson
Recommended Reading
Tools
Our Work
Conferences
InspirationVirtual
stand-up
@jamesf3rguson
Consistency at Scale
@jamesf3rguson
The great green button debate
@jamesf3rguson
The great green button debate
@jamesf3rguson
Select menus
Close buttons
Calendar icons Filters
@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
@jamesf3rguson
So how are we fixing it?We’re using some of our new skills and tools mentioned earlier…
@jamesf3rguson
Common styles service
Search form
Date Picker Filters
Search results
Summary bar
Booking panel
@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
@jamesf3rguson
Common styles service
Search form
Date Picker Filters
Search results
Summary bar
Booking panel
@jamesf3rguson
Common styles service
Search form
Date Picker Filters
Search results
Summary bar
Booking panel
SASS
LESS
Stylus
CSS
LESS
SASS
@jamesf3rguson
Common styles service
Search form
Date Picker Filters
Search results
Summary bar
Booking panel
SASS
LESS
Stylus
CSS
LESS
SASS
Backbone
AngularBackbone
Angular
@jamesf3rguson
Common styles service
Search form
Date Picker Filters
Search results
Summary bar
Booking panel
SASS
LESS
Stylus
CSS
LESS
SASS
Backbone
AngularBackbone
Angular
lodash
jQueryCoffeeScript
JavaScript
Handlebars
Polymer
@jamesf3rguson
SASS LESS
Stylus Vanilla CSS
HTML JS (with jQuery)
SASS
CoffeeScript + jQuery
Luckily, the output always boils down to:
@jamesf3rguson
@jamesf3rguson
Want to change something?
@jamesf3rguson
Want to change something?•Clone a copy of the repo
@jamesf3rguson
Want to change something?•Clone a copy of the repo•Make the change
@jamesf3rguson
Want to change something?•Clone a copy of the repo•Make the change•Submit a merge request.
@jamesf3rguson
What are the benefits?
@jamesf3rguson
Highly collaborative.
@jamesf3rguson
Everyone owns the product.
@jamesf3rguson
We iterate often.
@jamesf3rguson
Ultimately, One single source of truth for design
@jamesf3rguson
@jamesf3rguson
top related