UI/UX
Ownership
Quality control
Role
SR. UX Designer
Company
DKB Code Factory
Team
PO, Dev, QA
Platform
iOS, Android
Year
2023 2024
Shipped across 3 brands (Porsche, Miles & More, Hilton Honors) — Reduced SMS authentication dependency, lowering costs and drop-offs — Improved accessibility compliance across iOS and Android.
My Part in the Puzzle
I was the sole designer responsible for end-to-end UX, third-party alignment, and implementation QA, adapting the onboarding flow for a credit-card app to new security requirements and ensuring consistency across a multi-brand setup for hundreds of thousands of users. A major part of the project involved introducing biometric authentication (Touch ID / Face ID) for payments and settings, both to meet regulatory needs and improve user experience.
Background: The DKB bank wanted to expand its mobile offering with a dedicated credit card as a white label management app. I joined the card team after the MVP release and became responsible for app-wide design quality, new feature flows and maintaining and updating the library between the brands.
The big challenge was to create an onboarding process which meets all the security requirements but at the same time is not an overload
Design ownership of native app design
Sparring sessions, testing, handover for iOS, Android
Finding balance between business vs. security and user
Communication, quality UI/UX control of 3rd party implementation
Defining edge and error cases
Tasks / Problem statement
Data analysis and user reviews showed that SMS-based verification was costly, unreliable abroad, and vulnerable to phishing. My role was to redesign the onboarding process to reduce SMS dependency, enhance trust, and create a smoother, more secure activation experience.
Issues
Outdated SMS verification, high costs
Problems with getting smsTan abroad
Missing security bank-requirements
Bounce rates and generic error cases
Goal
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 15 17" xmlns="http://www.w3.org/2000/svg"><path d="M 0 7.119 C 0.398 8.365 0.783 9.217 1.158 9.594 C 1.34 9.777 1.559 9.88 1.746 9.81 C 3.032 9.325 3.223 6.842 3.615 5.259 C 4.168 1.979 4.418 1.216 4.554 0.723 C 4.629 0.486 4.715 0.276 4.805 0" fill="transparent" height="9.83178893882313px" id="sVsZyvNu9" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="1.67" stroke="rgb(0, 102, 71)" transform="translate(5.769 2.044)" width="4.80488020049448px"/><path d="M 5.628 0.023 C 6.138 -0.092 6.643 0.238 6.755 0.759 C 6.868 1.28 6.544 1.796 6.034 1.911 C 6.034 1.911 6.033 1.911 6.032 1.911 C 6.031 1.912 6.028 1.912 6.025 1.913 C 6.018 1.914 6.008 1.917 5.995 1.92 C 5.97 1.926 5.932 1.934 5.885 1.944 C 5.791 1.966 5.659 1.996 5.507 2.031 C 5.204 2.101 4.828 2.189 4.526 2.262 C 4.071 2.374 3.359 2.726 2.794 3.184 C 2.497 3.425 2.295 3.848 2.039 4.523 C 1.905 4.876 1.868 5.444 1.907 6.119 C 1.945 6.782 2.04 7.355 2.089 7.786 C 2.152 8.335 2.377 8.838 2.684 9.734 C 2.911 10.399 3.204 10.804 3.572 11.07 C 4.047 11.412 4.602 11.618 5.288 11.907 C 5.506 11.998 5.845 12.06 6.287 12.066 C 6.717 12.073 7.186 12.026 7.623 11.946 C 7.889 11.897 8.102 11.777 8.337 11.584 C 8.461 11.482 8.58 11.37 8.724 11.234 C 8.86 11.106 9.025 10.949 9.203 10.806 C 9.677 10.427 10.023 9.95 10.508 8.873 C 10.919 7.961 11.031 7.314 11.084 5.8 C 11.1 5.329 11.124 4.838 11.096 4.365 C 11.067 3.874 10.987 3.549 10.886 3.373 C 10.622 2.913 10.773 2.32 11.223 2.05 C 11.674 1.78 12.254 1.935 12.518 2.395 C 12.851 2.976 12.95 3.677 12.984 4.248 C 13.019 4.836 12.989 5.442 12.974 5.869 C 12.917 7.501 12.787 8.438 12.227 9.681 C 11.686 10.882 11.184 11.677 10.37 12.328 C 10.264 12.413 10.155 12.515 10.01 12.652 C 9.874 12.78 9.706 12.94 9.521 13.092 C 9.136 13.408 8.635 13.725 7.954 13.849 C 7.423 13.946 6.833 14.007 6.261 13.999 C 5.701 13.991 5.094 13.916 4.567 13.695 C 3.997 13.455 3.177 13.151 2.482 12.65 C 1.71 12.093 1.218 11.309 0.898 10.374 C 0.664 9.689 0.305 8.841 0.21 8.01 C 0.174 7.697 0.061 6.967 0.018 6.233 C -0.024 5.511 -0.015 4.588 0.275 3.824 C 0.508 3.21 0.861 2.284 1.618 1.67 C 2.359 1.068 3.317 0.57 4.086 0.382 C 4.4 0.305 4.787 0.215 5.092 0.145 C 5.245 0.109 5.38 0.079 5.475 0.058 C 5.523 0.047 5.561 0.038 5.588 0.032 C 5.601 0.029 5.611 0.026 5.618 0.025 C 5.621 0.024 5.624 0.024 5.625 0.024 C 5.626 0.023 5.627 0.023 5.627 0.023 Z" fill="rgb(0, 102, 71)" height="14.000000000000004px" id="NaACzaWyi" transform="translate(1.236 2.044)" width="12.999999990113576px"/></svg>)
Improved Onboarding process
Biometrics for payments, settings, login
Fulfill security bank-requirements
Defined edge and error cases
Old flow approach
Issues
Move Tracking Consent
Move the tracking consent screen to appear immediately after login to ensure accurate analytics. The consent must feel non-intrusive and offer transparent options.
Clarifying Push Notification Value
Improve the communication, as some users perceive a push as spam. Clearly explain their purpose and value, and find a better positioning.
New authentication logic
Update the authentication logic so SmsTAN is used only as a fallback when biometrics and PIN are already activated. Biometrics - PIN as new method. SMS is problematic because people traveling don’t always have access to number.
Consistent UX
Ensure that the Ul and UX for smsTAN, PIN, and biometric authentication (provided by a third party) fully align with our design system and brand standards.
Improve Error Handling
Redefine and improve error cases, which were previously too generic. Provide clear, context-specific messaging for different input fields and states to reduce drop-offs.
Edge & If-Cases
Designing clear fallback paths for scenarios like outdated app versions, new cards, or regulatory changes to minimize bounce-rate.
Third-Party Challenges
Coordination
Close collaboration and repeated testing between internal and external development teams were required. Regulatory and technical dependencies led to frequent re-prioritization.
Shifting priorities
Regulatory updates and technical dependencies required frequent re-prioritization during the design and implementation phase affecting also the information architecture.
Design ownership
UX and UI had to be aligned with a third party, including white-label branding and shared components to ensure a consistent user experience.
Error Handling
Error and fallback states were partly defined by the third party and needed UX refinement to match our standards and regulations.
New onboarding sketch
White label goes color
I was responsible for maintaining the component library, including designing new components and testing them across brands.
A white-label design system powering one app across three brands. Shared components use semantic tokens instead of fixed colors, allowing fast brand switching while ensuring consistent UI across all products.
Let’s go with the flow - ONBOARDING
Login & Tracking
Challenge: App tracking at the beginning as a requirement.
Brand colors are defined. Not much room for changes
One clear action per step
Visuals to emphasize
Simple language
Give user options to deny
Give user links to further information
Create PIN / Repeat PIN
Challenge: User needs to learn new verification method.
PIN, SMS and biometrics comes from a third party, Align UI/UX.
Highlight benefits of new authentication method
Visual images reinforcing safety
Secondary button for
more trustful info for the user
Always show confirmation of the task
Activate biometrics
Confirm via SMS
One clear action per step
Give user information, if number is not available
Insert from sms option from OS
Give user confirmation about the action in the next screen
Modern fintech users expect onboarding to feel effortless. Banking regulations … are often the opposite.
App Method to confirm online payments
Challenge: Gain trust in a few words
Description text and logo to gain trust for the Master card identity check
Loading spinner, so that user can see something is happening. Activation can take some time (backend issue)
Push Notifications
Challenge: In user tests some people thought it was kind of a spam Push: explain the importance of this specific push notification
Describe importance of a push for payments
As in other screens. One action, strong title, simple text and illustration in branded colors.
Location access and apple pay
One clear action per step
Give user information, if number is not available
Give user option to add the card already during the onboarding to the wallet
The first time user can confirm the action easily with previously activated biometrics
The same logic can be used for logic, payments and all type of settings as aneasy confirmation
Onboarding completed
One clear action per step
Give user information, if number is not available
Give user option to add the card already during the onboarding to the wallet
Ownership + collaboration turned cross-functional work into a strength.
What Users Actually Said
Real feedback — both positive and critical — helped validate UX decisions and highlight technical challenges beyond design.
Thoughts
IMPROVED ONBOARDING
I learned how to simplify complex regulatory requirements. An onboarding can always be a bit of a hassle. That’s why we reduced cognitive load, give some options to skip
ALIGNMENT
Regular syncs with devs and stakeholders helped avoid rework and kept UX quality consistent during implementation.
DESIGN CRITIQUE AS QUALITY LAYER
Sparring sessions with the design guild were used as an additional quality layer, offering external perspectives and shared learnings beyond the core project team.
THIRD-PARTY INTEGRATION — DESIGN OWNERSHIP
Gained hands-on experience navigating the challenges of third-party security frameworks, ensuring seamless integration into the product.