Building Flexible Design Systems

2020-02-27 159浏览

1.Building Flexible Design Systems Design Matters 2017 @yeseniaa
2.
3.A house of editorial brands which goes deep to serve people obsessed with food, sports, gaming, tech, news, shopping, culture, and where they live.
4.
5.
6.
7.
8.
9.
10.
11.Covering the intersection of tech and business.
12.8 brands 350+ websites 1 design system
13.Why? • Easier to design, build, launch, maintain, and evolve the sites on our platform.  • Faster to launch new brands
14.
15.
16.Different Editorial Missions Content Types Audience Needs Typography & Branding
17.1 Unify eight brand sites into one design and code system.
18.2 Provide enough flexibility to allow brands to still feel distinct.
19.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?
20.Early assumptions
21.1. Started with layout and modularity  2. Thought color and type were enough to distinguish brands    3. “Brand-agnostic”
22.It’s legos, right?
23.Too focused on   LAYOUTS
24.4-up 2-up 1-up
25.
26.
27.
28.1.  Sites felt too similar  2. Did not reflect differences in CONTENT, TONE, AUDIENCE
29.
30.Homes & Neighborhoods Maps, Guides Tech & Business News, Podcasts
31.“Brand-agnostic”
32.“Brand-agnostic”
33.
34.
35.“A system is an interconnected set of elements coherently organized in a way that achieves something.” Donella Meadows, Thinking in Systems
36.In order to create a flexible system, we needed to start by being specific.
37.What we   learned
38.You can’t start with individual components
39.
40.“We should start with language, not interfaces.” Alla Kholmatova, The Language of Modular Design
41.A successful design system starts with CONTENT and PEOPLE.
42.Audience Editorial Content Revenue
43.Audience • Return audience vs first-time visitors  • Comment frequently vs never comment  • Enter via social media vs saved bookmarks Editorial • Full-time staff vs freelance bloggers  • Each editorial team   has a different   workflow  Content Revenue • Photography, words, video, podcasts, maps, guides  • Range in tones  • Must balance with revenue goals and requirements
44.Audience • What’s the audience goal? • Is there a shared audience goal across all of our brands or are there differences? Editorial • What’s the editorial workflow? Content • What range of content should this support? Revenue • What are the revenue goals?
45.1. Start with fast, unified platform  2. Be scenario-driven when creating variations  3. Find key moments for visual brand expression
46.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
47.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
48.No hypothetical situations
49.“Each pattern describes a problem that occurs over and over again in our environment… Christopher Alexander, A Pattern Language
50.…and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.” Christopher Alexander, A Pattern Language
51.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
52.Design System  Layers
53.Google Material Design Salesforce Lightning Design
54.Templates article feature home/hub page search user profile storystream
55.Components STORYFEED COVERS UTILITY
56.Programmed by Scenario-Driven Presets
57.Programmed by Scenario-Driven Presets
58.Programmed by Scenario-Driven Presets
59.Visually expressed with our theming system Colors Typography Visual Treatments
60.Visually expressed with our theming system Colors Typography Visual Treatments
61.Scenario-driven design in practice
62.
63.Features
64.
65.Turn 18 distinct templates with 81 code snippets into   1 flexible design system
66.Audience goals consistent across brands, but content differed.
67.Creating the unified product
68.Audience Goals • Consume content  • Find new content LEDE IMAGE TEXT BOX RECIRCULATION MODULE
69.Scenario-driven variations
70.
71.LEDE IMAGE VARIATIONS
72.HED BELOW Highlights photography
73.HED ABOVE Prioritizes text over photography
74.HED OVERLAY Photo as background, for lower quality images
75.HED BELOW  SHORT IMAGE Short image, valuable for illustration or widescreen images
76.SIDE-BY-SIDE Specifically for vertical images
77.Only add a layout if there’s a content need.
78.Snippets
79.Content Audit
80.Content Audit • Does it add value?  • Is it available to more than 3 brands?   • Is it a must-have for 1 brand?
81.Snippet Examples
82.Brand Expression
83.
84.
85.
86.
87.Reviews
88.
89.The Scorecard
90.
91.Initial design 1 SCORECARD component with 3sections:meta info, open text field, CTAs
92.
93.Where to eat What to order What game to buy What product to buy
94.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
95.VENUE CARD GAME CARD PRODUCT CARD
96.VENUE CARD Highlights content that helps you find where to eat
97.GAME CARD Highlights content specific to   games
98.PRODUCT CARD Highlights content that is specific to products with Buy Now buttons
99.
100.First unifiedversion:ONE SCORECARD Content has the same hierarchy across the board
101.After:VENUE GAME PRODUCT Still share some common elements but each is tailored to showcase content and user goals
102.
103.Homepages
104.
105.Creating the unified product
106.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?
107.Talk to your audience
108.The audience from our user survey was more likely to use a phone, more likely to follow links from social media.
109.The homepage should clearly answer these 3questions:• What’s new?  • What’s important?  • What’s helpful?
110.3 Main Areas of Purpose
111.STORYFEED COVERS UTILITY
112.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
113.ENTRY BOX Standard entry box Map Review Storystream Group
114.Scenario-driven variations
115.4-up 2-up 1-up
116.
117.NEWSPAPER A text-heavy layout for busy news reporting
118.
119.EVERGREEN A flexible layout that promotes both recent and evergreen content
120.MORNING RECAP A hero for the morning after a busy night of sporting events
121.“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
122.Brand Expression
123.PROMO BAR Featured hero area to highlight additional stories/ content underneath main stories section
124.
125.MASTHEAD Date, logo, tagline, image
126.
127.
128.
129.Scalable visual design system
130.Problems to solve • What 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?
131.+ Foundational elements Room for customization
132.Foundational elements • Type scale  • Color system • Spacing variables • Type performance budget
133.Type Scale
134.Color System
135.
136.Color System
137.Color System
138.
139.COLOR-HERO-GRADIENT COLOR-NAV-BG COLOR-LINK
140.
141.
142.
143.
144.What’s next?
145.Now that we’re on a unified platform, we can create even more tailored experiences at scale.
146.Successful design patterns don’t exist in a vacuum.
147.Successful design systems solve specific problems.
148.Successful design systems start with content and people.
149.Thank you! @yeseniaa