Building a Scalable Design System from Scratch to Elevate Team Efficiency
Design System • UI/UX • Design Strategy
Project Overview
I led the design system initiative for Anzir, a platform that brings JuBenSha (MysteryAct) to life—an immersive role-playing game blending tabletop gaming, interactive storytelling, and puzzle-solving with deduction. It offers a mobile app for players and a SaaS authoring platform for creators, enabling seamless content creation and gameplay.
This initiative focused on optimizing workflows to enhance efficiency, productivity, and usability across design and development. Its success set a new standard for design consistency and scalability.
Role
UX & Product Designer
Research, UI/UX Design, Design System, Design Strategy, Documentation
Team
Anzir
Collaborated with a PM, a designer, and 5 tech engineers.
Duration
3 weeks
Tools
Figma, FigJam, Notion
NOTE
Some things only become noticeable when they’re not there. Throughout my studies and internships, I worked with various design systems—they were always there, quietly shaping the workflow. But when I joined Anzir and found there wasn’t one, I finally understood why they exist and why they matter.
Background
What is JuBenSha in Anzir?
Anzir is a platform that brings JuBenSha (Mystery Act) to life—an immersive role-playing game blending tabletop gaming, interactive storytelling, and puzzle-solving with deduction. It offers a mobile app for players and a SaaS Author Studio for creators, enabling seamless content creation and gameplay.
Why a Design System?
Early on, Anzir operated with a small team and no structured design system, leading to UI/UX inconsistencies as it expanded. Without standardized components, designers and developers often recreated elements or sourced them from scattered resources, increasing workload and limiting scalability. The lack of consistency also made it difficult to establish a clear visual identity.
Design Process
Planning
Situation Analysis
Define Objectives
Design Strategy
Team Collaboration Methods
Design & Build
Design Systems
Prototyping
Documentation
Design Principles
Components Library
Maintain, Iterate
& Deliver
Gather & Implement Feedback
Monitor Design System Adoption
Team Training & Design Reviews
Problem Statement
Without a structured design system, developers and designers adopted inconsistent approaches, facing challenges with fragmented structures and maintaining components efficiently. These inconsistencies slowed down both design and development processes.
Challenges
✦ No design system, No guidelines
The absence of a structured design system led to inconsistencies, inefficiencies, and a fragmented design approach across platforms.
✦ Lack of reusability in UI
Without standardized components, UI fragmentation made maintenance and scalability challenging.
✦ Limited resources
With a small team and a fast-paced development cycle, the design system had to be developed within a short 2-3 week timeframe while ensuring minimal disruption to ongoing development.
Objectives
✦ Build a unified, multi-platform design system
Introduce a structured design system to streamline design and development workflows.
✦ Complete within 2-3 weeks
A highly focused, strategic approach was required—prioritizing core components and leveraging existing design assets where possible.
✦ Seamless integration with Existing UI and Workflows
Ensure seamless adoption so designers and developers can easily implement the system without slowing down ongoing projects.
Planning
Situation Analysis
In the initial design and development process, the team relied on Material 3—Google’s open-source design system—to reference and reuse resources such as grids, fonts, and colors. However, the absence of clear guidelines and standardization led to inconsistencies and inefficiencies across the platform.
Planning
Design Strategy
Given limited resources and the need for a fast, scalable solution, building Anzir’s design system entirely from scratch was not feasible. Instead, the focus was on leveraging open-source frameworks as a foundation while adapting them to fit Anzir’s unique requirements.
To ensure a structured and maintainable system, the approach followed three key strategies.
Adapt & Customize
Integrate essential components from open-source resources while defining Anzir’s design guidelines.
Prioritize Core Components
Focus on key UI elements first to ensure immediate usability.
Scalability & Collaboration
Establish design principles that enable future expansion and team-wide adoption.
Design & Build
Design System
With a clear strategy in place, I established the visual style and design tokens as the foundation, defining core attributes such as colors, typography, spacing, radius, and elevation to ensure consistency across the system.
Building on this foundation, I developed a reusable UI component library, standardizing design elements to enhance efficiency and maintainability.
Documentation
Design Principles
To rapidly build essential components within a limited timeframe, the design system was initially developed as an MVP. To ensure long-term scalability and ease of adoption, I gradually created documentation outlining the system’s structure and usage.
I established core design principles to guide consistency and decision-making, helping designers and developers better understand the system while providing a foundation for future expansion.
To improve accessibility, documentation was available in both Figma and Notion—Figma for quick reference within design workflows, and Notion as a structured, centralized resource. Given the team’s multilingual environment, all documentation was provided in both English and Chinese, ensuring seamless access and understanding for all members.
Maintain, Iterate & Deliver
I spent two weeks building the design system and one week refining and delivering it to ensure smooth adoption. To maintain its effectiveness and scalability, I established a continuous improvement process focused on feedback, iteration, and team training.
Collected feedback from designers and developers via shared documentation, refining components based on real-world usage.
Conducted training sessions and design reviews to ensure seamless adoption and best practices.
Successfully delivered a unified, multi-platform design system, which has been running effectively for over three months, improving team efficiency.
This iterative approach ensured the system remained scalable, well-integrated, and continuously evolving.
This design system laid the foundation for a more efficient, scalable, and cohesive workflow at Anzir, ensuring long-term usability and seamless collaboration across teams.
