Full: Episode 067 of The Question with Ben Callahan & Yesenia Perez-Cruz on Design Systems that Differentiate

Episode 067 Deep Dive: Design Systems That Differentiate

Introduction

Welcome to The Question Episode 067 Deep Dive. Host Ben Callahan is joined by Yesenia Perez-Cruz—author of Expressive Design Systems and former design systems leader at Vox Media and Shopify—for an interactive conversation about design systems that differentiate. This session brings together dozens of design systems practitioners to discuss the tension between sameness and differentiation in our consuming products.

Ben surveyed 1,027 design system practitioners and received 55 responses exploring three key questions: Where does sameness emerge in products? What's your system's primary goal (efficiency, cohesion, or differentiation)? And what bottleneck most restricts product expression? The conversation reveals the cultural, architectural, and philosophical challenges of building systems that both accelerate and differentiate—featuring perspectives from teams across the world.

Show Notes

00:00 - Welcome & Yesenia's Background

• Ben welcomes participants and introduces Yesenia Perez-Cruz as co-host
• Yesenia's journey: Started with graphic design education (primarily print, some early Dreamweaver)
• First job at Happy Cog agency doing responsive websites
• Early realization: Need to make decisions systematically (not 10 different header styles)
• 2011: First article on design systems (describing systematic decision-making process)
• Agency work delivering "style guides" to clients, early theming work
• Jose Garces restaurants project: Six distinct restaurant brands requiring systematic brand expression
• Vox Media: Led design system for eight distinct editorial brands moving to centralized team
• Shopify/Polaris: Led system that had good adoption but noticed sameness creeping in 
  • Point of sale team adopted admin system—felt too similar
  • Mobile team had same issue
  • Focus: How to get diverse expression within huge platform
• Six years at Shopify, now doing independent design work and consulting

03:14 - The Expression Lens: A Different Approach to Systems

• Most practitioners enter systems looking for consistency
• Yesenia's unique lens: Systems can empower/enable expression
• Consistency is good to an extent, but that extent is often exaggerated
• Clear inconsistencies can break trust (example: phishing email from your bank)
• But consistency can delve into a space where "it's not good anymore"
• The problem: Design solutions aren't actually communicating information when content is flattened
• Many challenges stem from pushing too hard toward consistency

04:40 - Survey Results Overview

• Question 1: Where do you notice sameness emerging? 
  • Overall layout and page structure
  • Visual hierarchy and emphasis
  • Interaction patterns and behaviors
  • Brand expression and personality
  • "I don't notice meaningful sameness"
  • Results: Fairly even distribution (30-50% each)
  • Very few people (5-6) said they don't notice sameness
• Follow-up question posted: For those who don't notice sameness, what's unique about your architecture or processes?
• Question 2: Primary goal of your system? 
  • About half: Operational efficiency
  • Others: Brand cohesion
  • Smaller group: Product differentiation
  • Observation: Most teams want both efficiency AND cohesion
  • Forcing choice to primary goal revealed interesting tensions
• Question 3: Open-ended responses about bottlenecks 
  • Component flexibility
  • Token structures
  • Documentation (big theme)
  • Decision paralysis (surprising theme)

09:24 - Decision Paralysis and Designer Safety

• Key insight: Best design work happens when designers are relaxed, having fun, in flow state
• When you don't know the bounds you can work within, you tense up
• "Can I put this line here? Can I use this color background? Will I get in trouble?"
• Result: Retreat to what feels safe—copying what's already approved
• Lack of clarity about permissions takes away the safety of design
• Not about sacrificing brand expression for consistency—need to solve this tension
• Knowing the bounds enables creative problem-solving with the design language

12:13 - Stephen: AI and Design Systems Parallel

• Working with AI recently reveals similar challenges
• AI "does whatever it can to not follow the rules"
• Explores areas where documentation doesn't quite forbid something
• Same question: Where are proper constraints vs. room for creative exploration?
• How do companies prioritize tasks for AI (needing explicit boundaries) vs. humans?
• Yesenia's response: Design language as a tool for creative freedom can be liberating
• Humans have judgment to assess "is this working well?" that AI currently lacks
• Need to meet both ends of the spectrum

14:09 - Kaelig's Comment: "Everything Looking the Same Is Good"

• Chat comment challenges fundamental assumption
• Yesenia's response: There are phases to design systems 
  • Typically start wanting convergence—reducing too much variation
  • This is absolutely valid
  • The problem: How to get convergence without getting stuck in place
• Five years ago problem: If you created a system 5 years ago, you're converging on how the product existed then
• Need ability to move from there
• Expression clarification: Doesn't necessarily mean brand personality 
  • Core question: Does the thing you're using look like the action you're taking?
  • Mac example: Control Center (big affordances for quick actions) vs. System Settings (tiny controls, explanatory text)
  • Spectrum of UI tailored for specific tasks
• Expression is about appropriateness to context and content

16:33 - Matt (New York Times): Typography, Culture, and Letting Go

• NYT designers are very particular about typography
• Previous systems were strict: "text-small, text-medium, text-large"
• Stakeholder requests: "I want 15 [pixels]"
• Matt's evolution: Trying to let go of rigid rules
• Opportunity: When you let go, the culture of the design org can come out
• Tension: Also creates room for chaos
• Question: How do you give up design system control and give control to customers?
• How do teams manage based on org culture?

17:44 - Layers: Tokens, Components, Composition

• Yesenia's framework: Push as far as possible at compositional layer before changing token layer
• Can do something more powerful at composition than at token level
• Promo card example: 
  • Team wants new color token for "promo"
  • Yesenia pushes back: What's more powerful to indicate promotion?
  • Uber Eats reference: Promo card looks like actual coupon—different z-index, inset notches
  • Much stronger visual representation
• Decision criteria: Pus...