Back
Building first Techcombank design system
Product Design | Design Ops
Jun 1, 2021
Overview
Project: Centralized Design System for Retail banking apps and Retail websites
Timeframe: 9 months (3 sprints discovery → 6 sprints build & roll-out)
Role: Product Designer – Design Ops
Team: 1 Design lead, 7 Product designers (Contributed), 2 UX writers, 1 Mobile lead, 3 Mobile developers, 3 FE developers, 2 QA
The Challenge
Multiple tools and platform
Designers had to be familiar with at least 4 tools, each serves a purpose: design, prototype, handoff and version control. We even used 2 tools for design, which is XD and Sketch. There was no such thing as visual inventory or pattern library.
High effort, low efficiency
The team used to have a complicated workflow between these above-mentioned tools and platforms, which resulted in a lot of time and effort spent but low efficiency due to loss in alignment and consistency.
No version control & documentation
The team didn't even have access to Abstract, which meant designers couldn't control versions of the product. It was also hard for designers to inform each other about any design updates and aligned on UX patterns since we are not working on a cloud-based platform.
Poor and inconsitent experience
New onboarding team members, staff and even stakeholders couldn't access to have an overall view of the current journeys.
Vision & Success Metrics
Product Vision
One Bank, One Language.
A real-time, transparent library that lets every squad build on-brand, accessible interfaces—faster.
Success metrics:
Number of teams, or percentage of designers using the design system
Number of developers accessing for development
Number of bank products built using design system
Reduction in number of design bugs in UAT
Reduction in number of changes during development phase
Stakeholder Map
Product Design • Front-end Guild • Brand & Compliance • QA • C-level Sponsor
Step-by-Step Contribution
# | Phase | Key Actions | Deliverable |
|---|---|---|---|
1 | Audit | Interviewed 23 people, catalogued 1 200 screens | Gap report & cost-of-chaos deck |
2 | Alignment | Facilitated 2-hour workshop, defined “One Language” vision | Signed charter & budget |
3 | Tool Pivot | Bench-tested Figma vs. Sketch+Abstract; ran pilot squad | Migration playbook |
4 | Foundation Library | Built 36 atomic components, wrote Zeroheight docs | Foundation v1.0.0 |
5 | Web & Mobile Cores | Channel-specific patterns with paired devs | Two core libraries |
6 | Local Spec Kits | Coached squads to extend Core for journeys | “Local Payment library” etc. |
7 | Adoption & Training | Weekly DS Friday demos, Improve UX patterns | 70 % designer adoption |
8 | Measurement | Tracked bugs, survey NPS, backlog management | Report Monthly |
9 | Governance | Contribution guide, versioning, monthly audits | DS governance handbook |
Architecture
Ownership
Design-System Team → Foundation & Cores
Product Squads → Local Specs
Tools & Roles:
Figma Org (Owner, Admin, Editor, Viewer, Guest),
Zeroheight,
Confluence
Chaneg management
Learnings & Next Steps
Governance early or duplication creeps back.
Token pipelines keep design & code honest.
Upcoming: automated a11y linting in CI, dark-mode tokens, component health dashboard.
TL;DR
By auditing the chaos, unifying tools, and releasing a token-driven library in incremental sprints, I transformed Techcombank’s fragmented design practice into a cohesive, scalable system—saving time, slashing bugs, and giving every team a single, trusted language to build with.
