Expressive Design Systems

Good design systems can help you create digital products with efficiency and consistency. But great design systems will support and strengthen your team’s creativity at the same time. In this talk, Yesenia will discuss how to communicate your brand ethos through a design system and how to collaborate across teams to create harmonious, branded experiences.

Transcript

1. Yesenia Perez-Cruz Amuse— Budapest October 2019 Expressive Design Systems
3. Faster builds Better products Improved scaleability Stronger focus
4. “Can I change the font?” What they say:
5. Creativity What they care about:
6. “I’ll just fork this component.” What they say:
7. Shared ownership What they care about:
8. What they say: “This is the best I could do, given the constraints of the system.”
9. Flexibility What they care about:
10. Rigid Monotonous Too specific Complicated
11. Expressive Design Systems
12. Expressive Design Systems are…
13. Expressive Design Systems are… Purpose-built
14. Expressive Design Systems are… Support a range of use
15. Expressive Design Systems are… Inspire use
24. Network consistency vs Local flexibility
25. Purpose-built Range of expression Inspires use
26. Purpose-built: Help commuters find their way Range of expression: Station flashcards Inspires use: Guidelines, not rules
27. Shared foundation Room for 
 variation +
28. Shared foundation Room for 
 variation + Experience principles Station flashcards
29. Shared foundation Room for 
 variation + Experience principles Station flashcards Time periods Materials Neighborhoods
30. Shared foundation Room for 
 variation + Harmony
31. Shared foundation Room for 
 variation + Flexibility
32. Shared foundation Room for 
 variation + Improvisation
33. Enable harmony. Enable flexibility. Enable improvisation.
34. Enable harmony.
35. Components Products
36. We don’t always know how these pieces are going to be put together, but we do want the pieces to fit.
37. Brand elements Components
38. Basic components Composite components Containers Layouts
44. Big Levers Small Dials &
45. Levers: Broad, sweeping decisions about how our experiences should feel
46. Size Small Large
47. Scale Low size contrast High size contrast
48. Density Compact Airy
49. Weight Light Heavy
52. Small Large Compact Airy Low High Small Large Compact Airy Low High
53. How to define your levers
54. Use your brand traits
56. Does the work, Explanatory, Smart, Audience-first, Generosity Illuminating, Beautiful, Rebellious, Thoughtful, Entertaining
57. Small Large Small Large Compact Airy Compact Airy
58. What’s your range? Small Large
59. What’s your range of expression?
60. creative.starbucks.com
61. 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
62. 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
63. 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
64. creative.starbucks.com
65. What contexts are your teams solving for?
66. What contexts are your teams solving for? Environments: In store On-the-go Platforms: iOS Android Social Web Formats: Digital Physical products
67. What should your brand feel like, across all of these contexts?
68. Mobile Order & Pay Social Media
70. Defining your range, helps teams understand where they can be expressive
71. “Can I change the font?” What they say:
72. Dials: Small, detailed choices that enable the levers
73. Type Dials
74. 1. Set a base font size 2. Set a font ratio Type
76. modularscale.com
77. Size Scale Base font size: 1em Font ratio: 1.5
78. Size Scale Base font size: 1em Font ratio: 1.067
80. Productive Expressive https://www.ibm.com/design/language/
81. 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 “
82. Enable flexibility.
83. https://www.pentagram.com/work/the-public-theater/story
84. 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
85. https://www.pentagram.com/work/the-public-theater/story
86. https://www.pentagram.com/work/the-public-theater/story
87. What is variation?
88. Unintentional divergence Intentional, but unnecessary divergence Intentional, meaningful divergence
89. Unintentional divergence Intentional, but unnecessary divergence Intentional, meaningful divergence
90. Contexts for variation.
91. Brand Audience Environment
95. Good Variation Bad Variation vs
96. 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
97. Bad Variation • Visual variation on components that serve the same function across brands, • Don’t do much to strengthen brand voice
100. MASTHEAD Date, logo, tagline, image
103. Varying components.
104. Content Structure Style Behavior Flexibility Brad Frost, http://bradfrost.com/blog/post/pattern-variations/
105. BBC Gel “Card” Component BBC Gel, https://www.bbc.co.uk/gel/guidelines/cards
106. BBC Gel “Card” Component BBC Gel, https://www.bbc.co.uk/gel/guidelines/cards
107. Google Material, https://material.io/design/material-theming/#material-theming
108. BBC Gel “Card” Component BBC Gel, https://www.bbc.co.uk/gel/guidelines/cards
110. Enable improvisation.
111. Chefs vs cooks
113. 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
114. When people understand the rationale behind the system, they’re more likely to use it creatively
115. The right tool for the job
117. Not expressive
120. Shared foundation Room for 
 variation + High bedrest Generous seat Polished or powder-coated Leather or fabric
121. Shared foundation Room for 
 variation + High bedrest Generous seat Polished or powder-coated Leather or fabric Corporate Public Private
124. Shared foundation Room for 
 variation + General, flexible components More rigid and specific components
125. Evolving patterns from products
126. Patterns stay alive because the people who are using them are also testing them. “ —Christopher Alexander, A Pattern Language
132. Encourage contribution
133. “I’ll just fork this component.” What they say:
134. Shared ownership What they care about:
135. Shared ownership 
 keeps systems alive
136. Contribution • Why should you contribute? • How you should contribute? • Celebrate contributions
140. Enable sharing across teams
141. Team A Team B
142. Team A Team B
143. Team A Team B
144. https://spotify.design/articles/2018-12-04/the-paradox-of-design-systems/
145. 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
146. 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
147. The “Edge Effect”
148. Borders contain the greatest sources of diversity and creativity.
150. Enable creativity at the borders of your system.
151. Thank you! @yeseniaa