October 14, 2013

Scaling Design

2

I work on design frameworks at Spotify.

Hi, my name’s Q.

2

I work on design frameworks at Spotify.

Hi, my name’s Q.

3

The project of 1.

4

The project of hundreds.

5

UNUSABLE PRODUCT

A definition

6

A definition

–People will always make and communicate design choices.

6

A definition

–People will always make and communicate design choices.

6

A definition

–People will always make and communicate design choices.

–Scaling means coordinating that process consciously and deliberately.

6

Communication Evolution

7

Sitting and Talking

8

Feature Mocks

9

Sitting and Talking +

Feature Mocks

9

Sitting and Talking +

Style Guides

10

Sitting and Talking +Feature Mocks +

Style Guides

10

Sitting and Talking +Feature Mocks +

11

Something’s wrong.

2 Issues:12

2 Issues:12

The product is a moving target.

2 Issues:12

The product is a moving target.

The design IS the product.

13

A new stack

13

Principles +

A new stack

13

Principles +Framework +

A new stack

13

Principles +Framework +Documentation

A new stack

Principles

14

15

1. Content first

15

1. Content first2.Be Alive

15

1. Content first2.Be Alive3.Get familiar

15

1. Content first2.Be Alive3.Get familiar4.Do less

15

1. Content first2.Be Alive3.Get familiar4.Do less5.Stay Authentic

15

1. Content first2.Be Alive3.Get familiar4.Do less5.Stay Authentic6.Lagom

15

Principles +Framework

16

17

Don’t reinvent the wheel...

17

Don’t reinvent the wheel...

17

Don’t reinvent the wheel...

17

Don’t reinvent the wheel...

17

Don’t reinvent the wheel...

18

...but, improve it.

18

...but, improve it.

+

18

...but, improve it.

+( ) - CRUFT*

18

...but, improve it.

+( ) - CRUFT* = GLUE

Principles +Framework +Documentation

19

20

Requirements:

1. Live in the code

20

Requirements:

1. Live in the code2.Live online

20

Requirements:

1. Live in the code2.Live online3.Never be out of sync

20

Requirements:

1. Live in the code2.Live online3.Never be out of sync

20

Requirements:

KSS Knyle Style - by Kyle Neath | @kneath

CODE SAMPLE21

// A button suitable for giving stars to someone.//// :hover - Subtle hover highlight.// .stars-given - Indicating you've already given a star.// .stars-given:hover - Subtle hover highlight on top.// .disabled - Dims the button when it cannot be used.//// Styleguide 2.1.3.a.button.star{ ... &.star-given{ ... } &.disabled{ ... }}

22

OUTPUT

23

Principles +Framework +Documentation

October 14, 2013

Q. Cookquenton@spotify.com

Thanks!