Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Flexible Design Systems

Building Flexible Design Systems

Yesenia Perez-Cruz

November 01, 2017
Tweet

More Decks by Yesenia Perez-Cruz

Other Decks in Design

Transcript

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

    View full-size slide

  2. –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.

    View full-size slide

  3. How do you define
    a design system?

    View full-size slide

  4. A collection of reusable
    components assembled to
    build any number of
    applications?

    View full-size slide

  5. A system is an interconnected set of
    elements coherently organized in a
    way that achieves something.
    –Donella Meadows, Thinking in Systems

    View full-size slide

  6. –Donella Meadows, Thinking in Systems
    A system is an interconnected set of
    elements coherently organized in a
    way that achieves something.

    View full-size slide

  7. Elements
    Interconnections
    Purpose

    View full-size slide

  8. A good design system feels:
    Cohesive
    Unified
    Connected

    View full-size slide

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

    View full-size slide

  10. Elements
    Interconnections
    Purpose

    View full-size slide

  11. Start your design system 

    with user-scenarios.

    View full-size slide

  12. 8 brands
    350+ websites
    1 design system

    View full-size slide

  13. Why?
    • Easier to design, build,
    launch, maintain, and evolve
    the sites on our platform.

    • Faster to launch new brands

    View full-size slide

  14. Tell better
    stories, faster

    View full-size slide

  15. Editorial Missions
    Content Types
    Audience Needs
    Typography & Branding
    Different

    View full-size slide

  16. Unify eight brand sites into
    one design and code system.
    1

    View full-size slide

  17. Provide enough flexibility to
    allow brands to still feel distinct.
    2

    View full-size slide

  18. 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?

    View full-size slide

  19. Early
    assumptions

    View full-size slide

  20. Smaller, modular components
    come together to define a page.
    1

    View full-size slide

  21. Address inconsistencies in design:
    layout, color, typography, &
    treatments of similar information
    2

    View full-size slide

  22. Hypothesis:
    A set of flexible, brand-agnostic
    modules with a theming system
    will give us the most range.

    View full-size slide

  23. It’s legos, right?

    View full-size slide

  24. Too focused on 

    LAYOUTS

    View full-size slide

  25. 4-up
    2-up
    1-up

    View full-size slide

  26. Sites felt too similar
    Did not reflect critical
    differences in content,
    tone, and audience
    1.
    2.

    View full-size slide

  27. Homes & Neighborhoods
    Maps, Guides
    Tech & Business
    News, Podcasts

    View full-size slide

  28. Modules didn’t have a
    clear purpose.

    View full-size slide

  29. –Donella Meadows, Thinking in Systems
    A system is an interconnected set of
    elements coherently organized in a
    way that achieves something.

    View full-size slide

  30. Elements
    Interconnections
    Purpose

    View full-size slide

  31. New Hypothesis:
    In order to create a flexible
    system, we needed to start by
    being specific.

    View full-size slide

  32. What we
    learned

    View full-size slide

  33. You can’t start
    with individual
    components

    View full-size slide

  34. Successful design
    patterns don’t exist in
    a vacuum.

    View full-size slide

  35. –Alla Kholmatova, The Language of Modular Design
    We should start with 

    language, not interfaces.

    View full-size slide

  36. Successful design
    systems start with
    content and people.

    View full-size slide

  37. Audience Editorial Content Revenue

    View full-size slide

  38. 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?

    View full-size slide

  39. 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.

    View full-size slide

  40. 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

    View full-size slide

  41. 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

    View full-size slide

  42. No hypothetical
    situations

    View full-size slide

  43. Identifying
    Scenarios

    View full-size slide

  44. “UI Inventory”
    Brad Frost, http://bradfrost.com/blog/post/interface-inventory/

    View full-size slide

  45. “Purpose-Directed Inventory”
    Alla Kholmatova, https://www.smashingmagazine.com/design-systems-book/

    View full-size slide

  46. –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.

    View full-size slide

  47. 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.

    View full-size slide

  48. Know your
    use case.
    –Salesforce, Lightning Design System

    View full-size slide

  49. 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/

    View full-size slide

  50. via: Shopify, https://polaris.shopify.com

    View full-size slide

  51. “Put Merchants First”

    View full-size slide

  52. “Callout cards are used to encourage merchants 

    to take an action related to a new feature 

    or opportunity”

    View full-size slide

  53. https:/
    /playbook.cio.gov/designstandards/

    View full-size slide

  54. Scenario-driven design
    in practice

    View full-size slide

  55. Turn 18 distinct templates
    with 81 code snippets into 

    1 flexible design system

    View full-size slide

  56. Identifying Core
    Workflows

    View full-size slide

  57. Audience goals consistent
    across brands, but content
    differed.

    View full-size slide

  58. Audience Goals
    LEDE IMAGE
    TEXT BOX
    RECIRCULATION
    MODULE
    • Consume content

    • Find new content

    View full-size slide

  59. Scenario-driven
    variations

    View full-size slide

  60. LEDE IMAGE VARIATIONS

    View full-size slide

  61. HED BELOW
    Highlights
    photography

    View full-size slide

  62. HED ABOVE
    Prioritizes text
    over photography

    View full-size slide

  63. HED OVERLAY
    Photo as background,
    for lower quality images

    View full-size slide

  64. HED BELOW

    SHORT IMAGE
    Short image, valuable
    for illustration or
    widescreen images

    View full-size slide

  65. SIDE-BY-SIDE
    Specifically for
    vertical images

    View full-size slide

  66. Only add a layout if there’s
    a content need.

    View full-size slide

  67. Content
    Audit

    View full-size slide

  68. Content
    Audit
    • Does it add value?

    • Is it available to more than
    3 brands? 

    • Is it a must-have for 1
    brand?

    View full-size slide

  69. Snippet
    Examples

    View full-size slide

  70. Brand Expression

    View full-size slide

  71. The Scorecard

    View full-size slide

  72. Initial design
    1 SCORECARD component
    with 3 sections: meta info,
    open text field, CTAs

    View full-size slide

  73. Where to eat
    What to order
    What game to buy What product to buy

    View full-size slide

  74. 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

    View full-size slide

  75. VENUE CARD GAME CARD PRODUCT CARD

    View full-size slide

  76. VENUE CARD
    Highlights content that helps you
    find where to eat

    View full-size slide

  77. GAME CARD
    Highlights content specific to 

    games

    View full-size slide

  78. PRODUCT CARD
    Highlights content that is specific to
    products with Buy Now buttons

    View full-size slide

  79. ONE SCORECARD
    First unified version:
    Content has the same hierarchy
    across the board

    View full-size slide

  80. VENUE
    GAME
    PRODUCT
    After:

    View full-size slide

  81. Scorecard
    Variants

    View full-size slide

  82. Identifying Core
    Workflows

    View full-size slide

  83. • 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

    View full-size slide

  84. Talk to your audience

    View full-size slide

  85. The audience from our user survey was more likely to use a phone, more
    likely to follow links from social media.

    View full-size slide

  86. • What’s new?

    • What’s important?

    • What’s helpful?
    The homepage
    should clearly
    answer these 3
    questions:

    View full-size slide

  87. 3 Main Areas of Purpose

    View full-size slide

  88. STORYFEED COVERS UTILITY

    View full-size slide

  89. • 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

    View full-size slide

  90. ENTRY BOX
    Standard entry box
    Map
    Review
    Storystream Group

    View full-size slide

  91. Scenario-driven
    variations

    View full-size slide

  92. 4-up
    2-up
    1-up

    View full-size slide

  93. NEWSPAPER
    A text-heavy layout for busy news reporting

    View full-size slide

  94. EVERGREEN
    A flexible layout that promotes both recent and evergreen content

    View full-size slide

  95. MORNING RECAP A hero for the morning after a busy night of sporting events

    View full-size slide

  96. “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

    View full-size slide

  97. Brand Expression

    View full-size slide

  98. PROMO BAR
    Featured hero area to
    highlight additional stories/
    content underneath main
    stories section

    View full-size slide

  99. MASTHEAD
    Date, logo, tagline, image

    View full-size slide

  100. Scalable visual design
    system

    View full-size slide

  101. 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

    View full-size slide

  102. Foundational
    elements
    Room for
    customization
    +

    View full-size slide

  103. Foundational
    elements
    • Type scale

    • Color system
    • Spacing variables

    View full-size slide

  104. Color System

    View full-size slide

  105. Color System

    View full-size slide

  106. Color System

    View full-size slide

  107. COLOR-HERO-GRADIENT
    COLOR-NAV-BG
    COLOR-LINK

    View full-size slide

  108. Good Variation Bad Variation
    vs

    View full-size slide

  109. 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

    View full-size slide

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

    View full-size slide

  111. Before:

    Custom one-off
    solutions

    View full-size slide

  112. Now:

    Telling better
    stories, faster

    View full-size slide

  113. What’s next?

    View full-size slide

  114. Now that we’re on a unified
    platform, we can create even more
    tailored experiences at scale.

    View full-size slide

  115. Successful design
    patterns don’t exist in
    a vacuum.

    View full-size slide

  116. Successful design
    systems solve
    specific problems.

    View full-size slide

  117. Successful design
    systems start with
    content and people.

    View full-size slide

  118. Thank
    you! @yeseniaa

    View full-size slide

  119. • The Language of Modular
    Design — Alla Kholmatova

    • Design Systems — Alla
    Kholmatova

    • A Pattern Language —
    Christopher Alexander

    • Thinking in Systems —
    Donella Meadows
    References

    View full-size slide