Designing a multi-product experience

At Nubank, we love bold visions: 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 years.

But since 2017, as we felt we were able to expand our ambition and offer a product that had even broader appeal than our card — Nubank’s account —, 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, at mid 2018, we launched a completely new design of our app, an experience created to support both our current and future users, and that was ready for a multi-product world.

While the interface design and actual development for this project may have begun over the last year, we started 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 be up to our Design Team to find ways to maintain 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 more products can enable a richer experience that offer users more opportunities, rather than adding complexity.

As we began to converge on a more precise direction, we looked at bringing elements of this new vision to users. With the official launch of Rewards in 2017, we brought a new contextual header to our mobile app, to offer not only a better credit card experience but also a temporary entry point for Rewards and Nubank’s account.

This header was already a sneak peek of what the new experience was going to look like: helpful, contextual, simple at-a-glance. Yet, when 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 understand and meet all squads and project needs, without replicating our internal structure as a complex experience to our users.

We needed to build a fluid experience not only in terms of products but also about how Nubank can simplify things.

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 significant change.

We defined some basic tasks we believed were affected by the new structure, like paying a bill or changing a phone number, for instance, and assessed the success rate by measuring the percentage of users that could complete them correctly. 

After more than 100 sessions of the same group of tasks and a lot of iterations, we reached an 85% success rate, which means that 85% of people were able to accomplish those tasks. Besides being able to see if users could perform those tasks and improve the interface, we also learned different ways to onboard them on the new experience.

To rethink our mobile experience, we had to ignore for a moment everything we had done 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 setting options. On top of this, we provide shortcuts to the main products and actions, to offer 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 to our previous feed header, not just offering information and immediate actions to users, but rather anticipating their needs and adapting the experience to those needs.

Global actions

Even though we highlight the most critical information with the widgets, users need an easy way to access relevant actions based on the products they have, close to their thumbs.

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 taught us that we should be smarter about 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 to encourage them to explore and interact.

In May 2018, we reached 100% rollout, and overall the reception was very positive. However, we knew changes were 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 were 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 keep on improving.

We worked also on an improved design system, including experience guidelines that we gradually applied to the new experience to provide an even smoother way to interact with Nubank card and other products.