aacat Design System - for designers & developers
Role
Senior UIUX Designer
Timeline
July-Aug, 2023
Tools
Figma
overview.
Upon joining AAStocks, I discovered the design team struggled with fragmented Adobe XD files, inconsistent components, and manual copy-paste workflows. With no unified design system, designers wasted hours hunting for outdated assets—creating product inconsistency and slowing delivery.
problems.
Problem at hand...
How can I create a design system that is simple, scalable, and understandable by designers and developers?
😭 Wasting Time Searching for Design Component
Designers wasted hours daily hunting, copying, and pasting outdated UI elements across fragmented Adobe XD files, with no single source of truth. (especially me as I new joiner at that time)
📋 Uncontrolled Inconsistency
Unversioned, duplicated components led to unpredictable UI patterns (buttons, colors, spacing) across products, damaging brand coherence and increasing QA failures.
🤔 Development Handoff Bottlenecks
Engineers received inconsistent specs and variable implementations due to drifting designs, causing rework cycles and slowing feature releases.
user journey map.
learning the basics of a design system.
My journey into design systems began with uncertainty—how do you logically organize hundreds of components? Public examples (Shopify, Apple) showed possibilities but not process. The breakthrough came with Atomic Design: its granular approach gave me the framework to build cohesively.
how can I make this helpful for designers and developers?
Looking back at the original problem at hand - my goal is to create a design system that is simple, scalable and understand by designers and developers at the same time. So after building up a design UI kit for designer, I drafted the guideline for front-end developers as well, which included tokens, CSS and spacings information which a quicker and a more summarized way for both of us to communicate.
problems.
😭 Wasting Time Searching for Design Component
Designers wasted hours daily hunting, copying, and pasting outdated UI elements across fragmented Adobe XD files, with no single source of truth. (especially me as I new joiner at that time)
📋 Uncontrolled Inconsistency
Unversioned, duplicated components led to unpredictable UI patterns (buttons, colors, spacing) across products, damaging brand coherence and increasing QA failures.
🤔 Development Handoff Bottlenecks
Engineers received inconsistent specs and variable implementations due to drifting designs, causing rework cycles and slowing feature releases.
Problem at hand...
How can I create a design system that is simple, scalable, and understandable by designers and developers?
Problem at hand...
😭 Wasting Time Searching for Design Component
Designers wasted hours daily hunting, copying, and pasting outdated UI elements across fragmented Adobe XD files, with no single source of truth. (especially me as I new joiner at that time)
📋 Uncontrolled Inconsistency
Unversioned, duplicated components led to unpredictable UI patterns (buttons, colors, spacing) across products, damaging brand coherence and increasing QA failures.
🤔 Development Handoff Bottlenecks
Engineers received inconsistent specs and variable implementations due to drifting designs, causing rework cycles and slowing feature releases.
user journey map.
problems.
😭 Wasting Time Searching for Design Component
Designers wasted hours daily hunting, copying, and pasting outdated UI elements across fragmented Adobe XD files, with no single source of truth. (especially me as I new joiner at that time)
📋 Uncontrolled Inconsistency
Unversioned, duplicated components led to unpredictable UI patterns (buttons, colors, spacing) across products, damaging brand coherence and increasing QA failures.
🤔 Development Handoff Bottlenecks
Engineers received inconsistent specs and variable implementations due to drifting designs, causing rework cycles and slowing feature releases.
Problem at hand...
How can I create a design system that is simple, scalable, and understandable by designers and developers?
user journey map.
learning the basics of a design system.
My journey into design systems began with uncertainty—how do you logically organize hundreds of components? Public examples (Shopify, Apple) showed possibilities but not process. The breakthrough came with Atomic Design: its granular approach gave me the framework to build cohesively.
how can I make this helpful for designers and developers?
Looking back at the original problem at hand - my goal is to create a design system that is simple, scalable and understand by designers and developers at the same time. So after building up a design UI kit for designer, I drafted the guideline for front-end developers as well, which included tokens, CSS and spacings information which a quicker and a more summarized way for both of us to communicate.