Upleveling KB Bank financial calculator
Role
UX designer — Redesign 13 types of financial calculators
Timeline
July – December 2023
Skills
Interaction design, UX strategy, Wireframing, Prototyping, Cross-functional communication
Team
1 PM, 5 UX Designers, 4 UI Designers, 15 Engineers, 8 Clients at KB Bank
Context
KB Financial Group, one of Korea’s largest financial conglomerates, operates 12 subsidiaries, each with its own content platform—making it difficult for users to access financial tools in one place. To streamline this experience, KB launched “KB Think,” a centralized responsive website built on Adobe Experience Manager.
On this platform, I led the end-to-end redesign of the financial calculator, a tool commonly used for savings planning, mortgage calculations, and currency exchange.
Input & Output Challenges
Users experience friction throughout the calculation process.
How might we help users
1. enter large numbers quickly and
2. understand the key information
without being overwhelmed by raw data?
Research-informed Design
Input
Introducing Quick Number Button
To simplify large-value input, I introduced 3 number buttons and used contextual inquiry with 20 participants to determine their order. Observations in real usage scenarios and task completion time showed faster, more comfortable input
when values increased from left to right, which informed the final design.
Output
Showing Insight-first Results
Users felt overwhelmed by dense, raw data. Through qualitative interviews with 12 participants, I found they preferred insight-first results that surface key takeaways first, with raw data available on demand.
Solution
Designing Clear Input and Insightful Output
Input
Quick number entry
Introducing 3 number buttons in increasing value order to simplify large-number entry enabled faster and more intuitive input.
Output
Insight-first results
An insight-driven results structure that highlights key takeaways first, while keeping raw data accessible through a bottom sheet when users need more detail reduced cognitive load and improved confidence.
Introducing Responsiveness
The calculator was originally designed as a PC-only pop-up, making it difficult to use on mobile due to cramped layouts and horizontal scrolling. I redesigned it into a responsive, single-column layout optimized for vertical scrolling, improving mobile usability while maintaining cross-device consistency.
Impact
The redesign removed key friction points across both input and result flows, leading to a measurable increase in engagement.
As a result, calculator usage grew by 38%+, contributing to over 200K monthly users on KBThink.com.
38%+
Growth rate of calculator users
200,000 Users+
Monthly users of KB Think.com
Adapting Layouts for Global Readability
While Korean allows for more compact wording, a two-column layout worked well, English terms tends to be longer. so I when creating English version calculator, I adopted a stacked layout to improve visual balance.
This shows how important it is to adapt layouts to cultural differences.
AI Opportunity
Evolving the Calculator
Beyond Static Workflows
Takeaways
Balancing essential vs. secondary features earlier would have enabled us to ship a functional input/output experience sooner. This reinforced the importance of prioritizing core UX problems—such as input friction and overwhelming output—before adding enhancements.
User feedback revealed that friction existed at both ends: users needed a faster way to input numbers and a clearer way to interpret results. Understanding these dual pain points guided the direction of the final design and emphasized the value of holistic user research.
Collaboration with the Data team helped uncover micro-behaviors—such as number-shortcut placement preference and how users navigate raw data. These insights informed both input optimization and output restructuring, ultimately improving engagement and reducing cognitive load.
