An Event Apart: “Scenario-Driven Design Systems”

Yesenia Perez-Cruz speaking at An Event Apart Seattle 2018 on April 2, 2018.

Unified design systems are essential to building, maintaining, and evolving our sites and products. By empowering disparate teams via a common visual and UX language, they help us create cohesive user experiences. But creating a unified system that scales to serve a variety of content and use cases can be challenging. Sharing insights from her experience creating a unified design system for eight media brands with eight distinct editorial strategies, Yesenia will show how to approach a design system via a user-centered lens. Learn how being scenario-driven helps you design a scalable system that responds flexibly to specific contexts.

Notes

  • “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
  • How do you define a design system?
    • A collection of reusable components assembled to build any number of applications?
    • “A system is an interconnected set of elements coherently organized in a way that achieves something.” — Donella Meadows, Thinking in Systems
  • Requirements for a design system:
    • Elements
    • Interconnections
    • Purpose
  • A good design system (when all 3 requirements exist) feels:
    • Cohesive
    • Unified
    • Connected
  • A bad design system (when all 3 requirements don’t exist) feels:
    • Disjointed
    • Confusing
    • Difficult to use
  • Success should be measured by how all 3 requirements are coming together
  • Elements — design systems fail when there’s too much focus on elements
  • Start your design system with user-scenarios
  • Vox Media — 8 brands, 350+ websites, 1 design system
    • Why?
      • Easier to design, build, launch, maintain, and evolve the sites on our platform
      • Faster to launch new brands
    • Tell better stories, faster
    • Needs to support different:
      • Editorial Missions
      • Content Types
      • Audience Needs
      • Typography & Branding
    • Goals:
      • Unify eight brand sites into one design and code system
      • Provide enough flexibility to allow brands to still feel distinct
    • 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?
  • Early assumptions:
    • Smaller, modular components come together to define a page
    • Address inconsistencies in design: layout, color, typography, & treatments of similar information
  • Hypothesis: A set of flexible, brand-agnostic modules with a theming system will give us the most range
  • Problems with hypothesis:
    • Too focused on layouts
    • Sites felt too similar
    • Did not reflect critical differences in content, tone, and audience
    • Modules didn’t have a clear purpose — Differences between them were only presentational
  • New Hypothesis: In order to create a flexible system, we needed to start by being specific
  • What we learned
    • You can’t start with individual components
      • Successful design patterns don’t exist in a vacuum
    • “We should start with language, not interfaces.” — Alla Kholmatova, The Language of Modular Design
    • Successful design systems start with content and people
    • Had to ask better questions
      • 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?
  • Improved process:
    • Start with fast, unified platform
    • Be scenario-driven when creating variations
    • Find key moments for visual brand expression that serve our audience
  • 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
  • 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
  • No hypothetical situations
  • Identifying Scenarios
    • UI inventory
    • Purpose-directed inventory
    • Map modules to user journeys to see how patters fit together in the big picture
    • “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
    • This helped:
      • 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
  • Examples:
    • Shopify
    • U.S. Web Design Standards
  • Scenario-driven design in practice — Vox Media
    • Features
      • Turn 18 distinct templates with 81 code snippets into 1 flexible design system
      • Identifying core workflows
        • Audience goals consistent across brands, but content differed
        • Audience Goals:
          • Consume content
          • Find new content
      • Scenario-driven variations — Lede image variations
        • Hed below — highlights photography
        • Hed above — prioritizes text over photography
        • Hed overlay — photo as background, for lower quality images
        • Hed below short image — short image, valuable for illustration or widescreen images
        • Side-by-side — specifically for vertical images
    • Only add a layout if there’s a content need
    • Snippets
      • Content audit
        • Does it add value?
        • Is it available to more than 3 brands?
        • It is a must-have for 1 brand?
    • Brand expression
    • Reviews — the scorecard
      • Initial design — 1 scorecard component with 3 sections: meta info, open text field, call-to-actions
        • Venue card — highlights content that helps you find where to eat
        • Game card — highlights content specific to games
        • Product card — highlights content that is specific to products with “buy now” buttons
      • First unified version: One scorecard — content has the same hierarchy across the board
      • After — scorecard variants:
        • Venue
        • Game
        • Product
    • Homepages
      • Identifying core workflows
        • 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?
        • Talk to your audience
        • The homepage should clearly answer these 3 questions:
          • What’s new?
          • What’s important?
          • What’s helpful?
      • 3 main areas of purpose:
        • Story feed
        • Covers
        • Utility
      • 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
      • Scenario-driven variations
        • 4-up, 2-up, 1-up
        • Newspaper — a text-heavy layout for busy news reporting
        • Evergreen — a flexible layout that promotes both recent and evergreen content
        • Morning recap — a hero for the morning after a busy night of sporting events
      • “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
      • Getting more specific with the name of the module helped us figure out their purpose
      • Brand expression
        • Promo bar — featured hero area to highlight additional stories/content underneath main stories section
        • Masthead — date, logo, tagline, image
    • Scalable visual design system
      • 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
      • Foundational elements + room for customization
      • Foundational elements:
        • Type scale
        • Color system
        • Spacing variables
      • Type scale
      • Color system
      • 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
      • Bad variation
        • Visual variation on components that serve the same function across brands
        • Don’t do much to strengthen brand voice
    • Before: custom one-off solutions
    • Now: Telling better stories, faster
    • What’s next? — Now that we’re on a unified platform, we can create even more tailored experiences at scale
  • Successful design patterns don’t exist in a vacuum
  • Successful design systems solve specific problems
  • Successful design systems start with content and people

Related Links