Ironhack’s Pre-work: Challenge Two

Nubank: A Saving Money UI

Victor (B) Athayde
4 min readOct 1, 2020

Author’s note: The UI study presented below is the result of a pre-work, a UX /UI Ironhack’s Bootcamp warm-up.

Nubank is a Brazilian neobank and the largest Fintech in Latin America, being a unicorn startup in a country where 55 million consumers are underbanked.

Among the company’s products and services are NuConta (a digital account), an international credit card (both fees-free) and personal loans — everything manageable through Nu’s mobile app. The app allows its users (like myself) to track transactions in real time, block their respective credit card if needed, apply for a limit raise and contact customer support.

According to the 2019 Fast Company ranking, Nubank is one of the most innovative companies in the world — Its UX and UI are among the reasons why.

Saving Money

All money deposited in a Nubank account automatically starts paying interest at 100% the Interbank Deposit Rate (every business day) — about 1,9% anual yield versus 1,5% from a regular savings account.

One of the latest services — and also an app feature — is about saving money with different time frames and ROIs (aka investment).

Living in an uncertain world, with unpredictable national and international policies, fluctuating economy and an unstable virus pandemic have been a major challenge. So, the saving money feature came at the right time!

Let us reverse engineer the Interaction Design and User Flow from this new Nu-feature pinpointing some findings.

Wireframing with Figma screenshot

Carrousel

As written by Raluca Budiu, “carousels have an important advantage on mobile: they fit a lot of content into a relatively small footprint. Their second big plus is that they may solve content-priority quarrels within the organization by allowing everybody to make their mark on the main screen.”

Nubank app implements carrousel controls correctly, prioritizing relevant items in a fixed sequence and not using many items.

NuBank app carrousel wireframe

Even though we are already familiar with vertical and horizontal swiping, carousel have some disadvantages related to accessibility (topic for an Inclusive Design article).

Icons vs. Buttons

Nubank app avoids using regular buttons, leaving them for only final actions. Knowing that universal icons are rare, the app uses iconography wisely, using icons commonly used bu the target market — Eg., pig icons for saving money. Moreover, the main icons have text labels, increasing the recognizability and the memorability.

NuBank app carrousel wireframe

The wireframe I made does not show up the most of the app’s icons (just squares with Xs), so try to figure out the ones I added a text label to and which one would be the pig icon.

NuBank app user flow wireframe

The User Flow

In order to create the new feature usability, the Nu App cuts a long story short. Instead of tilting the option “Investment”, throwing a list of questions — and steps — to figure your investor profile out and stacking boxes containing a variety of terms and conditions as most bank applications do, the Nu app simply calls its new feature “Save Money” and shrinks the process to 6 moves:

(00- Log in to the app — it doesn’t actually count)
01- Swipe to the account item
02- Tap it for account details
03- Tap the “Saved money” button/icon
04- Tap the “Save money” button/icon on the Saved money history page
05- Type/confirm the amount you would like to save
06- Choose the option that suits you

A Happy Path

In the context of software or information modeling, a happy path is a default scenario featuring no exceptional or error conditions. So, could we say we had a happy one here?

Well, if you are a professional investor or have mastered investment habits, maybe not. On the other hand, if you want a faster return on a low-risk investment and need to have money available in uncertain times, it can be a practical and healthy choice.

As a result, whether you have a finances background or not, Nubank app simplifies the saving money task, being friendly to investment-phobics and creating charmingly UXs and UIs.

Leave me a comment and let me know what you think!

Actually, I have made a slip-type error in choosing the money availability — I have chosen 2022 instead of 2021. I would like to have money by then or I will have to sacrifice the yields retrieving the money earlier.

Could this error have been avoided?

As I am finishing this article Nubank has just updated their app.

Let’s check it out!

Thank you for reading!

--

--

Victor (B) Athayde

A UX / UI Designer. A mad scientist, a curious problem solver, always learning to provide a unique experience.