"Where's my card?" Designing a debit card delivery people can follow

Request, shipping and live tracking for a physical card, with thousands of requests in two weeks.

Product Design

Fintech

Mobile App

"Where's my card?" Designing a debit card delivery people can follow

Request, shipping and live tracking for a physical card, with thousands of requests in two weeks.

Product Design

Fintech

Mobile App

Spoiler

Every Naranja X customer had a virtual debit card. My job was to design how they would get the physical one, from requesting it in the app to tracking it to their door, within the limits of a third-party card provider. In the first two weeks, thousands of people requested their card.

Spoiler

Every Naranja X customer had a virtual debit card. My job was to design how they would get the physical one, from requesting it in the app to tracking it to their door, within the limits of a third-party card provider. In the first two weeks, thousands of people requested their card.

Spoiler

Every Naranja X customer had a virtual debit card. My job was to design how they would get the physical one, from requesting it in the app to tracking it to their door, within the limits of a third-party card provider. In the first two weeks, thousands of people requested their card.

Problem

Naranja X is a digital finance app for the Latin American market: one place to open an account, send and receive money, pay bills, and use virtual and physical debit cards.

Everyone got a virtual card by default. The physical card needed a full journey: requesting it, confirming the address, shipping and tracking, and delivery or pickup. It had to feel transparent and trustworthy, and it ran on a third-party provider whose API limited what the interface could do.

Problem

Naranja X is a digital finance app for the Latin American market: one place to open an account, send and receive money, pay bills, and use virtual and physical debit cards.

Everyone got a virtual card by default. The physical card needed a full journey: requesting it, confirming the address, shipping and tracking, and delivery or pickup. It had to feel transparent and trustworthy, and it ran on a third-party provider whose API limited what the interface could do.

Problem

Naranja X is a digital finance app for the Latin American market: one place to open an account, send and receive money, pay bills, and use virtual and physical debit cards.

Everyone got a virtual card by default. The physical card needed a full journey: requesting it, confirming the address, shipping and tracking, and delivery or pickup. It had to feel transparent and trustworthy, and it ran on a third-party provider whose API limited what the interface could do.

My Role

Product Designer at Naranja X, Aug to Nov 2021. I owned the end-to-end design of this feature, working with engineering, product, research, marketing and the card provider. I designed the flows, wireframes and prototypes, built new components on top of the existing design system, and handed of.

My Role

Product Designer at Naranja X, Aug to Nov 2021. I owned the end-to-end design of this feature, working with engineering, product, research, marketing and the card provider. I designed the flows, wireframes and prototypes, built new components on top of the existing design system, and handed of.

My Role

Product Designer at Naranja X, Aug to Nov 2021. I owned the end-to-end design of this feature, working with engineering, product, research, marketing and the card provider. I designed the flows, wireframes and prototypes, built new components on top of the existing design system, and handed of.

Process

This was a seven-week project. It started with benchmarking how other fintech products handled physical card delivery, which meant ordering their cards myself. By the end of the project, I had five new debit cards in my wallet. Then came sketches to define the core request and tracking flow.

Most of the work was shaping the flow around what the systems behind it could do. I worked through the requirements with engineering, product and the providers:

  • The courier's API, which sets which delivery statuses we can show and when.

  • The Google Maps API for address entry with autocomplete.

  • Every courier scenario, from shipment to delivery or pickup.

Every screen was designed for both iOS and Android, following the patterns people already knew from the rest of the app.

Handoff

I handed off the full feature in Figma, with specs covering every courier status and exception.

Solution

The final flow takes people from learning about the card to having it in hand: a short walkthrough of its benefits, address entry with autocomplete, delivery confirmation, and live tracking from shipment to delivery or pickup. It also covers what happens when a delivery goes wrong, from nobody being at home or only a minor at home to an address the courier couldn't find or a lost package.

Solution

The final flow takes people from learning about the card to having it in hand: a short walkthrough of its benefits, address entry with autocomplete, delivery confirmation, and live tracking from shipment to delivery or pickup. It also covers what happens when a delivery goes wrong, from nobody being at home or only a minor at home to an address the courier couldn't find or a lost package.

Solution

The final flow takes people from learning about the card to having it in hand: a short walkthrough of its benefits, address entry with autocomplete, delivery confirmation, and live tracking from shipment to delivery or pickup. It also covers what happens when a delivery goes wrong, from nobody being at home or only a minor at home to an address the courier couldn't find or a lost package.

Requesting the physical card from the virtual one, then choosing where to send it with address autocomplete.

A three-step walkthrough of the card's benefits before the request.

Confirming the delivery address, or entering it manually when autocomplete can't find it.

Live tracking, including a second delivery attempt when nobody was home.

When delivery fails twice, the card goes to a branch for pickup.

Confirmation and error screens at the end of the request.

Outcome

In the first two weeks, over 1 million people requested their physical card, and support inquiries about card delivery dropped by 40%.

Reducing delivery-related support requests was a goal from the start, so every status screen answers two questions: where the card is, and what happens next.

The lesson: when a third party controls the backend, the design work is deciding what to show people at every step, especially when something goes wrong.

Outcome

In the first two weeks, over 1 million people requested their physical card, and support inquiries about card delivery dropped by 40%.

Reducing delivery-related support requests was a goal from the start, so every status screen answers two questions: where the card is, and what happens next.

The lesson: when a third party controls the backend, the design work is deciding what to show people at every step, especially when something goes wrong.

Outcome

In the first two weeks, over 1 million people requested their physical card, and support inquiries about card delivery dropped by 40%.

Reducing delivery-related support requests was a goal from the start, so every status screen answers two questions: where the card is, and what happens next.

The lesson: when a third party controls the backend, the design work is deciding what to show people at every step, especially when something goes wrong.