Slide 1

Slide 1 text

Yesenia Perez-Cruz Amuse— Budapest October 2019 Expressive Design Systems

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Faster builds Better products Improved scaleability Stronger focus

Slide 4

Slide 4 text

“Can I change the font?” What they say:

Slide 5

Slide 5 text

Creativity What they care about:

Slide 6

Slide 6 text

“I’ll just fork this component.” What they say:

Slide 7

Slide 7 text

Shared ownership What they care about:

Slide 8

Slide 8 text

What they say: “This is the best I could do, given the constraints of the system.”

Slide 9

Slide 9 text

Flexibility What they care about:

Slide 10

Slide 10 text

Rigid Monotonous Too specific Complicated

Slide 11

Slide 11 text

Expressive Design Systems

Slide 12

Slide 12 text

Expressive Design Systems are…

Slide 13

Slide 13 text

Expressive Design Systems are… Purpose-built

Slide 14

Slide 14 text

Expressive Design Systems are… Support a range of use

Slide 15

Slide 15 text

Expressive Design Systems are… Inspire use

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Network consistency vs Local flexibility

Slide 25

Slide 25 text

Purpose-built Range of expression Inspires use

Slide 26

Slide 26 text

Purpose-built: Help commuters find their way Range of expression: Station flashcards Inspires use: Guidelines, not rules

Slide 27

Slide 27 text

Shared foundation Room for 
 variation +

Slide 28

Slide 28 text

Shared foundation Room for 
 variation + Experience principles Station flashcards

Slide 29

Slide 29 text

Shared foundation Room for 
 variation + Experience principles Station flashcards Time periods Materials Neighborhoods

Slide 30

Slide 30 text

Shared foundation Room for 
 variation + Harmony

Slide 31

Slide 31 text

Shared foundation Room for 
 variation + Flexibility

Slide 32

Slide 32 text

Shared foundation Room for 
 variation + Improvisation

Slide 33

Slide 33 text

Enable harmony. Enable flexibility. Enable improvisation.

Slide 34

Slide 34 text

Enable harmony.

Slide 35

Slide 35 text

Components Products

Slide 36

Slide 36 text

We don’t always know how these pieces are going to be put together, but we do want the pieces to fit.

Slide 37

Slide 37 text

Brand elements Components

Slide 38

Slide 38 text

Basic components Composite components Containers Layouts

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

Big Levers Small Dials &

Slide 45

Slide 45 text

Levers: Broad, sweeping decisions about how our experiences should feel

Slide 46

Slide 46 text

Size Small Large

Slide 47

Slide 47 text

Scale Low size contrast High size contrast

Slide 48

Slide 48 text

Density Compact Airy

Slide 49

Slide 49 text

Weight Light Heavy

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Small Large Compact Airy Low High Small Large Compact Airy Low High

Slide 53

Slide 53 text

How to define your levers

Slide 54

Slide 54 text

Use your brand traits

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

Does the work, Explanatory, Smart, Audience-first, Generosity Illuminating, Beautiful, Rebellious, Thoughtful, Entertaining

Slide 57

Slide 57 text

Small Large Small Large Compact Airy Compact Airy

Slide 58

Slide 58 text

What’s your range? Small Large

Slide 59

Slide 59 text

What’s your range of expression?

Slide 60

Slide 60 text

creative.starbucks.com

Slide 61

Slide 61 text

First, the design prioritizes legibility and conveying information as clearly as possible. “ —Mark Wilson, Fast Company Starbucks just publicly deconstructed its brand—here’s why

Slide 62

Slide 62 text

The other half is about expressivity, emotion, and all the other intangibles Starbucks wants to spark in the consumer. “ —Mark Wilson, Fast Company Starbucks just publicly deconstructed its brand—here’s why

Slide 63

Slide 63 text

Depending on the context, the brand system allows designers to dial up either trait as needed. “ —Mark Wilson, Fast Company Starbucks just publicly deconstructed its brand—here’s why

Slide 64

Slide 64 text

creative.starbucks.com

Slide 65

Slide 65 text

What contexts are your teams solving for?

Slide 66

Slide 66 text

What contexts are your teams solving for? Environments: In store On-the-go Platforms: iOS Android Social Web Formats: Digital Physical products

Slide 67

Slide 67 text

What should your brand feel like, across all of these contexts?

Slide 68

Slide 68 text

Mobile Order & Pay Social Media

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

Defining your range, helps teams understand where they can be expressive

Slide 71

Slide 71 text

“Can I change the font?” What they say:

Slide 72

Slide 72 text

Dials: Small, detailed choices that enable the levers

Slide 73

Slide 73 text

Type Dials

Slide 74

Slide 74 text

1. Set a base font size 2. Set a font ratio Type

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

modularscale.com

Slide 77

Slide 77 text

Size Scale Base font size: 1em Font ratio: 1.5

Slide 78

Slide 78 text

Size Scale Base font size: 1em Font ratio: 1.067

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

Productive Expressive https://www.ibm.com/design/language/

Slide 81

Slide 81 text

