aft Design System
Built a unified design system that streamlined cross-team collaboration and strengthened UX/UI consistency across all products.
2022.11 – 2023.01
🗺️ Roadmap Management
🧱 Design System / Ops
🔄 System Thinking
Project
Overview
The “aft Design System Project” aimed to establish and systemize aft’s own UX/UI design framework, ensuring consistency across all services and improving cross-team collaboration efficiency.
By standardizing design language, components, and style guidelines, we unified the handoff process between design and development, and built the aft Design System using Figma to support scalable and cohesive product experiences.
Strategy Alignment
This project was a strategic initiative to systematize aft's design assets, enhancing product scalability and maintainability. In the short term, it focused on reducing communication overhead between design and engineering teams, while in the long term, it aimed to establish structural coherence and consistent UX across services.
Stakeholders
Collaborated with the following cross-functional teams:
Design Team : Defined UI component hierarchy and built the style guide
Marketing Team : Provided sample prototype guidelines and visual direction
Front-end Team : Mapped Figma library components to code-level elements
Product Team : Reviewed design consistency across services and integrated QA workflows
My Role
I led the project end-to-end, overseeing every phase from system architecture to final design handoff. This included defining the design system structure, documenting standards, establishing collaboration workflows, and leading the actual UX/UI design and QA process.
Key responsibilities included:
Designing the design system architecture and defining component hierarchy
Authoring comprehensive design system guidelines
Establishing collaboration workflows and governance structure
Leading UX/UI design execution and QA handoff processes
Problem
& Goals
Problem
As aft rapidly expanded, UX/UI assets across services were managed with inconsistent standards. Design file structures, component usage rules, and style definitions varied by team, causing frequent misalignments and high communication overhead during design handoff.
Analysis
The root cause was not poor asset management, but the lack of a standardized collaboration structure.
Design and engineering teams spoke different “languages” when defining components, leading to duplicated work, QA errors, and inconsistent user experiences across services.
Definition
We defined the problem as:
“How might we enable design and engineering teams to collaborate using a shared component language and unified system?”
⚡️ The Challenge
The challenge was to implement the design system without disrupting existing team workflows, while bridging the gap between visual design structure and frontend code architecture.
Goal
The goal was to establish a unified design language and collaboration framework for all teams.
Key objectives included:
Reducing communication overhead during design handoff by over 50%
Shortening QA and revision cycles
Ensuring consistent UX/UI quality across all services
Execustion
& Process
Design Process
Research
Comprehensive review of existing design assets and UI structures
Duplicate component list, extracted UX patterns
Define
Defined component hierarchy and style conventions
Design
Built Figma-based library and design documentation
Deliver & Validate
Distributed system through documentation and onboarding
The “aft Design System Project” aimed to establish and systemize aft’s own UX/UI design framework, ensuring consistency across all services and improving cross-team collaboration efficiency.
By standardizing design language, components, and style guidelines, we unified the handoff process between design and development, and built the aft Design System using Figma to support scalable and cohesive product experiences.
Strategy Alignment
This project was a strategic initiative to systematize aft's design assets, enhancing product scalability and maintainability. In the short term, it focused on reducing communication overhead between design and engineering teams, while in the long term, it aimed to establish structural coherence and consistent UX across services.
Stakeholders
Collaborated with the following cross-functional teams:
Design Team : Defined UI component hierarchy and built the style guide
Marketing Team : Provided sample prototype guidelines and visual direction
Front-end Team : Mapped Figma library components to code-level elements
Product Team : Reviewed design consistency across services and integrated QA workflows
My Role
I led the project end-to-end, overseeing every phase from system architecture to final design handoff. This included defining the design system structure, documenting standards, establishing collaboration workflows, and leading the actual UX/UI design and QA process.
Key responsibilities included:
Designing the design system architecture and defining component hierarchy
Authoring comprehensive design system guidelines
Establishing collaboration workflows and governance structure
Leading UX/UI design execution and QA handoff processes
Results
& Impact
Outcome
Beyond design efficiency, this project served as a catalyst for organizational transformation — redefining how cross-functional teams communicate and collaborate. The adoption of a design system established a standardized working environment, enabling faster decision-making and asset reuse for future product initiatives. Additionally, the “Design System Handbook” was developed and distributed, ensuring efficient asset management and long-term maintainability of design resources.
Impact
& Success Metrics
The project led to a structural improvement in the collaboration workflow between design and engineering teams within Aft. After implementing the design system, design QA time was reduced by over 50%, and the component-based framework enabled 2× faster screen production. Communication and handoff errors decreased by over 70%, establishing a consistent UX/UI environment across all teams.
