what's new

How we built the Visa Card Designer

Creating an outstanding online experience for designing your very own credit card involved a deep understanding of the very complex rules and regulations that govern each element of the product.

How we built the Visa Card Designer

The design and printing of a credit card is a very complex process, mostly controlled by a huge set of rules that manage card elements like chip and contactless sign -to name a few, how they are placed and how the finished product complies with the over 100 million POS (Point of Sale) machines out in the world. Visa, just like all other credit card companies, has a vast amount of rules that decide the way credit cards (both physical and digital) are designed. About 2 years ago we were asked to create a "Card Design simulator", an application that would allow anyone to design a credit card in a browser window, while complying with the complex rules that govern the process.

The challenge for us was to create a simple experience on one side so that anyone could use it, while making the complexity of the process behind managing the rules run smoothly, mostly unnoticed by the user.

To be able to create such an online experience we first had to go over the full set of rules and decide which ones and how we were going to use them, and also determine the ones we wouldn’t be able to bring into the experience.

Our team of designers had to work together with front end and backend programmers going through logic cycles, excel worksheets to try to understand how the rules would apply to design, and then transfer that long list of requirements to a single UI element, and make it simple for the user not wanting to know what’s going on behind the curtain.

After over 18 months of work we finally created the Visa Card Design Simulator: an online application where you can play around with all the elements you find in most credit cards in your wallet, and have fun in the journey and create it at your very own choice.

You can see it for yourself at partner.visa.com.

If you happen to check it out and feel the process as "simple", we will know that we’ve succeeded in our role as designers.

While you are creating your work of art, there are many "conversations" between what you do and an API (an APplication Interface that receives and sends information through a secure connection from your browser to a remote server) so that anything you design is approved by the rules that govern the design.

Sometimes designing an exceptional experience doesn’t end in the UX or the UI, but also in understanding how the complexity of information can be reduced to a simple switch, button or movement.