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. This means not just providing the information and actions to users, but rather anticipating their needs and adapting the experience to those intentions.
In the last week 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 the Android and iOS platforms. This project required a large cross-squad effort that we wanted to quickly share with you.
Right information at the right time
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 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 denied reason and give them what they really need in that moment: instructions on how to remove this blocker (e.g. raise their limit) and follow through with the purchase?
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 define what is most important and when for our customers in critical moments during the customer lifecycle. We also defined a hierarchy for this information such that customers have access to the more 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 is more relevant than a denied transaction.
Mobile Experience
Let’s take a look on 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 on 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 happening, and provide 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 to pay, we provide a quick shortcut for customers to pay their bill.
Rewards
A short summary of your current point bank status and a easy-to-find entry point into the rewards feed where users can access more information and redeem transactions.
More to come
Kudos to the our team of engineers, analysts, designers, and product managers who worked hard to deliver this improved experience, and to continue to make Nubank a highly intuitive product that is relevant for our customers.
As we roll this out, we are doing A/B tests and looking closely at user behavior and the first customer feedbacks as we think about areas for improvement. If you have any feedback on these feature we’d love to hear it!
