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

Episode 067 Deep Dive: Design Systems That DifferentiateIntroductionWelcome 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 Notes00:00 - Welcome & Yesenia's BackgroundBen welcomes participants and introduces Yesenia Perez-Cruz as co-hostYesenia's journey: Started with graphic design education (primarily print, some early Dreamweaver)First job at Happy Cog agency doing responsive websitesEarly 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 workJose Garces restaurants project: Six distinct restaurant brands requiring systematic brand expressionVox Media: Led design system for eight distinct editorial brands moving to centralized teamShopify/Polaris: Led system that had good adoption but noticed sameness creeping in Point of sale team adopted admin system—felt too similarMobile team had same issueFocus: How to get diverse expression within huge platformSix years at Shopify, now doing independent design work and consulting03:14 - The Expression Lens: A Different Approach to SystemsMost practitioners enter systems looking for consistencyYesenia's unique lens: Systems can empower/enable expressionConsistency is good to an extent, but that extent is often exaggeratedClear 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 flattenedMany challenges stem from pushing too hard toward consistency04:40 - Survey Results OverviewQuestion 1: Where do you notice sameness emerging? Overall layout and page structureVisual hierarchy and emphasisInteraction patterns and behaviorsBrand 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 samenessFollow-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 efficiencyOthers: Brand cohesionSmaller group: Product differentiationObservation: Most teams want both efficiency AND cohesionForcing choice to primary goal revealed interesting tensionsQuestion 3: Open-ended responses about bottlenecks Component flexibilityToken structuresDocumentation (big theme)Decision paralysis (surprising theme)09:24 - Decision Paralysis and Designer SafetyKey insight: Best design work happens when designers are relaxed, having fun, in flow stateWhen 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 approvedLack of clarity about permissions takes away the safety of designNot about sacrificing brand expression for consistency—need to solve this tensionKnowing the bounds enables creative problem-solving with the design language12:13 - Stephen: AI and Design Systems ParallelWorking with AI recently reveals similar challengesAI "does whatever it can to not follow the rules"Explores areas where documentation doesn't quite forbid somethingSame 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 liberatingHumans have judgment to assess "is this working well?" that AI currently lacksNeed to meet both ends of the spectrum14:09 - Kaelig's Comment: "Everything Looking the Same Is Good"Chat comment challenges fundamental assumptionYesenia's response: There are phases to design systems Typically start wanting convergence—reducing too much variationThis is absolutely validThe problem: How to get convergence without getting stuck in placeFive years ago problem: If you created a system 5 years ago, you're converging on how the product existed thenNeed ability to move from thereExpression 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 tasksExpression is about appropriateness to context and content16:33 - Matt (New York Times): Typography, Culture, and Letting GoNYT designers are very particular about typographyPrevious systems were strict: "text-small, text-medium, text-large"Stakeholder requests: "I want 15 [pixels]"Matt's evolution: Trying to let go of rigid rulesOpportunity: When you let go, the culture of the design org can come outTension: Also creates room for chaosQuestion: 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, CompositionYesenia's framework: Push as far as possible at compositional layer before changing token layerCan do something more powerful at composition than at token levelPromo 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 notchesMuch stronger visual representationDecision criteria: Pus...