Vlad Mikhailov, Product Designer

Plata Design Challenge [Core]

Design a custom card order flow and delivery tracking

Читать на русском

01. Metrics we want to improve

Custom cards are a new paid feature. The goal is to launch it while keeping the free card path simple.

New metrics
  • Share of orders with a paid design
  • Custom card conversion: from start to payment
Impact on existing metrics
  • Fewer support requests about delivery status
  • Less time to the first purchase
Guardrail
  • Standard card order conversion

02. User flows by screen

Order a card

Card type→ About the card→ Design→ Name→ Back→ Review→ Payment→ Done

Main focus of the project

Change address

Review→ Map and search→ Confirmation→ Review

Address changes are part of the card order. We use the profile address by default, but users can change it.

Order a standard card

About the card→ Review→ Done

A quick path for people who just need a card, without choosing a design.

Tracking

In production→ Preparing for delivery→
Out for delivery Delivery tracking
→ Close to you→ Delivered

03. Design

The design helps users feel the card while placing an order. A large 3D card shows every choice right away. Plastic feels light and airy. Slower motion and light reflections give metal a sense of weight.

Open prototype
Assumptions
  • Plastic costs $40, metal costs $399
  • The standard card stays free: silver with an orange logo, no name and no card details on the back
  • Delivery is free for all cards
  • Users can pay from any account
  • The digital card works right after payment. The physical card works after delivery and activation
  • Names come from the ID document. There is no free text input

Order a card

About the card
About the card
Plastic: Plata Gris
Plastic: Plata Gris
Plastic: Naranja
Plastic: Naranja
Plastic: Rosa mexicano
Plastic: Rosa mexicano
Plastic: Agave
Plastic: Agave
Plastic: Día de Muertos
Plastic: Día de Muertos
Metal: silver
Metal: silver
Metal: champagne
Metal: champagne
Metal: copper
Metal: copper
Metal: rose gold
Metal: rose gold
No name
No name
With a name
With a name
Back without card details
Back without card details
Back with card details
Back with card details
Review order
Review order
Payment
Payment
Confirmation
Confirmation
Order placed
Order placed
New card on the account
New card on the account

Change address

Review order
Review order
Address on the map
Address on the map
Search for an address
Search for an address
Confirm address
Confirm address
Review the new address
Review the new address

Order a standard card

About the card
About the card
Review order
Review order
Order placed
Order placed
Standard card details
Standard card details
Delivery details
Delivery details

Delivery tracking

Account
Account
In production
In production
Delivery details
Delivery details
Preparing for delivery
Preparing for delivery
Out for delivery
Out for delivery
Close to you
Close to you
Delivery tracking
Delivery tracking
Delivered: activation
Delivered: activation
Active card
Active card

04. What I would do next

A card for another person

  • The “Another person” option from the current app: a card with the recipient’s name and address, tracking and updates for both people. Purchases use the owner’s Crédito

Final card designs

  • Final designs instead of samples, with printing and engraving in mind
  • Every card design in all states: during the order, as account thumbnails, and as simple 3D models in card details

Missing states and edge cases

  • Choosing a design when the options do not fit on one screen
  • Animation for the new card thumbnail appearing on the account screen after the order
  • No server response during payment
  • Not enough funds or available credit
  • Payment declined or Face ID failed: use the passcode
  • An error in the name on the ID document
  • User leaves the flow: save an order draft
  • Failed delivery, damaged packaging, or a card returned to the sender

Accessibility

  • Check WCAG compliance and VoiceOver support

Design system

  • Design the dark theme
  • Link the designs to Plata components, tokens and styles

Devices

  • Layouts for small and large screens
  • Android version
  • 3D performance on less powerful devices, with a possible fallback without 3D

Ready for development

  • Specs for all screens and states
  • Animation and 3D specs: materials, rotation physics and transitions between steps

05. How other apps do it

Best practice

1. Revolut
  • A long welcome screen and a plan choice: Metal or Premium
  • Many custom designs, a 3D card, and space to write or draw on it
  • Set a PIN
  • Check the address
  • Place the order and add money to the account
  • Order confirmation
  • A screen saying the card is ready for Apple Pay
  • A large 3D card that draws attention
  • The address is already filled in
  • Apple Pay is available right away
  • The order ends with a small toast message
  • Choosing a card is mixed with selling a plan
2. Nu México
  • A product screen for the credit card and account
  • Set a PIN with a card shown above the field
  • Choose a payment date
  • Mexican address format: street, building, apartment, Colonia and postcode
  • Consent and sign-up completion
  • A “Creando tus tarjetas” widget on the home screen with progress and a delivery date
  • Activation: “Ya recibí mis tarjetas”, the last 4 digits, and done
  • Production and delivery progress on the home screen
  • Activation in a few steps
  • A familiar address format for Mexico
  • A warm, conversational tone
  • Flat images make the card feel less personal
  • A referral request right after activation
3. Wise
  • Choose a digital or physical card, each with its price and delivery date
  • A carousel of designs with prices and benefits
  • Choose how the name looks on the card
  • Address and delivery: free standard delivery or paid express delivery
  • Set and confirm a PIN
  • Order review with an “Edit” button on each row
  • Payment with a cost breakdown
  • A clear flow where any choice can be changed during review
  • Price and delivery date next to the button
  • Choose a name format for the card
  • Express delivery as an option
  • Name options are a plain list, with no preview on the card
  • The card is small on the review screen
  • Many similar form screens
4. Cash App
  • A large black card with lifestyle photos
  • Draw and add stamps directly on the card
  • A screen about card protection
  • Address suggestions
  • Identity checks and terms of use
  • Set a PIN
  • “Your card is ready to use”: Apple Pay right away, delivery in 7–14 days
  • The card looks like a fashion item
  • Users can draw their own design
  • The card works before delivery
  • Long identity checks and legal screens
  • Custom design tools have no labels
5. Rocketbank
  • Get started: name, phone number and SMS code
  • Address search on a map. The button shows if delivery is not available
  • Choose a delivery day and time using 3D cards
  • Choose a card colour, each with its own short description
  • Consent with a swipe signature
  • Appointment confirmation with a countdown
  • A bright style and conversational tone
  • Each design has its own story
  • A swipe signature instead of a button
  • Waiting for delivery feels like an event
  • A busy style with small, hard-to-read capitals
  • Courier delivery with a passport check does not fit Mexico