Always design a thing by considering it in its next larger context—a chair in a room, a room in a house, a house in an environment, an environment in a city plan. —Eliel Saarinen “

Slide 82

Slide 82 text

Enable flexibility.

Slide 83

Slide 83 text

https://www.pentagram.com/work/the-public-theater/story

Slide 84

Slide 84 text

I began to realize that if you made everything the same, it was boring after the first year. If you changed it individually for each play, the theater lost recognizability. “ —Paula Scher

Slide 85

Slide 85 text

https://www.pentagram.com/work/the-public-theater/story

Slide 86

Slide 86 text

https://www.pentagram.com/work/the-public-theater/story

Slide 87

Slide 87 text

What is variation?

Slide 88

Slide 88 text

Unintentional divergence Intentional, but unnecessary divergence Intentional, meaningful divergence

Slide 89

Slide 89 text

Unintentional divergence Intentional, but unnecessary divergence Intentional, meaningful divergence

Slide 90

Slide 90 text

Contexts for variation.

Slide 91

Slide 91 text

Brand Audience Environment

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

Good Variation Bad Variation vs

Slide 96

Slide 96 text

Good Variation • If there’s a specific problem that we need a new pattern to solve • Determined by user scenarios and content needs • Strengthens brand voice in a way that serves our audience

Slide 97

Slide 97 text

Bad Variation • Visual variation on components that serve the same function across brands, • Don’t do much to strengthen brand voice

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

MASTHEAD Date, logo, tagline, image

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

Varying components.

Slide 104

Slide 104 text

Content Structure Style Behavior Flexibility Brad Frost, http://bradfrost.com/blog/post/pattern-variations/

Slide 105

Slide 105 text

BBC Gel “Card” Component BBC Gel, https://www.bbc.co.uk/gel/guidelines/cards

Slide 106

Slide 106 text

BBC Gel “Card” Component BBC Gel, https://www.bbc.co.uk/gel/guidelines/cards

Slide 107

Slide 107 text

Google Material, https://material.io/design/material-theming/#material-theming

Slide 108

Slide 108 text

BBC Gel “Card” Component BBC Gel, https://www.bbc.co.uk/gel/guidelines/cards

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

Enable improvisation.

Slide 111

Slide 111 text

Chefs vs cooks

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

A cook knows what to do to create an enjoyable dish, then they use that knowledge and repeat what works to create a consistent experience. A chef not only knows what to do, but why it’s done. “ —Stephanie Poce

Slide 114

Slide 114 text

When people understand the rationale behind the system, they’re more likely to use it creatively

Slide 115

Slide 115 text

The right tool for the job

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

Not expressive

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

No content

Slide 120

Slide 120 text

Shared foundation Room for 
 variation + High bedrest Generous seat Polished or powder-coated Leather or fabric

Slide 121

Slide 121 text

Shared foundation Room for 
 variation + High bedrest Generous seat Polished or powder-coated Leather or fabric Corporate Public Private

Slide 122

Slide 122 text

No content

Slide 123

Slide 123 text

No content

Slide 124

Slide 124 text

Shared foundation Room for 
 variation + General, flexible components More rigid and specific components

Slide 125

Slide 125 text

Evolving patterns from products

Slide 126

Slide 126 text

Patterns stay alive because the people who are using them are also testing them. “ —Christopher Alexander, A Pattern Language

Slide 127

Slide 127 text

No content

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

No content

Slide 130

Slide 130 text

No content

Slide 131

Slide 131 text

No content

Slide 132

Slide 132 text

Encourage contribution

Slide 133

Slide 133 text

“I’ll just fork this component.” What they say:

Slide 134

Slide 134 text

Shared ownership What they care about:

Slide 135

Slide 135 text

Shared ownership 
 keeps systems alive

Slide 136

Slide 136 text

Contribution • Why should you contribute? • How you should contribute? • Celebrate contributions

Slide 137

Slide 137 text

No content

Slide 138

Slide 138 text

No content

Slide 139

Slide 139 text

No content

Slide 140

Slide 140 text

Enable sharing across teams

Slide 141

Slide 141 text

Team A Team B

Slide 142

Slide 142 text

Team A Team B

Slide 143

Slide 143 text

Team A Team B

Slide 144

Slide 144 text

https://spotify.design/articles/2018-12-04/the-paradox-of-design-systems/

Slide 145

Slide 145 text

We want to tap into a designer’s inherent desire to evolve or even completely rethink parts of our system. “ —Josh Mateo and Brendon Manwaring

Slide 146

Slide 146 text

We want to create a paradigm shift wherein our designers no longer view themselves as users of the system, but instead see their role as core contributor and co-author of a shared system - one that they have ownership of. “ —Josh Mateo and Brendon Manwaring

Slide 147

Slide 147 text

The “Edge Effect”

Slide 148

Slide 148 text

Borders contain the greatest sources of diversity and creativity.

Slide 149

Slide 149 text

No content

Slide 150

Slide 150 text

Enable creativity at the borders of your system.

Slide 151

Slide 151 text

Thank you! @yeseniaa

Slide 152

Slide 152 text

No content