Building a Design System Playbook for KB Bank's ecosystem
Role
Lead UX designer — Developed a unified design system playbook that streamlined collaboration across KB Bank’s product teams
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 UI patterns across platforms. These fragmented patterns resulted in over 7,000 VOC complaints related to both UI clarity and UX logic.
A more intuitive, unified, and actionable UI + UX system was urgently needed to align product teams, reduce friction, and 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 surfaced, revealing widespread issues across both UI and UX design.
How might we unify KB Bank’s UI and UX
through a centralized, scalable design system?
Understanding the root causes through 7,000 VOC insights
To uncover why UI and UX had deteriorated across KB’s digital ecosystem, I analyzed more than 7,000 VOC reports using AI-powered pattern detection.
AI-assisted Insight Analysis
Solution
1
Building a unified UI + UX Design Playbook
I created a unified UI and UX Design Playbook that teams across KB Bank could reliably apply.
The playbook standardized component usage, clarified UX decision rules, and included anti-patterns and real-screen examples — making the design system intuitive, actionable, and scalable across all product teams.
2
Standardized Pass/Fail Review Process
Before product teams moved into pre-launch, I evaluated their screens using this Design Playbook — marking each criterion as Pass or Fail.
For failed items, I provided 1. design solutions & prototypes, 2. UI/UX reasoning and I have improved the products with ongoing collaboration to address local requirements. This process created a consistent quality bar across all KB Bank products.
Pass/fail review process
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 our Monimo, Samsung neobank-partnered product stood out as a clear opportunity for improvement.
Missing visual cues in currency
The currency list displayed only text without any visual identifiers. Users had to read through all 17 currency names to locate the one they needed.
Country flags next to each currency name
Country flags next to each currency name made the list easier to scan and recognize quickly. This visual cue significantly reduces cognitive load, helping users locate their desired currency more efficiently.
Manual currency selection required
Users had to manually browse all 17 available currencies to select the one they needed, creating friction and slowing down transactions.
To address this, I partnered with the Foreign Transaction team to evaluate whether introducing a default currency could reduce friction for users.
Pre-selected USD
Usage data confirmed that USD is the most frequently selected currency, so our team aligned with Foreign Transaction to introduce a new default rule — pre-selecting USD for a faster flow. This new logic removes unnecessary manual steps for the majority of users.
Impact
Design system adoption rose from 14% to 30%, enabling smoother collaboration and reducing duplicated work across teams. Clearer task flows and standardized components directly improved usability—leading VOC reports to drop to nearly half compared to the previous period.
Overall, the updated UI + UX system strengthened product consistency and dramatically improved both customer experience and team efficiency across the enterprise.
Takeaways
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.
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.
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.
