Credit Card Payments
Designing a new payments dashboard for customers.

Customers were consistently confused about how to pay their credit card bill.

Since we were unable to provide an in-app payment platform, we had to re-think the information we were providing for current methods, as well as introduced a new payment method, a type of instant transfer unique to the Mexican market.

Dramatic reduction of payments related contact rate and an increase in total number of payments made.
Lead designer, working with one UX writer.

Previous payment instructions.


Our payments instructions we’re incredibly detailed and thorough with the hope that people would follow them step-by-step. We originally set out to understand if users found this helpful. We very quickly started to understand that our customer did not need their hand held during the process, but rather just a simple nudge towards the right direction and they could find their way forward. Important point though, we still needed to provide enough contextual information so that people understood where they were in their billing cycles.

Design Ideation / Process

We started ideating on different visuals that could help people understand where exactly they were in their billing cycles, the goal here was to give them sufficient information so they could make a good decision on payments.

We started working with content + simple visualizations, trying to portray the billing cycle as a linear timeframe. The problem here was that the written information was already saying enough, so the visualizations were really only fighting for attention and not helping people understand the full screen.

Ideation phase.

After some quick user testing, we confirmed these issues with the design so then decided to leverage existing visual language like the colors we use to inform about bill states. Blue for the open bill, light red for closed bill, dark red for late bill. A quick anecdote, we had to use light red for the closed bill because people did not like being rushed to pay their bill.

The path forward.

In terms of content, we worked on different texts that re-inforced the color being used to describe the bill states. For the open bill state we reminded people that they didn’t need to pay anything, but if you wanted to free part of your credit line, you could do a partial payment to do so. When the bill is closed, remind them that they have the option to do a minimum payment if needed, and when they are late to pay, remind them when their bill closed and that they need to pay their bill to re-activate their credit card.

For the detailed instructions we decided to dramatically rework the information and just kept it as simple as possible. Focusing on nudging people in the right direction rather the explicitly labeling every single tiny step they had to take to pay their bill. 

Detailed payments instructions.

Balance in favor.

One Last Thing

Through the same user testing sessions we had, we found out that customers had this underlying need to be recognized by their financial institutions. One case that we found was that a portion of people would pay more towards their credit card than needed, to make sure that their bill was covered and to have some balance in their favor for their next bill. By identifying this we knew we wanted to design a screen that celebrated this, so we worked on this last version above where we subtly recognized the user and remind them that they don’t need to do anything else.


This new design helped us better understand the content rhythm we needed for each payment method and helped us establish an informal system for these screens. Now, whenever we introduce a new payment method, we know what things work and how we need to layout the story. Making sure to always provide sufficient context and options for people to make good, informed decisions.

After releasing this flow, our contact rate for payments reduced dramatically and with this new instant transfer method, enabled people to use their limits even more, free them as they please by paying in advance and continue to use their credit cards, without having to wait until the end of the month or a certain period of days to have their payment reflected.

Key Learnings


Your customers are smarter than you might believe, find ways to meet them half way and help them get where they need to go quicker, without overwhelming them.

People want to be seen, so notice them and celebrate anything that merits doing so.

Get in touch: Email, Twitter, LinkedIn