lucasterra

Product Dashboards

Nubank
São Paulo, Brazil
2018-2019

Building the foundation of the world’s most downloaded banking app

Design team
Lucas Terra, Guilherme Neumann, Mateus Peixoto, Lucas Neumann
Role
I led product design for the Credit Card interface and contributed to the design and prototyping of the savings account

✴

Video by Everton Guilherme

Overview

As Nubank shifted from a credit card to a more robust banking ecosystem, it became evident the need for a more cohesive interface for our products.

Different patterns accross the app hindered user onboarding, feature discovery and didn’t optimize for important product offerings. The current designs weren’t flexible enough to accomodate new features.

These two projects combined took the course of 3½ months where I redesigned and prototyped a new experience for our savings account and credit card dashboards.

Impact

+6%

people paying their credit card bill on time

+3%

in revenue from instalment anticipation

+4%

savings in customer support

2+ years

shipping new features without refactoring the new interface



Long-format story below ↓


Nubank new home screen, May 2018

Context: the Nubank app

In 2018, four years after Nubank was first launched to the public, we released the first redesign of our app’s home screen. Six months before Nubank had been a credit card (only) company.

Now, as we rolled out NuConta – a unique mix of savings and checking account – the app needed the space and structure for our family of products to continue to grow.

This design, led by Guilherme Neumann, was the shell for Nubank’s products and consisted of two main components.

  1. Widgets — cards that worked as windows to the products (conta, credit and rewards).
  2. Shortcuts — buttons that helped navigate from one place to the other. They worked like doors to other parts of the app.

Once you opened each of the widgets this is what you would see:

nubank old dashboards

Product dashboards before the revamp.
While some of the structure was shared, you could see the fingerprints.

The need for a new design framework

While the new home screen was succesful at giving more visibility of the savings account and rewards programme, it also highlighted the inconsistencies in the UI.

People had a steeper learning curve before making their first deposit and activating their credit card. We were distancing from Nubank’s “fight complexity, empower people” motto.

Here’s an example:

gesture swipe left

Swiping left in Credit Card, Nuconta and Rewards.
Different results and confused users.

As we onboarded several thousand — and later over a million — customers per month, our app urged a new product structure for both NuConta and the Credit Card.




Part I

Revamping the savings account (NuConta)

NuConta before and after

NuConta before and after

Not long after rolling out our mix of checking/savings account I started working on the evolution of the original interface along with other two designers.

At that time, Mateus Peixoto and I were working on the yet-to-be-released personal loans product while Lucas Neumann was exploring ways to help customers separate money. After a few rounds of user interviews in our projects, it was clear: our features would struggle to coexist in NuConta’s main screen.NuConta’s 6 months old interface was already bloated.


Project Goal

Open the way for NuConta's growth.

Some of the questions and challenges faced:

  1. Do people understand the graph?

    The original UI was ~50% a bar chart. When launching the product the team didn’t spend much time evaluating if people understood/ saw value in it.

  2. People’s mental model was different from how the product works

    Our mix of a checking + savings account generated a lot of buzz but that wasn’t enough. Customers wanted to separate their money in two different categories: to spend and to save.

  3. Unintuitive gestures

    Searching for the term “NuConta” returned multiple tutorials on how to access the list of transactions and other essencial features for customers.

  4. Upcoming feature boom

    The product was a skeleton of a bank account — with no debit card; ATM withdrawal; auto-debit and other basic features. The number of features would grow increasingly fast and we needed to improve visibility of new product offerings.

Explorations

Having defined the main goals, I spent several afternoons pairing with my colleagues in the Design Studio. For every new concept I also explored how it would be translated to the Credit Card interface – and then, brought back a new idea that could be used for the savings account too.

Some of my favourite explorations from this process. <br />The credits of many of them go to Mateus Peixoto and Lucas Neumann.

Some of my favourite explorations from this process.
The credits of many of them go to Mateus Peixoto and Lucas Neumann.

An unusual quantitative approach

Prototypes evolved into completely removing the graph from the interface. Before making a final call, our UX researcher suggested collecting quantitative impressions.

We used Instagram Stories' recently launched poll sticker to quickly grasp how people perceived the graph.

NuConta graph on Instagram Stories

Informed by data, not driven by it

While most respondants said they found the graph helpful, that was never translated in people’s stories with the product. We decided to move with a much smaller version of the graph. Giving more emphasis to the numbers went a long way helping customers understand what was going on with their money at a glance.

New design highlights

Here are some of the key decisions made over six weeks of work.

GIF Crop of the top of the UI, wave load

Mini-graph

People now use the graph to understand trends about their money. It also served as the entry point to a more detailed analytics screen.

Supporting multiple actions

The actions are now in a swiper ribbon similar to the one in Shell. Up to three actions, icon and text are aligned to the center. Beyond that, you can scroll horizontally and icons are aligned to the left for visual hinting

Transaction list

Moved away from the horizontal swipe to a more natural vertical scroll

More space for the new features

With our new features shipped, this is as busy as the UI gets. Money to spend, to save and loans to pay all at a glance.



Part II - Soon

Rebuilding Credit Card

  Credit card before and after

Credit card before and after


This page was written and built by Lucas Terra. You can reach me on Twitter and the good old eletronic mail. © 2009-2020