Designing a Debit Card: Combining Aesthetics and Adding Functionality on a Boring Design

Wise launched its borderless account card in 2018 and introduced a bright green debit card, as shown below, which allows you to spend money like you normally would with any debit card.

wise borderless card


Apple introduced the
Apple Card back in 2019 with probably the most minimal design with just a name and a logo.

I like Apple products a lot so comparing Apple Card to Wise Card was a fairly obvious thing for me to do. What got my attention was seeing the microchip on the right side of the card instead of the left.

apple card image

I had limited knowledge of debit cards apart from knowing how to use them. So I did a little research and found that the chip’s position on cards is universally positioned, which I had not paid attention to before.


Apple flipped the text and logo upside down to make the chip appear on the right side of the card instead of the traditional left. 

 

The genius of the Apple Card is more in how it feels physically and the sense of privacy it provides.

With traditional cards, people usually show them to limited people and hardly ever share them on social media because they would only be three digits away (CVV) from sharing their complete card information with the public.

Since there is no information besides the cardholder’s name on the Apple Card, people feel more comfortable flexing that sleek titanium sheet on social media.

I wanted to redesign the Wise Borderless Card with a modern yet clean look without going Apple-like minimal. I wanted to preserve all the information.

I started with a simple wireframe, keeping the chip’s position in check, and designing around it.

 

I took inspiration from a medium article on Glassmorphism by Michael Malewicz, including his UI design video on YouTube, took references from other debit cards and used Wise’s brand guidelines for typography and color.

After spending a few hours, I came up with the following:

wise borderless card concept - wireframe outline

wise borderless card concept

 

“But why the hell is the QR code in there? ” is one of the possible questions I could get asked. It is completely understandable to have questions about the presence of a QR code in this context.

It is common for individuals to retrieve their physical cards from their wallets and manually enter the necessary information onto their phones or computers.

Including a QR code simplifies this process by allowing the 16-digit code to be easily copied to the clipboard when scanned with an iPhone or iPad. This eliminates the need to remember and manually enter the lengthy sequence of numbers.

So when the QR code is scanned with an iPhone/iPad, this would allow them to paste it on that device and their Macs instantly. It is no different for Androids, but for Windows or Linux users, showing the card to the webcam might do the trick.

The QR code is meant to make inputting card information more convenient, particularly for those who have not yet saved this information on a password manager.

 

Share:

Facebook
LinkedIn
X
WhatsApp
Telegram
Email