Localize

Localize — Design Across Cultures

Overview

Localization is not translation. Translation converts words; localization adapts the experience.

When a product enters a new market, everything is in play: information density, navigation patterns, color meaning, icon comprehension, date formats, trust signals, payment flows, legal compliance, and the fundamental assumptions about how people make decisions. A checkout flow designed for US consumers doesn't become a Japanese experience by translating the strings. A trust-building pattern that works in Germany may be irrelevant in Brazil and offensive in Saudi Arabia.

Design for localization from the start, or pay for it exponentially later. Retrofitting RTL support, plural rules, and cultural adaptation into a product that assumed English-speaking Western users is one of the most expensive kinds of design debt.

When to activate this skill: International expansion planning, i18n readiness audits, new market entry design, RTL adaptation, cultural review of existing designs, localization testing strategy, or anytime someone says "just translate it" and the problem is deeper than language.

Skill family

Localize works alongside the full Intent skill system:

• `/articulate`: Everything they write will be localized. Content strategy must design for translation from the start — sentence structure, concatenation, tone, humor, idiom. If the English copy is clever, the localized copy may be incomprehensible. Articulate designs translatable content; localize ensures it survives translation.
• `/organize`: Navigation and labeling may need cultural adaptation. Category structures that make sense in one culture may be arbitrary in another. Menu labels that are concise in English may expand to unwieldy lengths in German or Finnish.
• `/fortify`: i18n technical readiness — text expansion breaking layouts, RTL rendering bugs, date/number format parsing failures, character encoding issues. Fortify maps the failure modes; localize defines the requirements that prevent them.
• `/strategize`: Market analysis and audience definition per locale. Which markets, in what order, with what level of adaptation? /strategize defines the business case; /localize defines the design implications.
• `/investigate`: Cultural research methods for unfamiliar markets. When your assumptions about a market are based on stereotypes rather than evidence, investigate plans the research to validate or challenge them.
• `/philosopher`: A cross-cutting cognitive mode for confronting invisible assumptions. Invoke when: your design team is monocultural and can't see its own biases, the "obvious" user flow is obvious only to people from your culture, or you need the question: "What cultural assumptions are invisible to us because we're inside them?"

Core capabilities

1. Cultural dimension analysis for UX

Cultural frameworks provide starting hypotheses for design adaptation — not stereotypes to design by. Use them to generate questions, then validate with research.

High-context vs. low-context communication:

• High-context cultures (Japan, China, Arab countries, Korea): communication is implicit, relationships matter before transactions, visual density is expected (not cluttered), social proof and authority signals carry weight, indirectness is politeness.
• Low-context cultures (US, Germany, Scandinavia, Netherlands): communication is explicit, task-first flows are preferred, minimal UI is valued, direct calls to action work, users expect to self-serve.
• UX implications: onboarding flows, help text density, social features, the balance between guidance and autonomy.

Power distance:

• High power distance: formal tone, hierarchical navigation, respect for authority in copy ("Approved by Dr. [Name]"), institutional trust signals.
• Low power distance: informal tone, flat navigation, peer trust signals ("1,000 users like you chose this"), egalitarian messaging.
• UX implications: form of address, tone of voice, error messages, authority signals.

Individualism vs. collectivism:

• Individualist cultures: personal accounts, individual preferences, "my" dashboard, solo decision-making flows.
• Collectivist cultures: family/group accounts, shared decision-making, social features, gift-giving flows, group purchase patterns.
• UX implications: account models, sharing features, decision-making flows, social proof patterns.

Uncertainty avoidance:

• High uncertainty avoidance (Japan, Germany, Greece): detailed explanations, confirmation steps, progress indicators, safety nets, explicit guarantees.
• Low uncertainty avoidance (Singapore, Denmark, UK): tolerance for ambiguity, fewer confirmation steps, willingness to explore, comfort with uncertainty.
• UX implications: how much guidance to provide, number of confirmation steps, error prevention vs. error recovery.

Long-term orientation:

• Long-term oriented cultures: loyalty programs resonate, subscription models accepted, trust built gradually, relationship-first onboarding.
• Short-term oriented cultures: immediate value expected, trial-first models, quick wins, instant gratification patterns.

IMPORTANT: These are spectrums and tendencies, not rules. Every individual is different. Every market has subcultures. Never design for a stereotype. Use these dimensions to generate hypotheses, then validate with /investigate research and /measure data from real users in the target market.

2. RTL and LTR design

Right-to-left layout is not mirroring. It requires understanding what flips, what doesn't, and what needs rethinking.

What flips:

• Layout direction: content flows right-to-left
• Text alignment: right-aligned by default
• Navigation order: back arrow points right, forward points left
• Progress indicators: fill from right to left
• Swipe directions: next is left-to-right, previous is right-to-left
• Slider direction: min on right, max on left
• Icon direction: icons that imply direction (arrows, reply, share) flip

What does NOT flip:

• Numbers and phone numbers (always LTR within their container)
• Media playback controls (play/pause/skip are universal)
• Clock direction
• Brand logos
• Universal icons (play, pause, close, add)
• Checkmarks and toggles (debated, but generally don't flip)

Bidirectional text: When RTL and LTR content mix — Arabic text with English brand names, code snippets, URLs, email addresses — the Unicode Bidirectional Algorithm handles most cases, but edge cases require manual intervention with directional markers. Test with real mixed-direction content, not lorem ipsum.

CSS implementation principles:

• Use logical properties: inline-start/inline-end instead of left/right, block-start/block-end instead of top/bottom
• Use dir="rtl" on the root element, not CSS transforms
• Flexbox and Grid handle direction automatically with logical properties
• Absolute positioning and transforms need manual attention

Testing RTL:

• Test with actual RTL users, not just mirrored screenshots
• Test with real Arabic/Hebrew content, not reversed English
• Test bidirectional content: Arabic paragraphs with English terms, numbers, URLs
• Test form inputs: cursor position, text selection, copy-paste behavior

3. Content adaptation beyond translation

Translation converts words. Content adaptation converts meaning, structure, and formatting.

Text expansion and contraction:

• German expands ~30% from English. Finnish ~40%. Some compounds create single words that are 30+ characters.
• Chinese and Japanese can compress 30-50% from English character count (but may need more vertical space due to character complexity).
• Layout MUST accommodate expansion without breaking. Test with pseudo-localized strings at 150% length as a minimum.

String concatenation is the enemy: