Scenario-Driven Design Systems

2020-02-27 281浏览

1.An Event Apart—Seattle 2018 April Scenario-Driven Design Systems Yesenia Perez-Cruz
2.
3.
4.A unified design system is essential to building better and faster; better because a cohesive experience is more easily understood by our users, and faster because it gives us a common language to work with. –Karri Saarinen, Building a Visual Language
5.How do you define a design system?
6.A collection of reusable components assembled to build any number of applications?
7.A system is an interconnected set of elements coherently organized in a way that achieves something. –Donella Meadows, Thinking in Systems
8.A system is an interconnected set of elements coherently organized in a way that achieves something. –Donella Meadows, Thinking in Systems
9.Elements Interconnections Purpose
10.A good design systemfeels:Cohesive Unified Connected
11.A bad design systemfeels:Disjointed Confusing Difficult to use
12.Elements Interconnections Purpose
13.Start your design system   with user-scenarios.
14.
15.8 brands 350+ websites 1 design system
16.Why? • Easier to design, build, launch, maintain, and evolve the sites on our platform.  • Faster to launch new brands
17.Tell better stories, faster
18.
19.
20.Different Editorial Missions Content Types Audience Needs Typography & Branding
21.1 Unify eight brand sites into one design and code system.
22.2 Provide enough flexibility to allow brands to still feel distinct.
23.Problems to solve • What patterns/components do we need to build?  • How can these components be combined to create distinct experiences? • How can we create a unique look & feel for 300+ sites using one visual design system?
24.Early assumptions
25.1 Smaller, modular components come together to define a page.
26.2 Address inconsistencies indesign:layout, color, typography, & treatments of similar information
27.Hypothesis:A set of flexible, brand-agnostic modules with a theming system will give us the most range.
28.It’s legos, right?
29.Too focused on   LAYOUTS
30.4-up 2-up 1-up
31.
32.
33.
34.1. Sites felt too similar 2. Did not reflect critical differences in content, tone, and audience
35.
36.Homes & Neighborhoods Maps, Guides Tech & Business News, Podcasts
37.Modules didn’t have a clear purpose.
38.A system is an interconnected set of elements coherently organized in a way that achieves something. –Donella Meadows, Thinking in Systems
39.Elements Interconnections Purpose
40.NewHypothesis:In order to create a flexible system, we needed to start by being specific.
41.What we learned
42.You can’t start with individual components
43.Successful design patterns don’t exist in a vacuum.
44.
45.We should start with   language, not interfaces. –Alla Kholmatova, The Language of Modular Design
46.Successful design systems start with content and people.
47.Audience Editorial Content Revenue
48.What’s the audience goal? Is there a shared audience goal across all of our brands or are there differences?   What’s the editorial workflow? What range of content should this support?
49.1. Start with fast, unified platform  2. Be scenario-driven when creating variations  3. Find key moments for visual brand expression that serve our audience
50.Fast, Unified Platform • Our platform should load quickly, be accessible, and work well across devices • We should have a unified core user experience  • All components that we build should be available to all brands
51.Scenario-Driven Variations • Scenarios, not layout, should drive variation • All patterns should solve a specific problem • We’re not creating a one-sizefits-all solution
52.No hypothetical situations
53.Identifying Scenarios
54.“UI Inventory” Brad Frost,http://bradfrost.com/blog/post/interface-inventory/
55.“Purpose-Directed Inventory” Alla Kholmatova,https://www.smashingmagazine.com/design-systems-book/
56.Keeping this map in my mind helped me think in families of patterns joined by a shared purpose, rather than individual pages. –Alla Kholmatova, Design Systems
57.Identify core workflows and the patterns that need to support these workflows. Understand the role each pattern plays in a user’s journey. Define how the patterns work together   to create a cohesive experience.
58.
59.Know your use case. –Salesforce, Lightning Design System
60.Workspace Facilitates user collaboration on records Board For items that are advancing through a linear workflow Reference For when users are primarily jumping to related records Salesforce,https://www.lightningdesignsystem.com/guidelines/layout/
61.via:Shopify,https://polaris.shopify.com
62.“Put Merchants First”
63.
64.“Callout cards are used to encourage merchants   to take an action related to a new feature   or opportunity”
65.https://playbook.cio.gov/designstandards/
66.
67.
68.Scenario-driven design in practice
69.
70.Features
71.
72.Turn 18 distinct templates with 81 code snippets into   1 flexible design system
73.Identifying Core Workflows
74.Audience goals consistent across brands, but content differed.
75.Audience Goals • Consume content  • Find new content LEDE IMAGE TEXT BOX RECIRCULATION MODULE
76.Scenario-driven variations
77.
78.LEDE IMAGE VARIATIONS
79.HED BELOW Highlights photography
80.HED ABOVE Prioritizes text over photography
81.HED OVERLAY Photo as background, for lower quality images
82.HED BELOW  SHORT IMAGE Short image, valuable for illustration or widescreen images
83.SIDE-BY-SIDE Specifically for vertical images
84.Only add a layout if there’s a content need.
85.Snippets
86.Content Audit
87.Content Audit • Does it add value?  • Is it available to more than 3 brands?   • Is it a must-have for 1 brand?
88.Snippet Examples
89.Brand Expression
90.
91.
92.
93.
94.Reviews
95.
96.The Scorecard
97.
98.Initial design 1 SCORECARD component with 3sections:meta info, open text field, CTAs
99.
100.Where to eat What to order What game to buy What product to buy
101.Address Cost Rating out of 4 stars Book a Table Platform(s) Publisher Score out of 10 points Release Date Product Image Pro/Con List Score out of 10 points Buy Now Buttons
102.VENUE CARD GAME CARD PRODUCT CARD
103.VENUE CARD Highlights content that helps you find where to eat
104.GAME CARD Highlights content specific to   games
105.PRODUCT CARD Highlights content that is specific to products with Buy Now buttons
106.
107.First unifiedversion:ONE SCORECARD Content has the same hierarchy across the board
108.After:VENUE GAME PRODUCT
109.Scorecard Variants
110.
111.Homepages
112.
113.Identifying Core Workflows
114.Research Phase • What’s the value of the homepage today?  • Who’s our homepage audience?  • What are they looking for?  • How are our current homepages performing?
115.Talk to your audience
116.The audience from our user survey was more likely to use a phone, more likely to follow links from social media.
117.The homepage should clearly answer these 3questions:• What’s new?  • What’s important?  • What’s helpful?
118.3 Main Areas of Purpose
119.STORYFEED COVERS UTILITY
120.STORY FEED • Higher content density so users can see more content at a glance  • Reverse chronological order  • Priority is quick   consumption of content to serve the engaged homepage audience of repeat visitors
121.ENTRY BOX Standard entry box Map Review Storystream Group
122.Scenario-driven variations
123.4-up 2-up 1-up
124.
125.NEWSPAPER A text-heavy layout for busy news reporting
126.EVERGREEN A flexible layout that promotes both recent and evergreen content
127.MORNING RECAP A hero for the morning after a busy night of sporting events
128.“In the process of naming an element, you work out the function as a group and reach an agreement.” Alla Kholmatova, The Language of Modular Design
129.Brand Expression
130.PROMO BAR Featured hero area to highlight additional stories/ content underneath main stories section
131.
132.MASTHEAD Date, logo, tagline, image
133.
134.
135.
136.Scalable visual design system
137.Key Moments for Brand Expression • We must create a platform where brands can feel distinct • We need to express strong editorial voice and identity • Brand expression is more than just colors and logo
138.+ Foundational elements Room for customization
139.Foundational elements • Type scale  • Color system • Spacing variables
140.Type Scale
141.Color System
142.
143.Color System
144.Color System
145.
146.COLOR-HERO-GRADIENT COLOR-NAV-BG COLOR-LINK
147.Good Variation vs Bad Variation
148.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
149.Bad Variation • Visual variation on components that serve the same function across brands, • Don’t do much to strengthen brand voice
150.
151.
152.
153.
154.
155.Before:Custom one-off solutions
156.
157.
158.
159.
160.Now:Telling better stories, faster
161.What’s next?
162.Now that we’re on a unified platform, we can create even more tailored experiences at scale.
163.Successful design patterns don’t exist in a vacuum.
164.Successful design systems solve specific problems.
165.Successful design systems start with content and people.
166.Thank you! @yeseniaa
167.References • The Language of Modular Design — Alla Kholmatova  • Design Systems — Alla Kholmatova  • A Pattern Language — Christopher Alexander  • Thinking in Systems — Donella Meadows