designing at scale: creating a global user experience

@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

The world’s travel search engine

@jamesf3rguson

Founded 2003, grown to 700+ employees with 9 global offices

@jamesf3rguson

40m+ unique monthly

visitors


@jamesf3rguson

40m+ unique monthly

visitors35m+

app downloads


@jamesf3rguson

40m+ unique monthly

visitors35m+

app downloads


£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


They• have an enduring mission

@jamesf3rguson


They• have an enduring mission• have a product owner to prioritise work

@jamesf3rguson


They• have an enduring mission• have a product owner to prioritise work• own their codebase and choose their own technology

@jamesf3rguson


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

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

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


Search form

Date Picker Filters

Search results

Summary bar

Booking panel

@jamesf3rguson


Search form

Date Picker Filters

Search results

Summary bar

Booking panel

SASS

LESS

Stylus

CSS

LESS

SASS

@jamesf3rguson


Search form

Date Picker Filters

Search results

Summary bar

Booking panel

SASS

LESS

Stylus

CSS

LESS

SASS

Backbone

AngularBackbone

Angular

@jamesf3rguson


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