Multilingual Design System
A single design system that scales seamlessly across markets, devices, and user groups.
Design System
Timeline
Nov. 2023 - Mar. 2024
My Role
UI/UX Design, Prototyping, Wireframing
Tools
Figma
Team
UI/UX Designer, UX Researcher, BA Manager, FE/BE Developer
Challenge
Balancing New Needs and Design System Progress
Upon joining the project, I encountered only graphic design files with inconsistent spacing and no established components or rules.
In a fast-paced environment prioritizing deadlines and new features, building the design system posed a challenge with limited time.
Consistency and Flexibility in Three Languages
This project spans the English, Thai, and Vietnamese markets, presenting a challenge due to text length differences, especially in Thai and Vietnamese, which typically require more space than English.
Efficient Documentation and Guidelines
Unclear rules and documentation for engineers initially led to higher development and communication costs.
Ensuring that mockup flows are easily understandable for diverse teams and individuals from various backgrounds is crucial.
Enhancement 1
Consistency — Unified components, reducing redundancy
Component Usage Rules: Include their purpose, structure, guidelines for use, and variations.
Main Page Layout: Clearly define padding and spacing.
General Message Definition: Organize frequently occurring error messages.
Component usage rules and page layout
Enhancement 2
Extensiveness — Module variants
Sharing Components: We ensure consistency across languages with varied text lengths through flexible, adaptable elements and responsive design.
Partial design system
Enhancement 3
Scalability — Intuitive naming
Establish a systematic and intuitive naming logic to quickly locate the corresponding target component for replacement.
Template name [Feature] / [Status] / [Version]
Overcoming Language Barriers:
Using English mockup as the 'main component' and other languages as 'instances', we auto-synchronize updates by adjusting the English version.
UI Page Auto-sync
Enhancement 4
Efficiency — Encourage teamwork
Published the Figma library, housing components for accessibility across files.
Created comprehensive mockup documents in English with visual aids for clear communication across teams and nationalities, guiding designers and frontend developers.
Lessons I learned
Never cut corners just to save time.
Setting up the design system early saves time and prevents spreading resources too thin when handling new requirements.
Simplify complexity, and chaos will stay away.
A simple, logical design system enhances component location and application improvement.
Fostering Clear Communication: Establishing a Common Language
Ensure design mockups are clear and understandable for diverse teams, minimizing complex jargon.
