Agustín | Lead Product Designer

FINTECH

DESIGN OPS

WCAG 2.2

Openbank & Zinia: Unifying the Financial Experience

Led the design unification for Zinia's "Buy Now, Pay Later" (BNPL) platform. Engineered a scalable component library optimized for strict accessibility compliance and frictionless financial flows.

Desktop web browser showing the Zinia by Santander landing page for the Amazon Visa card. The hero section features the headline 'Amazon Visa. One card. Lots of points. No annual card fee.' alongside a black credit card mockup. The UI includes a clean navigation bar, a 'Get the card' primary button, and a dark green footer with categorized links and social media icons.

01 / THE FINTECH CHALLENGE

The Scaling Bottleneck

Role: UX/UI Designer & Design Ops.

Timeline: 2024 - 2025

As Zinia expanded its "Buy Now, Pay Later" offering, the design ecosystem faced a critical scaling challenge. The UI library lacked the structural foundation needed to support complex, fast-paced financial flows, leading to accumulating design debt.

— Fragmented Workflows: The design team struggled with disconnected components, which slowed down the delivery of new BNPL features and created visual inconsistencies.

— Compliance Risks: In the financial sector, accessibility is a strict legal requirement. The fragmented libraries lacked a standardized approach to WCAG compliance.

— The Objective: I stepped in to audit the UI inventory and establish a robust Design Ops foundation, creating a single, compliant source of truth for the Zinia ecosystem.

02 / THE AUDIT

The Single Source of Truth

Before drawing any new interfaces, I conducted a surgical audit of the existing component inventory. The goal was to deprecate redundant elements and build a unified design language tailored specifically for BNPL journeys.

— Component Inventory: Mapped every existing state, button, and form field to identify visual friction points and technical debt.

— Unified Architecture: Aligned the design language to ensure that users navigating the credit and checkout flows experienced absolute trust and zero cognitive overload.

A technical UI audit diagram titled 'AUDIT & HOMOGENIZE.' On the left, it shows three different versions of a mobile success screen with inconsistent elements. An arrow points to the right, showing a final 'success-template' mapped to the Santander Core UI. This template features standardized components like 'swap-icon,' 'show-heading,' and 'show-container,' demonstrating a systematic approach to design consistency.

A UI accessibility audit of a payment plan screen. The dark-themed interface shows a $320.00 total order amount. Four annotations point to specific accessibility features: Contrast Ratio > 4.5:1 (WCAG AA), Active State Indicator for the selected payment plan, Scalable Typography with a minimum of 14 pixels, and a Touch Target larger than 44 pixels for the primary 'Confirm and Pay Now' button.

03 / BULLETPROOF COMPLIANCE

Baking in Accessibility

Designing for a financial platform means designing for everyone. I ensured that WCAG 2.2 AA standards weren't treated as an afterthought, but rather embedded directly into the DNA of our components.

— Native Compliance: Enforced strict color contrast ratios and scalable typography across all core components.

— Focus & Navigation: Standardized keyboard navigation and focus states to ensure robust usability for all assistive technologies during sensitive payment flows.

04 / OUTCOMES

Velocity at Scale

By establishing a unified, accessible design system for Zinia, we drastically reduced the friction between design and engineering. The product squad could confidently ship new BNPL features faster, knowing every component was pre-validated for both strict legal compliance and visual consistency.

NEXT CASE STUDY

ArenaPass: From Hostage to Ally

Let's tackle your next complex challenge.

Get in touch

Resume