Building a Design System Playbook
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 (Me), 11 Product teams, 3 Clients at KB Bank
Context
KB Bank manages a wide range of digital products — web, mobile banking app(KB Star Banking) — built by multiple design and development teams.
However, despite having a design system, adoption remained at 14% and UX flows lacked clear logic and predictability. 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 flows
→ 7,000+ Voice of Customer (VOC) issues
Due to UI and UX issues, Voice of Customer, which is customer complaints collected through app surveys and reviews, recorded over 7,000 reports, revealing pain points in real product usage.
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%.
UX flows lacked clear logic and predictability, leading to frequent user confusion and task failures.
How might we unify
KB Bank’s UI and UX design
through a centralized, scalable design system?
Extracting AI-driven insights from
7,000+ Voice of Customer (VOC) Analyses
Using an internal AI tool, I analyzed over 7,000 VOC reports and grouped them 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
To maximize accessibility and enable timely updates, we created the Unified UI/UX Design Playbook in Figma and published the final deliverable on the internal web platform for company-wide access. This made the design system intuitive to adopt and easier to scale across teams.
2
Implementing a Standardized Pass/Fail Review Process
In the design stage, I reviewed the screens manually against the Playbook criteria and marked each item as Pass or Fail. For failed items, I provided concrete design solutions and prototypes and the finalized design file was handed off to front-end developers.
Through this process, I improved product quality prior to release — rather than after issues surfaced.
Design solutions and prototypes for failed items
Use case
Applying the Pass/Fail Review Process
Starting in early 2024, over a year and a half, I reviewed more than 10 different products across KB Bank — ranging from mobile apps to web platforms.
Among them, I’d like to dive deeper into the Monimo project, one of the app collaborations. Monimo, operated by Samsung’s neobank, already had its own established ecosystem and user base. In this context, KB Bank stepped into the role of embedding its financial products directly into the Monimo app.
Use case > Monimo Project
The currency list displayed only text
Users had to read through all 17 currencies' names to find the one they needed
Adding country flags next to currency
This reduced cognitive load
This helped users find their desired currency more efficiently
Manual currency selection required
Users had to manually choose from 17 different currencies
This created unnecessary friction in the exchange flow
I collaborated with the Foreign Transactions team to redesign a more efficient user flow
Setting pre-selected USD
Usage data confirmed that USD is the most frequently selected currency
We aligned with the Foreign Transaction 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. Also, VOC(Voice of Customer) reports decreased 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 Design 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 conflicts with stakeholders and overlapping project reviews. My in-depth understanding of the project's evolution allowed me to provide consistent guidance, ensuring the team remained effective.
