Building: The New Mobile App Header

Guilherme Neumann
Aug 15, 2017 · 4 min read

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

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

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

Image for post
Image for post
Denied transaction: adjust your limit button when denied by lack of limit

Card tracking

Image for post
Image for post
Card in production

Bill due

Image for post
Image for post
Bill due


Image for post
Image for post
Rewards points

More to come

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!

Designing Nubank

Design culture, technology, process, people, and learnings.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store