Building the new mobile app header

At Nubank, one of our Design Principles is “Go beyond” — in our day to day, one of the ways this value system manifests itself is in a constant drive to simplify the experience of our users. Our company is growing, the number and potential complexity of our products is increasing, so the need to be vigilant in seeking out an intuitive and delightful experience becomes even more important. It means not just providing the information and actions to users, but rather anticipating their needs and adapting the experience to those intentions.

On August 2017, we launched Rewards, our brand-new loyalty program. This is an optional program. While some users will need access to their points information and redemption options, others may evaluate the program and decide it is not for them.

To adapt to this complexity, we also designed an improved product experience on both Android and iOS platforms. This project required a tremendous cross-squad effort that we wanted to share with you briefly. 

Credit cards are surprisingly complicated, especially for our younger users who are learning to earn and spend money and use credit for the first time. We can use design to help them by managing how much information they are accessing and highlighting the most important information for them at any given time.

For example, if one of our customers wants to check their current bill balance or the last few transactions they have made, why not make this information available at a glance, prominently placed in the app? Or, if they’ve recently had a transaction denied for lack of limit, why force them to do the math and see their spending exceeds their limit? Why not show a simple alert with the reason for the denial and give them what they really need at that moment: instructions on how to remove this blocker (e.g., raise their limit) and proceed with the purchase?

By combining usage data, user research insights, and co-design activities (like card sorting) with a team of engineers, product managers, designers, analysts, and customer support, we defined what is most important and when for our customers in critical moments during the customer lifecycle.

We also established a hierarchy for this information so that customers can access the most critical information when several of these events occur at the same time. For example, we needed to define if a bill due is more important than when a re-issued card is on its way or if Rewards points are more relevant than a denied transaction.

Let’s take a look at how this works inside our mobile apps. We built some cards on the mobile app screen with the relevant content and related actions at each specific situation.

As designers, one of our main challenges in this project was to make sure we were not creating an annoying marketing tool or notification center. By working closely with each squad, we were able to understand the information they needed to convey and how to present it in a meaningful way, creating variety without overwhelming users.

This required establishing some rules. For example: if it needs a dismiss button, it’s not relevant to our customers.

Denied transaction

We know why most transactions are denied, so we decided to provide full transparency to users on why this is happening, and offer actions to quickly fix the problem and allow them to complete the transaction.

Card tracking

Clear and complete information on where your new card is and when it should arrive.

Bill due

When a bill is ready for payment, we provide a quick shortcut for customers to pay their bills.

Rewards

A quick summary of the status of your current points and an easy-to-find entry point into the rewards feed where users can access more information and redeem transactions.

Kudos to our team of engineers, analysts, designers and product managers who worked hard to deliver this improved experience, and for continuing to make Nubank a highly-intuitive product that is relevant to our customers.

As we roll this out, we are doing A/B tests and looking closely at user behavior and the first customers’ feedback as we think about areas for improvement.