Credit Card Dashboard
Designing a scalable credit card experience for Latin America.








PROBLEM
Our credit card experience had accumulated design debt and needed to migrate to our new design system.
SOLUTION

Pull together stakeholders across different countries, lead co-design sessions to tackle the problem from a global perspective and deliver a new credit card experience, capable of scaling and localizing to different markets.
IMPACT

A new credit card experience that is clearer, loads 2x faster and is measurable. Internally, it set a precedent on how to build product dashboards and inform re-designs across the organization.
MY ROLE
Lead the entire project process with other team members across Brazil, Colombia and Mexico. Deliver the re-design and coordinate QA with engineers.




Evolution of the credit card dashboard.



Design Ideation / Process


We worked on a series of ideas that challenged our notion of how our current credit card experience was structured. We tried out different orientations of our main screen and how it influences the readability of the final design. We finally landed on a version that was not so focused on an entirely new design but rather something that's a bit more close to home.




3 paths built from initial ideation sessions.



Credit Card Dashboard bill scenarios.


After deciding on the design path we would follow through with, we still had new areas of our design system that still had to be explored. One of these areas was the transaction and event feed which was still not tackled in our general documentation. We decided to take this on as part of our scope considering that we thought it as essential to the overall credit card experience. These details helped contribute to our global design system. By reducing the use of color throughout the entire experience, we got the opportunity to leverage colors in a more thoughtful and intentional way.


Credit card feed.


New color system for feed events.



Transactions typology.


Search bar replacement.


Search bar interactions.



Credit card edge cases.



Final Design and Impact


We delivered this final design to our entire org, launching first in Mexico and making sure the product can be localized to the different needs that each team in every country had with documentation to support new changes.

For our users, the design provided them with clear information that was contextual to their billing cycle and provided information they needed to take action, like paying bills, reviewing transations or further interactions like viewing past bill statements or blocking their card. This resulted in less doubts asked to our customer service team and a clearer understanding of relevent credit information.

For our team, this new design set the precedent on how to build product dashboards with our new design system and leverage some of the learnings we've gathered to test other hypotheses on new designs. We also contributed important additions to our design system that are being applied across multiple products in different markets.



Key Learnings





COMMUNICATE EARLY AND OFTEN

Working on a product that exists as slightly different versions in different markets is hard. Communication, both in real time design sessions as well as async is key to building great experiences as a team.
ART OF SHARING

By sharing learnings with teams in other geographies, you can help them build hypotheses that in turn inform you with future endeavours.



Get in touch: Email, Twitter, LinkedIn