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
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.
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.
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.
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.
Here are some of the key decisions made over six weeks of work.
Mini-graphPeople used the graph mostly to understand trends about their money. On tap it now opens a more detailed analytics screen.
Supporting multiple actionsThere was a number of actions being launched for the product. The new pattern now aligns icon and text to the left when there are 4+ options and turns into a swiper ribbon.
Transaction listTransactions are now displayed in a much more natural vertical scroll.
More space for the new featuresThis is as busy as the UI gets if you have a e. Money to spend, to save and loans to pay all at a glance.