Building a Design System Playbook for KB Bank's ecosystem
Role
Lead UX designer — Developed a unified design system playbook that raised the bar on design quality across the enterprise
Timeline
March 2024 – September 2025
Skills
Design systems, UX strategy, Prototyping, Intra-team communication
Team
2 UX designers, 11 Product design teams, 3 Clients at KB Bank
Context
KB Bank manages a wide range of digital products—web, mobile banking(KB Star Banking)—built by multiple design and development teams.
However, despite having a design system, adoption remained at 14%, resulting in inconsistent design patterns across platforms. These fragmented patterns resulted in over 7,000 Voice of Customer(VOC) reports.
A more intuitive, unified, and actionable UI + UX design system was urgently needed to raise the quality of KB Bank’s digital experiences at scale.
Pain point
Legacy UI patterns + Broken UX → 7,000 VOC issues
Although the KB Starbanking Design System Guide was introduced 3 years ago, many teams continued relying on legacy UI components, keeping adoption at only 14%. At the same time, UX flows lacked clear logic and predictability, leading to frequent user confusion and task failures.
As a result, more than 7,000 VOC(Voice of Customer) reports were recorded, highlighting widespread issues across both UI and UX design.
How might we unify KB Bank’s UI and UX design
through a centralized, scalable design system?
Extracting AI-driven insights from 7,000+ VOC analyses
Using ChatGPT, I analyzed over 7,000 VOC reports and grouped feedback into the top 32 UI components and key UX flow issues. Within each category, I identified recurring misuse patterns that repeatedly caused user confusion and task failure.
Solution
1
Building a Unified UI + UX Design Playbook
By standardizing component usage and highlighting common anti-patterns through real product examples, the Playbook made the design system intuitive to adopt and easy to scale across teams.
2
Implementing a Standardized Pass/Fail Review Process
Before product teams moved into release, I evaluated their products using this Design Playbook — marking each item as Pass or Fail.
By providing design solutions & prototypes for failed items, I have improved the products through ongoing collaboration with the product team to address local requirements.
This process created a consistent design quality bar across all KB Bank products.
Design solutions and prototypes for failed items
Use case
Improving the Currency Exchange Service
Across more than 10 KB Bank product reviews, the currency exchange flow in collaboration with Monimo, Samsung neobank stood out as a clear opportunity for improvement.
Missing visual cues in currency
The currency list displayed only text, so users had to read through all 17 currency names to locate the one they needed.
Country flags next to currency
Country flags next to each currency name reduces cognitive load, helping users locate their desired currency more efficiently.
Manual currency selection required
Users had to manually browse all 17 currencies to find the one they needed, slowing down the exchange flow. To improve this experience, I partnered with the Foreign Transaction team to explore a more efficient user flow.
Usage data confirmed that USD is the most frequently selected currency, so our team aligned with the Team to introduce Pre-selected USD. This new logic removes unnecessary manual steps for the majority of users.
Impact
Design system adoption increased from 14% to 30%, reducing duplicated work and improving cross-team collaboration. Standardized components and clearer flows cut VOC(Voice of Customer) reports by nearly 50% compared to the previous period.
One product team PM shared:
“The Playbook gave designers and developers a shared understanding of how to use complex components, which helped us ship faster than expected.”
Overall, the Playbook raised the bar on the design quality across the enterprise.
Takeaways
What makes an effective Design System Playbook?
Building a design system at the enterprise level requires more than defining components — it requires creating processes, alignment, and shared understanding across teams. Through this project, I learned how to transform fragmented guidelines into a scalable, adoption-ready playbook grounded in usability heuristics and real product data.
Systematic thinking
To build clear rules and perform consistent design review, I needed a deep understanding of 32 high-impact components and their behaviors across KB Bank’s ecosystem. This strengthened my ability to analyze UX patterns logically, identify inconsistencies quickly, and balance detail-oriented evaluation with high-level system thinking.
Proactive leadership
I led the successful rollout of the Design Playbook, proactively addressing client communication issues and the transition of two new team members. My in-depth understanding of the project's evolution allowed me to provide consistent guidance and maintain a stable working environment, ensuring the team remained effective.
