Designing a multi-product experience
At Nubank we love bold vision: we push ourselves and our teams to be limited only by our collective imagination. When we started the company, we wanted to build the best credit card experience we could, and that has remained our core focus for the last three years. But over the last year, as we felt we were able to expand our ambition and offer a product that had even broader appeal than our card — NuConta — we also realized that the digital experience we had so carefully created and evolved for our card users was not necessarily the ideal experience for our users in the future. For that reason several weeks ago we launched a completely new design of our app an experience created to support both our current and future users and ready for a multi-product world.
Early days
While the interface design and actual development for this project may have begun over the last year, we began thinking of the need for a new digital experience during the early days of kicking off our Rewards project in 2015. It was clear even then that new features and products bring complexity and it would fall on our Design Team to find ways to retain a simple, intuitive experience for users. In parallel with our work on the Credit Card and Rewards products, we did a spike with some designers with quick sprints to explore and prototype new directions built from the ground up.
To better understand all user needs we did several co-design sessions with various teams and squads. The purpose of these sessions was not simply to gather information but also to explore how, rather than complexity, more products can enable a richer experience that can provide more opportunities for the users.
As we began to converge on a clearer direction, we looked to bring elements of this new vision to users. With the official launch of Rewards last year we brought a new contextual header to our mobile app, to bring not only a better credit card experience but also a temporary entry point for Rewards and NuConta. This header was already a sneak peek of what the new experience was going to look like: helpful, contextual, simple, at a glance. Yet in launching this header we also got a glimpse of the main challenge of the whole project: how do we manage a small amount of digital real estate for an ever growing base of users and portfolio of products, while staying true to our design principles?
One of our challenges when we started this redesign was to attend and understand all squads and projects needs, not replicating our internal structure as a complex experience to our users. We needed to build a fluid experience in which you don’t need to think only in products, but on how Nubank can simplify things to you.
Initial User Tests
With the initial versions of the new user interface, we invited a large group of Nubank customers, already familiar with the previous app, to test this new app in individual sessions — mixing different ages and tech savviness. The goal was to see how people would perceive this major change; we defined some basic tasks we believed were affected by the new structure, like paying a bill or changing a phone number, and evaluated the success rate by measuring the percentage that users could complete correctly.
After more than 100 sessions of the same group of tasks, and a lot of iterations, we reached a 85% success rate, which means that 85% of people were able to accomplish those tasks. Besides being able to see if users could accomplish those tasks and improve the interface, we also learned different ways to onboard them within the new experience.
User Interface
To rethink our mobile experience, we had to ignore for a moment everything we did before and start from the ground up. If we say that the future is purple, and for us the future lies with our users, we thought it would be natural to start from a purple screen, further connecting our customers with the purple brand that they love. Your purple space is your profile with all configurations and settings options. On top of this, we provide shortcuts for the main products and actions, to get the user the right actionable information at the right time.
Product widgets
We also wanted to provide content based on your moment in the journey. With a similar logic from our previous feed header, not just providing the information and immediate actions to users, but rather anticipating their information needs and adapting the experience to those needs.
Global actions
Even highlighting the most important information for a user at any given time with the widgets, users need an easy way to access relevant actions based on the products they have, close to their thumbs — and soon to be customizable to provide easiest access to what is most important to you.
Profile & Settings
The central part of the new experience is the purple space, where users can access all profile details and configuration options — your account number with QR code, support, etc. Easy to access with one simple gesture.
Onboarding
The previous app teached us that we should be smarter on how we onboard users on this new experience. So, to provide a smooth understanding, we built a fake loader for first time users to briefly explain the overall structure and interactions of the new dashboard, and we also used the content itself while the interface is built, to incentivize them to explore and interact.
Results & next steps
It’s been weeks since we reached 100% rollout and overall the reception has been very positive. However, we know changes are hard and it’s not so easy to get used to something new — especially if there’s nothing “wrong” with the previous version. That’s why we are inviting users to our office to talk about usability, and going over reports about engagement and data usage to better understand the reception to this new experience and use this information to continue improving. We are also working on an improved design system including experience guidelines that will be gradually applied to the new experience to provide an even smoother way to interact with Nubank card and other products.
If you are already using the new Nubank app, tell us in the comments how your experience has been so far.
