Co-Branded Payment Design for MagicPay's Banking Partners

Client

MagicPay is a fintech startup building a white-label SDK for banks and fintechs, letting their customers send money through any messaging app with a keyboard. Founded by CEO Bruno Ramos, the product is designed to be co-branded per partner bank, with market operations centered on Mexico and Spain.

Challenge

• Weak visual hierarchy. Call-to-actions didn't stand out, risking confusion across the sending and receiving flows.
• No system for co-branding. Without one, MagicPay's identity risked fragmenting as it rolled out across multiple banks.
• A trust gap. A payment layer pitching itself to Santander or BBVA needs to look bank-grade from the first demo.
• A narrow window. Partner demos and rollout discussions were already underway.
• Three platforms, one experience. A native keyboard extension, an in-app hub, and a recipient flow for people with no account or app of their own all needed to feel like one product.

Solution

Our team's work split into two connected tracks: a brand identity MagicPay could hand off to partner banks, and UX/UI design for the sender and recipient flows built on top of it.

A design system, not a skin. White-labeling was the starting constraint, not an add-on. We built color architecture, typography, and logo rules as a documented system, so partner banks can apply MagicPay's identity to their own brand correctly, without MagicPay in the room.

A mark built to disappear into someone else's app. MagicPay's SDK lives inside a keyboard extension and a mobile UI across iOS and Android, so the identity had to hold up at small sizes and inside someone else's navigation.

The hardest problem: the recipient has nothing. No MagicPay account, no app, no history with the sending bank, just a link and their own bank details. We designed the claim flow around a single input, saved after first use so future payments complete in one click.

The sender side, mapped end to end. We redesigned the keyboard extension's entry point, authentication, and success and failure states, plus the in-app Payment Hub covering onboarding, sending, and the returning-user experience. Every flow went from a Figma user journey to wireframes to final UI, giving development one implementation-ready source instead of shifting mockups.

Trust, kept visible. MagicPay never holds funds. It only creates the link, and money settles bank-to-bank over local rails like SPEI or SEPA Instant. Clear "pending," "completed," and account-confirmation states kept that mechanic visible, which mattered for users with no prior relationship with MagicPay itself.

Results

• One consistent UI system across three platforms (keyboard extension and mobile app) for both sender and recipient journeys.
• A documented brand system letting partner banks apply their own branding without redesigning the underlying flows.
• Implementation-ready deliverables: final UI, wireframes, and a Figma-mapped user journey, used both for development handoff and partner bank presentations.