Building Techcombank’s first design system
Product Design | Design Ops
June 1, 2021
Overview
Project: Centralized design system for retail banking apps and retail websites
The Challenge
Multiple tools and platforms
Designers had to be familiar with at least four tools, each serving a different purpose: design, prototyping, handoff, and version control. We even used two design tools—XD and Sketch. There was no visual inventory or pattern library.
High effort, low efficiency
The team had a complicated workflow across these tools and platforms, which consumed significant time and effort yet remained inefficient due to lost alignment and consistency.
No version control & documentation
The team didn’t have access to Abstract, so designers couldn’t manage product versions. It was also difficult to share design updates and stay aligned on UX patterns because we weren’t working on a cloud-based platform.
Poor and inconsistent experience
New team members, staff, and stakeholders couldn’t get an overall view of the current journeys during onboarding.
Vision & Success Metrics
Product Vision
*One Bank, One Language. A real-time, transparent library that helps 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 it for development
- Number of bank products built using the design system
- Reduction in the number of design bugs in UAT
- Reduction in the number of changes during the 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
Change management
Learnings & Next Steps
- Establish governance early, or duplication creeps back.
- Token pipelines keep design and code in sync.
- Upcoming: automated a11y linting in CI, dark-mode tokens, and a component health dashboard.
TL;DR
By auditing the chaos, unifying tools, and releasing a token-driven library through incremental sprints, I helped transform Techcombank’s fragmented design practice into a cohesive, scalable system—saving time, reducing bugs, and giving every team a single, trusted language to build with.