Bangkok Bank’s Design System Transformation
Client Overview
Bangkok Bank is one of Thailand’s largest and most influential banks. However, despite its strong financial presence, its mobile banking app suffered from inconsistent user experiences, inefficient design workflows, and technical debt that slowed down product development.
Results & Impact
20-30% Faster Design & Development Cycles
Streamlined workflows led to rapid feature deployment.
Eliminated Design & Dev Gaps
Developers and designers worked in sync, reducing inconsistencies.
Scalability & Future-Proofing
The system became adaptable for new projects within the organization.
Stronger Team Culture
Improved collaboration led to a more engaged and proactive design team.
Internal Recognition
The success of this design system influenced other teams within the bank to adopt similar methodologies.
The Challenge
Bangkok Bank had an existing design system, but it lacked structure, governance, and scalability. Key pain points included:
Fragmented Design Processes: Teams operated in silos (UX, UI, UX Writers, UX Researchers), with minimal collaboration.
No Governance: The design system was constantly edited by all designers, leading to inconsistencies and design debt.
Developer Disconnect: Developers were unaware of available libraries and often rebuilt components, causing inefficiencies.
Scalability Issues: Without a unified foundation, making design updates required extensive manual effort across multiple screens.
Stakeholder Misalignment: The true value of a design system was not fully understood by leadership, limiting investment and adoption.
Our Approach
To address these challenges, we conducted:
Stakeholder & Team Interviews: Understanding pain points across design and development teams.
Audit & Workshops: Reviewing Figma libraries, processes, and collaboration gaps.
Strategic Governance Implementation:
Introduced a dedicated design system squad (Phoenix Squad) with sole editing rights.
Separated foundations, component libraries, and documentation into structured files.
Provided hands-on training to designers and developers for seamless adoption.
New Collaboration Model: Shifted from a rigid waterfall model to a hybrid approach with cross-functional squads.
Component Demo App: Built a dedicated app allowing designers and developers to preview real-world component behavior.
The Solution
Complete Design System Restructuring
Established global foundations (typography, color, spacing) for scalability.
Redesigned components for consistency and accessibility.
Introduced a governance model ensuring only approved updates were published.
Process Innovation
Implemented a morning ritual (Phoenix Rise Check) to review requests and maintain system health.
Shifted from isolated handoffs to collaborative sprints, integrating designers and developers from the start.
Knowledge Building & Team Growth
Delivered ongoing training sessions to upskill designers across teams.
Held 1-on-1 mentorships and collaborative design reviews to support adoption.
Facilitated knowledge sharing sessions and live, in-person team collaborations to strengthen cross-functional alignment.
Client Testimonial
Piyachon Artkla
Head of Design - Bangkok Bank
"Ridin exceeded my expectations with his outstanding work on our design system. His open-mindedness, creativity, and dedication to excellence have made a significant impact. He laid a strong foundation for both design and development teams and played a key role in creating a top-class design system that goes beyond what any bank in Thailand has achieved."
Key Takeaways
Looking Ahead
Bangkok Bank continues to build on this foundation, with ongoing refinements and training. While challenges remain, the groundwork has been laid for a sustainable, scalable design system that drives business and product success.
