Case Study - Accessibility checkup
METACARD by VISA
Metacard is a fictional Visa-powered product concept designed five years ago to explore the convergence of traditional banking and crypto wallets.
This case study revisits the concept through an accessibility-first lens, using it as a way to demonstrate both how accessibility reshapes systems and how my design practice has evolved. The focus is on re-evaluating structure, language, and authentication flows to reflect a more inclusive, trust-driven approach to product design.
1. Auditing old screens
The original screens were created with a largely experimental mindset, prioritizing exploration over user assumptions.
In this iteration, I revisit those designs by starting from explicit assumptions about the user, their goals, constraints, and mental models, and allowing those assumptions to reshape the interface.
By grounding each decision in how users actually understand security, trust, and accessibility, the UI evolves in a more intentional direction. This process surfaces and corrects structural issues in the original design, not as isolated fixes, but as systemic improvements driven by clearer user-centered reasoning.
A. The user
The primary user is a security-conscious banking customer who manages both traditional financial assets and crypto, but does not think or behave like a crypto expert.
​
They expect the reliability, clarity, and safeguards of a traditional bank, while interacting with products that involve higher technical and financial risk.
Although they are familiar with concepts such as wallet phrases and digital security, they do not want to engage with that complexity during everyday tasks like signing in.
​
This user relies on mobile banking mental models and expects authentication flows to be predictable, calm, and aligned with system-level security behaviors. They may be distracted, stressed, or accessing the app quickly, so the interface must reduce cognitive load, avoid unnecessary novelty, and make intent explicit.
​
Design decisions in this case study are grounded in these assumptions, allowing accessibility, trust, and clarity to actively shape the system rather than treating them as secondary refinements.
Constraints considered
​
Balancing security requirements with reduced cognitive load.
Avoiding crypto jargon without hiding necessary concepts.
Preserving brand expression without compromising contrast.
Designing for distracted, one-handed mobile use.
B. The login / old version
Accessibility & usability issues identified (original login screen)
Multiple competing actions during authentication:
Secondary actions such as Register, Contact us, and Locate us are visually present during sign-in, increasing cognitive load in a security-critical moment.
Biometric login presented as an in-app control
The fingerprint icon appears as a tappable UI element, suggesting the app itself handles biometric input rather than deferring to the operating system, which breaks established mobile security mental models.
Unclear hierarchy between authentication methods
Password login and biometric login are presented simultaneously without explaining their relationship or requirements, creating ambiguity about which path is primary or expected.
Wallet phrase requirement is implicit, not explicit
The presence of a “Wallet phrase” field is not contextualized, forcing users to infer why it is required and how it relates to other credentials.
Low-contrast text and iconography
Labels, input borders, and secondary actions rely on subtle contrast, reducing readability for users with low vision or in bright environments.
Icon-only affordances without supporting text
The fingerprint icon and close (“×”) icons rely on recognition rather than explanation, creating accessibility barriers for less familiar users and assistive technologies.
Visual emphasis outweighs task clarity
Decorative elements and layered card imagery compete with the primary task, reducing focus during a moment that requires calm, precise interaction.
Color and contrast decisions were evaluated against WCAG 2.1 AA standards for text and UI components.
B. The login / new version / wireframe
What changed
The login experience was redesigned to reduce cognitive load and remove ambiguity during authentication.
Actions are clearly sequenced, biometric verification defers to the operating system, and the interface focuses on a single decision at a time, improving accessibility and trust in a security-critical flow.
B. The login / new version / happy path
User opens app
User chooses verification method
User chooses Biometrics
OS-level biometric prompt is triggered (Face ID / Fingerprint)
Wallet phrase text field appears, user must fill it
User verifies with biometrics
User can switch to Verify with password
User chooses Password
User must fill text fields:
1-Wallet phrase
2-Username
3- Password
Verification succeeds
User id logged in
C. Accounts screen / old version
Accessibility & usability issues identified (original login screen)
Low contrast between foreground content and background
Balance cards, secondary tokens, and transaction metadata rely on subtle color differences over a gradient background, reducing readability for users with low vision or in bright environments.
Color used as the primary indicator of meaning
Positive and negative transactions are differentiated mainly through color (green/red), without additional textual or structural cues, creating accessibility barriers for color-blind users.
Inconsistent and unclear currency representation
Multiple currencies and assets (USD, crypto tokens, NFTs) are displayed using inconsistent formats and symbols, increasing cognitive load and making it harder to understand value at a glance.
Decorative elements compete with informational hierarchy
Glassmorphism effects, layered cards, and background imagery visually compete with critical financial information, reducing clarity in a data-dense, trust-sensitive context.
Ambiguous affordances for balance cards and tokens
It is unclear which elements are interactive (balances, tokens, cards) and which are purely informational, forcing users to rely on trial-and-error rather than clear affordances.
Transaction list lacks scannability and structure
Repeated transaction names, light metadata text, and minimal separation between items make it difficult to quickly scan recent activity or distinguish one transaction from another.
Icon-only navigation without labels
Bottom navigation relies on iconography without text labels, creating discoverability and accessibility issues for users unfamiliar with the symbols or using assistive technologies.
​
Greeting and personalization compete with task focus
The welcoming message occupies significant visual space, pushing actionable financial information lower on the screen and delaying access to the user’s primary goal: understanding their account state.
C. Accounts screen / New version / wireframe
What changed
The Home/balances screen was redesigned to prioritize clarity, accessibility, and trust.
Total value is presented in fiat to anchor the experience in familiar banking mental models, while each asset displays both crypto and fiat equivalents to reduce cognitive load.
A clearly labeled primary currency communicates which asset powers card transactions by default.
Persistent bottom navigation exposes core actions, viewing balances, making payments, and exploring markets, without overwhelming the interface.
2. Validation approach
Quick usability testing focused on first-time login comprehension
VoiceOver / TalkBack pass on critical flows
Contrast testing in bright-light conditions
Error-state walkthroughs for failed authentication