Video by Everton Guilherme
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.
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.
- Widgets — cards that worked as windows to the products (conta, credit and rewards).
- 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:
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:
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.
Revamping the savings account (NuConta)
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.
Open the way for NuConta's growth.
Some of the questions and challenges faced:
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.
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:
Searching for the term “NuConta” returned multiple tutorials on how to access the list of transactions and other essencial features for customers.
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.
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.
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.
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.
Mini-graphPeople 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 actionsThe 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 listMoved away from the horizontal swipe to a more natural vertical scroll
More space for the new featuresWith 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.