DESIGN ENGINEERING CHALLENGE

Designing a personalized credit card experience

Try it live

Try it live

exploring the space

I went looking for problems in fintech that were actually worth solving, and I landed on five of them. Each belongs to a different person, different moment, with something different at stake.

  1. currency rate charts

Everyone transferring money internationally gets the same line graph everyone got in 2009. The rate is the whole product for those people, and the chart is still treated as an afterthought.

  1. send money interaction for teens

Teens transact constantly, but every wallet they touch is really designed for the parent funding it. The interaction is the thing that would make them stay, not the balance or the transaction list.

  1. customized credit cards

Banks give you a gallery to pick from, or an image to upload. One offers no control and the other offers too much, and neither one is truly customized or gives a sense of personalization.

  1. receiving money, but delightful

Money arrives as an email, push notification or a reference number, and that is the end of it. The most emotional moment in the entire transfer is the one that most have ignored to design.

  1. a rate alert setter

Freelancers, families and expats want to catch a rate rather than sit around watching one all week. Setting the threshold should feel every bit as satisfying as the moment it finally gets hit.

why customize cards?

Every bank offers the same two options: pick from a fixed set, or upload your own image. Neither of those is really customization. I picked this idea on purpose, because it had the most room for motion, feel, and one real magic moment.

people want objects that feel like theirs

Cash App's magic wand didn't invent a behavior, it productized one. People were gluing tap-to-pay cards inside homemade wands and filming it. The first drop of ten thousand sold out in hours.

design your own card

Around 54 million combinations, and all of them are unique. The implicit constraints are the real design work, and the user never sees them and still gets something that feels truly personal.

Interactions heavily inspired by Josh Puckett’s interfacecraft.dev

a playground before the product

Carousel behaviour, colour, typography, card graphics. I tested all of it in a separate playground first, so nothing ever landed in the real build before I already knew how it was going to behave.

Try Playground

Try Playground

ship your card animation sequence

  • Thought out loud about exactly what I wanted, then let Claude ask me the questions

  • Built out a full PRD for the Framer Motion component before writing any code

  • Created a new branch and let claude hook it into the existing scaffold

  • Tweaked the easing and the timing by hand until the whole thing felt right

exploring range for carousels

Apple's dock, Revolut, and a long tail of my own dead ends that went nowhere. I had to see the entire range before I could commit to a single position, even though almost none of it shipped.

exploring range for cards

I prompted Claude with explicit structural constraints on geometry, angle, size rather than asking it for something that simply looked nice. Vague prompts get you vague cards, every single time.

What I learnt

AI got me to ninety percent in two days. The last ten percent took the rest of the week, and it turns out to be the only part of the whole build that anybody actually feels when they use it.

Constraints are invisible work. The user should never see a guardrail anywhere in the product, they should only notice that nothing they manage to make ever comes out looking bad.

Every single choice I removed made the output better. Fewer knobs sitting on the panel, and noticeably stronger cards coming out of the end of it. Restraint did better than more range.

what's next

  • A sequence that shows the card actually being made, rather than only being shipped

  • Reduced motion, built properly

  • Finer control over the way each individual graphic gets tweaked

  • More variety of micro-graphics

  • Sound design, because the envelope closing really does deserve a thunk to go with it

what was out of scope

Responsiveness for mobile and keyboard navigation were the trade I made for depth on the core interaction. Both are the first thing I pick back up, and neither one is a hard problem, just an unspent day.

resources and references

  • Josh Puckett · interfacecraft.dev, dialKit

  • Emil Kowalski · animations.dev, Claude Skills

  • Jakub Krehel · oklch.fyi

  • Disney · The 12 Principles of Animation