Introduction
Design systems are like languages — they need to adapt to different contexts without losing their core meaning. Rigid consistency can become a prison, as the teams at Booking.com and Shopify learned firsthand. The concept of design dialects offers a solution: systematic adaptations that preserve the grammar of your system while expanding its vocabulary to serve diverse users and environments. This guide walks you through the steps to create and integrate design dialects into your system, ensuring your products speak fluently to every user.
What You Need
- An established design system with tokens, components, and patterns
- User research data (including personas, task flows, and environmental context)
- Cross-functional team (designers, developers, product managers)
- Prototyping and testing tools (e.g., Figma, usability testing lab)
- Version control for design artifacts
Step-by-Step Guide
Step 1: Assess Your Context
Before you can create a dialect, you must identify where the standard system breaks down. Look for patterns of exception requests, workarounds, or zero task-completion rates — like the Shopify fulfillment team facing battered Android scanners in dim aisles with gloved hands. Map the specific constraints: device type, environment, user skill level, and task urgency. This step ensures you focus on high-impact adaptations.
Step 2: Define Core Grammar
A dialect must maintain the essence of the parent language. Extract the non-negotiable elements — the phonemes (tokens like color and spacing), words (core components like buttons and inputs), and sentence structure (layout grids). These remain unchanged across all dialects. Document them clearly to avoid drift. For example, at Shopify, the core interaction model (click/tap to confirm) stayed, but the visual presentation changed.
Step 3: Map User Journeys
Understand the exact tasks your dialect will support. For the warehouse pickers, the journey was scanning dozens of items per minute with limited English. Create journey maps that highlight pain points where standard components fail. Use video ethnography or shadowing to capture real behavior. This research will inform which components need adaptation — e.g., button size, contrast, or voice interaction.
Step 4: Design Dialect Components
Now create the adaptations. Design alternative versions of components that fit the new context while respecting the core grammar. For the warehouse scenario, that could mean:
- Large touch targets (minimum 60px) for thick gloves
- High contrast and dark mode for dim aisles
- Icon + single-word labels for limited English
Each adaptation should be a systematic variation, not a one-off hack. Use your design system’s token hierarchy to override values at the dialect level.
Step 5: Test with Real Users
Test the dialect components in the actual environment. Measure task completion time, error rate, and user satisfaction. At Booking.com, A/B testing every detail (color, copy, button shapes) showed that consistency alone didn't drive ROI — solving user problems did. Use quantitative and qualitative data to validate that the dialect improves outcomes. If task completion jumps from 0% to something acceptable, you’re on the right track.
Step 6: Document and Version
Clearly document the dialect rules, including which components change and which remain as core. Use a versioning system (e.g., semantic versioning for design tokens) so teams can track changes. Include examples and rationale — for instance, “Increase button padding by 16px for gloved use.” This documentation becomes the contract between designers and developers, just as Polaris served Shopify’s core system.
Step 7: Iterate and Scale
Treat your dialect as a living system. Collect feedback, monitor metrics, and refine. Once a dialect proves successful for one context (e.g., warehouse), abstract its patterns into reusable guidelines for similar contexts (e.g., factory floor, surgical suite). Over time, your design system will grow a family of dialects, each fluent in its own environment while remaining unmistakably part of the same language.
Tips for Success
- Embrace imperfection: Consistency is a means, not an end. As Kenneth L. Pike said, “Language is a totally coherent system bound to context.” Your design system must bend to context or break.
- Start small: Pick one high-pain context (like the warehouse pickers) and one component to adapt. Prove the concept before expanding.
- Involve developers early: Dialects often require technical flexibility (e.g., theme variables). Partner with engineering to ensure feasibility.
- Don’t reinvent the wheel: Borrow patterns from other systems that have solved similar contexts. The goal is to solve problems, not to be unique.
- Measure what matters: Track user problem resolution, not visual uniformity. A dialect that improves task completion is worth more than a perfectly consistent system that no one can use.
Remember: design dialects are not a failure of consistency — they are a natural evolution of a mature, user-centered system. Let your system speak in accents, and your products will tell better stories.