The story began when I decided to design a custom design system—not as large as the well-known ones, but a hybrid of localized UI patterns tailored to address our own specific challenges.
I presented the idea, along with its reasoning and potential benefits for the organization, to the technical manager.
It was approved, and this is a summary of the path I followed within a short timeframe.
Goal:
A concise and comprehensive design system aligned with tokenization and variables across all projects, supporting two versions (mobile & desktop), available in two languages (Persian & English), incorporating multi-pattern structures, following best practices, and fully aligned with implementation frameworks.
Timeline:
Estimated completion within 3 to 4 months
Team Size:
3 members plus myself
Execution Steps:
- Overall Planning & Strategy – Initial discussions with the technical manager
- Team Consultation – Collaboration and feedback from the technical team.
- Material Kit Extraction – Identifying commonly used material kits.
- Token & Variable-Based Design System – Building the design system foundation with tokens and variables.
- Component Integration – Connecting components, kits, and variables.
- Module & Page Needs Assessment – Identifying shared and frequently used modules/pages across projects.
- Kit Simplification & Property Refinement – Summarizing kits and optimizing properties based on collected data.
- Task Distribution – Assigning tasks based on team strengths and creating different designs for each module using simplified kits.
- Desktop Version Development.
- Mobile Version (Persian)
- Desktop Version (Persian)
- Parallel Testing – Testing performance across projects and applying necessary improvements.
- System Deployment & Module Enhancement – Launching the design system and upgrading modules during the design of other projects.
Key Results:
- Eliminating Redundant Component Creation – Avoiding the need for separate component development for each project by using base components and kits.
- Full Style Guide Management – Streamlining the style guide for all projects, reducing the initial setup time by 1–2 days per project.
- Simplified Properties – Preventing overly complex and unusable component properties, making it easier for both design and development teams.
- Reduced Tokenization Effort – Minimizing the need to repeatedly create components, modules, variables, and tokens, saving 2–3 days at the start of each project.
Ultimately, due to time constraints, the design system process was paused after 3 months, but upgrades continued within each project, with ongoing testing and refinements until the final project.
If I were to rebuild the design system today, I would skip certain tasks, potentially changing 20–30% of the system, while still retaining the core functionality.
Overall, the final outcome achieved approximately 70% of the original goals, and after discussions with the technical team, this result was validated as an effective and practical implementation.
Fatemeh tayebi
Product Designer
I’m a Product Designer who sees design as more than just aesthetics. Through research, analysis, and uncovering real user needs, I create products that not only solve problems but also deliver lasting experiences. My goal? Turning ideas into products that bring true value to users.