Issue Card Redesign

With the launch of our new card (IO!) and planned expansion of card features, we knew we needed to revisit the card issue flow to be ready for the future.

The old screen was great—visually simple, very focused on only what was necessary—but it wasn't organized in a way that would support the future of what we wanted to do with the page. Adding form fields to it introduced complexity, both in terms of initial visual impact but also the ease in which someone could work through them.

IO also meant that we needed to do a better job of planting the metaphors of our different cards in user's minds. IO cards are dark, and our debit cards are white. Physical cards have a metallic EMV chip, virtual cards carry a glowing vaporwave-esque "virtual" EMV.

Additionally, it seemed like there was a missed opportunity to neatly transition between the issue card screen and the various success states of this flow. By bringing the visual metaphor of our card preview component into the form itself, and having it react to the user's selections as they created the card, we could add confirmation of those actions and reinforce the distinctions between the card types.

The built in scroll-effect and progressive disclosure of inputs also helps to keep the form a little streamlined, and gives us a lot of flexibility as we add new card types and controls in the future.

You can experiment with the demo and see how the form reacts to your input on our demo site: demo.mercury.com/issue-card

I hope some of this product thinking and background was interesting! If you also want to do a deep dive into cards and financial products, and figure out how to make them great (so cool companies can focus on cool stuff, not financial stuff), we're hiring senior product designers!