XP Credit Card

Project Details

Role: Product Designer
Company: XP inc
Year: 2020

About XP Inc

XP inc is the first "Brazilian unicorn", one of the biggest independent investment brokers in Brazil and, in 2020, it became a bank.

About XP Credit Card

The XP Credit Card was launched in March 2021. It's one of the first products of XP bank, with a different strategic approach in the market, by defining the card limit based on the users' investments and increasing it gradually.


PROBLEM

Since the XP Credit Card hadn't been launched to the market yet, the product design team was responsible to not only create all the features that would contemplate the MVP, but also help the business team to make the right strategical decisions using research methods, user tests and the best design practices.

So our challenges were to:

  • Create the experience of more than 5 features.
  • Test and measure the success of these features.
  • Help the Product Managers to prioritize the next feature based on the user tests and users opinions.
  • Create all the experiences while helping to evolve the company's design system.

All of that within less than 6 months.

STRATEGY AND METHODOLOGY

Since Credit Card is a service widely used, it's important to take into consideration that some experience standards are already intuitive for the users. Having that in mind, I made a lot of benchmarks and qualitative researches to better understand what in the existent credit cards experiences was well evaluated by their customers and could help us structure our own experiences and what we needed to do differently in order to innovate and highlight our product over the other financial companies'.

Before the first official launch, the team didn't have much quantitative data to analyze or use as reference to guide our experiences, so we decided to make a testing release with a restricted group and monitor its behavior data to refine our experiences while doing some qualitative tests with future prospects, but paying attention to the biases of these numbers, since the users at that time were only premium clients and XP employees.

To create all these solutions as fast as possible, I used SOMA, our company's design system, that helped me to gain agility when creating the user interface experiences while the design system itself was still being refined.

After designing the experience of all the features, I ran a usability test for each of them, in some cases using interview techniques, in others, using forms and Maze to help us to have more scalability on the data we wanted to get. In a specific feature, I also used the research diary methodology to better understand the impacts of our communication with the user during that time and how we could improve our interaction with them.

The main methodologies utilized were:

  • Qualitative tests and interviews.
  • User behavior and quantitative data analysis.
  • Flowcharts and interface design experience.
  • Design System.
  • Usability testing.
  • Accessibility specifications and testing

Prototype and Testing

I created each prototype and research script to drive the usability tests. A research specialist assisted me to conduct the interviews since I preferred to not test my own design to avoid any kind of bias.

Some features needed more than one test to cover all the hypotheses and functionalities. The credit card limit was the most challenging one and I ended up creating more than 4 additional features to cover all the issues the users had during their usage.

Types of evaluation used:

  • Data analysis
  • NPS and CSAT analysis
  • Survey tests
  • Concept Interviews
  • Diary tests
  • Usability tests through interviews
  • Usability tests using MAZE
Miro Dashboard with the output of the user tests.
Miro Dashboard with the output of the user tests.

Digital Accessibility

While working on the XP Credit Card project, I also lead the Digital Accessibility and Inclusion initiative at XP Inc, so all the features were created respecting the WCAG rules.

Usually I specify:

  • The material honesty of each element
  • Components' labels
  • Complementary texts
  • Content groups
  • Interaction with screen readers

This makes the developers' work easier and also creates a script for the future QA testing.

Know more about the accessibility initiative here.

Exemple of how i do the acessibility specification

OUTCOME

Experience of using the different kinds of XP Credit Card benefits.

The logic flow of the automatic payment experience. A lot of the experience work wasn't related to the users interface, but its integration with the technologic internal systems.

Automatic payment logic flow

Experience flow of the interactions the user could have with our Credit Card limit solutions and use cases. One demand became 4 different features to really solve the users problems during the product usage.

Credit Card limit use logic flow

Experience of contracting an additional XP Credit Card for a parent.


THE IMPACT

2Q21 was the first full quarter since offially laughing XP credit card.

R$817 BILLION

Assets under Custody (AuC)

R$6.8 BILLION

Credit Portfolio

R$2.1 BILLION

Credit Card Total Purchase Value


APP INTERFACES

XP Credit Card Landing page
Credit Card Landing Page part2
Credit Card Landing Page part3
Credit Card home page
Home Part2
Name on the Credit Card interface
Credit Card Benefits
Credit Card Market place
Filter
Configurations
Timeline
Investback
Credit Card Onboarding
Personalizing Credit Card limit

LEARNINGS

This project was an excellent opportunity to prepare me for the challenge I was going to face as a Product Design Leader. Understanding the credit logic behind the XP Credit Card was important to allow me to lead the Financial Services design team which designs all the experiencies for XP Loan and credit products, in addition to all the coexistence of products that have investments as a guarantee.