Building Flexible Design Systems

Building Flexible Design Systems

91cefdf141106fa10674aae74ce05890?s=128

Yesenia Perez-Cruz

November 01, 2017
Tweet

Transcript

  1. Yesenia Perez-Cruz An Event Apart—Seattle April 2018 Scenario-Driven Design Systems

  2. None
  3. None
  4. –Karri Saarinen, Building a Visual Language 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.
  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. –Donella Meadows, Thinking in Systems A system is an interconnected

    set of elements coherently organized in a way that achieves something.
  9. Elements Interconnections Purpose

  10. A good design system feels: Cohesive Unified Connected

  11. A bad design system feels: Disjointed Confusing Difficult to use

  12. Elements Interconnections Purpose

  13. Start your design system 
 with user-scenarios.

  14. None
  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. None
  19. None
  20. Editorial Missions Content Types Audience Needs Typography & Branding Different

  21. Unify eight brand sites into one design and code system.

    1
  22. Provide enough flexibility to allow brands to still feel distinct.

    2
  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. Smaller, modular components come together to define a page. 1

  26. Address inconsistencies in design: layout, color, typography, & treatments of

    similar information 2
  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. None
  32. None
  33. None
  34. Sites felt too similar Did not reflect critical differences in

    content, tone, and audience 1. 2.
  35. None
  36. Homes & Neighborhoods Maps, Guides Tech & Business News, Podcasts

  37. Modules didn’t have a clear purpose.

  38. –Donella Meadows, Thinking in Systems A system is an interconnected

    set of elements coherently organized in a way that achieves something.
  39. Elements Interconnections Purpose

  40. New Hypothesis: 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. None
  45. –Alla Kholmatova, The Language of Modular Design We should start

    with 
 language, not interfaces.
  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. Start with fast, unified platform
 Be scenario-driven when creating variations


    Find key moments for visual brand expression that serve our audience 1. 2. 3.
  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-size- fits-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. –Alla Kholmatova, Design Systems Keeping this map in my mind

    helped me think in families of patterns joined by a shared purpose, rather than individual pages.
  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. None
  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. None
  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. None
  67. None
  68. Scenario-driven design in practice

  69. None
  70. Features

  71. None
  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 LEDE IMAGE TEXT BOX RECIRCULATION MODULE • Consume

    content
 • Find new content
  76. Scenario-driven variations

  77. None
  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. None
  91. None
  92. None
  93. None
  94. Reviews

  95. None
  96. The Scorecard

  97. None
  98. Initial design 1 SCORECARD component with 3 sections: meta info,

    open text field, CTAs
  99. None
  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. None
  107. ONE SCORECARD First unified version: Content has the same hierarchy

    across the board
  108. VENUE GAME PRODUCT After:

  109. Scorecard Variants

  110. None
  111. Homepages

  112. None
  113. Identifying Core Workflows

  114. • What’s the value of the homepage today?
 • Who’s

    our homepage audience?
 • What are they looking for?
 • How are our current homepages performing? Research Phase
  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. • What’s new?
 • What’s important?
 • What’s helpful? The

    homepage should clearly answer these 3 questions:
  118. 3 Main Areas of Purpose

  119. STORYFEED COVERS UTILITY

  120. • 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 STORY FEED
  121. ENTRY BOX Standard entry box Map Review Storystream Group

  122. Scenario-driven variations

  123. 4-up 2-up 1-up

  124. None
  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. None
  132. MASTHEAD Date, logo, tagline, image

  133. None
  134. None
  135. None
  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. None
  143. Color System

  144. Color System

  145. None
  146. COLOR-HERO-GRADIENT COLOR-NAV-BG COLOR-LINK

  147. Good Variation Bad Variation vs

  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. None
  151. None
  152. None
  153. None
  154. None
  155. Before:
 Custom one-off solutions

  156. None
  157. None
  158. None
  159. None
  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. • The Language of Modular Design — Alla Kholmatova
 •

    Design Systems — Alla Kholmatova
 • A Pattern Language — Christopher Alexander
 • Thinking in Systems — Donella Meadows References