Mall Gift Card
iOS App · Stored-Value Retail
Overview
I led the end-to-end design of an iOS gift card wallet that turns a high-support retail feature into a self-service experience, with balances, expiry, and security visible up front.
Role
Lead Product Designer, end-to-end mobile experience
Domain
iOS app, stored-value management, fintech-adjacent retail
Primary users
Shoppers who store, secure, and redeem physical and digital gift cards
The problem
Gift cards function like cash, but they are easy to lose, hard to track, and awkward to use at checkout. Shoppers had no single place to verify a balance, check an expiry date, or back up a physical card, so the information they needed most was the information they could never find at the till.
That gap broke down on two fronts:
For users
Uncertainty at checkout: was the card active, expired, or did it still hold a balance? It was compounded by the friction of typing a 24-digit code by hand.
For the business
Invalid card inputs, unverified transaction histories, and blocked accounts drove a steady stream of support tickets.
The design pivot
Move the feature from a plain text list to a payment-adjacent wallet that prioritizes clarity, built-in error recovery, and visible card lifecycle status.
Process
Empty state and CTA → Scan or manual input → PIN setup → Active carousel management → In-store and Apple Wallet checkout
Mapping the card lifecycle
I started by mapping every state a single card can enter: Empty, Active Digital, Active Physical, Invalid Entry, Mismatched PIN, Blocked, Unblocked, Expired, and designed a defined UI for each. This is what kept the edge cases from becoming afterthoughts: they were in the model from day one.
Interaction strategy: contextual bottom sheets
Rather than push users into dense banking-style screens, I anchored every major action in a bottom sheet tied to the selected card. Setting a PIN, inspecting transactions, or blocking a card all happen in the context of the card itself, so users never lose their place in the wallet. The action list is also contextual to card type: a Physical Plus card surfaces Change PIN and Unlink, which a basic digital card does not.
My role
As Lead Product Designer I owned the screen architecture, user flows, and micro-interactions across the iOS experience. With 1 PM, 2 iOS developers, and a QA lead, my contributions were:
The full lifecycle matrix
Documenting every card state, including expired balances, invalid entries, and network dropouts, and defining how the UI handles each.
The manual entry flow
A single 24-digit barcode field with a custom numeric keypad and inline validation, with camera scanning as the primary path and manual entry as the fallback.
The bottom-sheet interaction spec
Spring physics and spatial anchoring rules that keep users connected to the wallet while a sheet is open.
Validation loops
Running high-fidelity prototype tests on physical devices to find checkout friction with real users.
Key decisions
Tactile card carousel
The home state leads with the card itself, balance and expiry visible up front.
Outcome: faster balance lookups and more confidence at checkout.
Scan-first, manual fallback
An auto-focusing barcode scanner as the primary onboarding path, with manual entry and input validation as backup.
Outcome: less typing strain and fewer formatting errors at entry.
Friction on destructive actions
Block, unblock, and unlink each require a deliberate, confirmed step.
Outcome: prevents accidental deactivations and the anxiety of losing a stored balance.
Dedicated expired and spent states
Expired cards drop the payment CTA in favor of clear status and ledger access.
Outcome: avoids checkout confusion while keeping transaction history auditable.
Image: the expired state. The ‘Your card is expired’ frame with Delete card and View transactions is the cleanest proof of the last decision.
Experience & craft
The card wallet home
A gesture-driven carousel where card types are distinguished visually and the key actions, Add to Apple Wallet and open the checkout barcode, are one tap away.
Screen Set 1: the carousel swiping across Digital, Physical, Physical Plus, including the Expired state. The strongest lifecycle-made-visible sequence.
Card details and copy
Tapping a card opens a details sheet with the barcode number, expiry, and card type, plus a one-tap copy with a clear Copied confirmation.
Screen Set 2: card details sheet, tap Copy, then the Copied state.
Block, unblock, and transactions
Blocking a card is a confirmed action with an unmistakable status (Card temporarily blocked), and the card’s badge and action list update to reflect it. The transactions sheet lists merchant activity with a running total and a clear sync-delay note.
Screen Sets 3 and 4: block, blocked badge, unblock confirmation, and the transactions list (with the 1 day delay note) next to the No transactions yet empty state.
Adding a card
Camera scanning is the default. If scanning is not possible, manual entry uses a custom numeric keypad with the Continue action gated until the code is complete. If the camera detects a code, the flow advances on its own.
Screen Set 5: scan sheet, manual entry, filled state.
Edge cases and failure mitigation
Most of the design that mattered lived in the failure states:
No in-store connectivity
Retail basements and grocery stores have dead zones. I designed an offline model that keeps barcode data readable, showing a time-stamped barcode from the last sync with a clear tag explaining the offline status, so a weak signal never becomes checkout panic.
Outdated balances
Legacy merchant processors can lag by up to 24 hours. I added a pull-to-refresh on the balance and a Balance last updated at timestamp beneath the value, so a stale number reads as pending, not wrong.
Secure PIN handling
Resetting a 4-digit PIN interacts with the device’s secure enclave. I designed a focused, multi-step confirmation that disables background screenshot capture on iOS while sensitive values are on screen.
Validation
I ran multi-round RITE (Rapid Iterative Testing and Evaluation) sessions with a high-fidelity prototype on physical iOS devices.
The tasks
Onboard a crumpled physical card via the camera, set up a PIN, check a balance, and walk through the card-blocking flow.
The key insight
Early prototypes showed the full, unmasked 24-digit number on the main card. In public testing, users flagged the privacy risk of having it visible over their shoulder. I revised to standard masking with an explicit tap-to-reveal, so the number is private by default and visible only on intent.
Image: before and after of the masking change. Left, the exposed number. Right, masked with tap-to-reveal.
Impact
The wallet was designed to move three things. I have framed them as design intentions, not measured outcomes, and left space for the real numbers.
Support load
Self-service handling of expired, blocked, and PIN-mismatch states aimed directly at the most common ticket triggers.
Onboarding speed
Scan-to-add to cut entry time versus manual typing.
Engagement and redemption
Persistent CTAs and the Apple Wallet hook to drive repeat use and faster checkout.
Image: closing shot. A polished final hero or a simple metrics card once you have real numbers on it.
Reflections
Stored value runs on trust
In payment-adjacent design, visible transparency is a core requirement, not a polish item. A beautiful UI fails the moment a user doubts their balance is accurate.
Next, for V2
Location-based proximity notifications that surface the relevant gift card on the lock screen when a user enters a matching retail location.
Let's talk
Pick what works best for you: a quick video call or a simple email.
