A home for the easier-than-ever finances
A design case study of simplifying transactions to +8 million users
Liked it? Share this case study to inspire other designers
A design case study of simplifying transactions to +8 million users
Getting started
Before we start, to comply with my non-disclosure agreement, I have omitted confidential information in this case study. All information is my own and does not necessarily reflect the views of N26.
N26 is a fee-free bank account that you can open in under 8 minutes, directly from your phone or computer. You can top it up with cash or from other bank accounts, set savings goals with Spaces, keep track of subscriptions, recurring payments, and finances with Statistics, or send and receive instant money from your friends via MoneyBeam.
In 2021, the company crossed the 7 million customer mark across 25 markets, with a team of more than 1,500 employees across offices in Berlin, New York, Barcelona, Vienna, and São Paulo.
Context
For a global product used by millions of users, the app home screen plays a huge role setting the starting point of most of our financial journeys. That’s why it urges to address challenges such as helping users to feel in control over their finances, analysing spending habits, and finally getting informed about last-minute tasks.
However, in a world packed with many apps fighting for users’ attention, it became harder and harder to find a sweet spot in our users’ daily routine.
To illustrate that, a recently published study from the Technical University of Denmark has shown the collective global attention span is narrowing due to the amount of information presented to users. It showed that people now have more things to focus on – but often focus on things for short periods of time. Meaning the time users spend understanding a specific screen or a product was significantly shortened.
On top of that, a study from Statista pointed out that different from social media apps where users spend on average 2 hours and 30 min every day, the time for banking activities is approximately six seconds – Yes, six seconds.
Taking it a step further and learning more about users’ financial issues, and their general questions around baking, we at N26 recently surveyed over 10,000 individuals across the U.S. and Europe.
And we learned a lot.
We found that money issues have become one of the biggest concerns for people, and in the U.S. specifically, almost 75% of Americans chose a negative phrase — like ‘worried’ and ‘anxious’ — to describe their feelings towards their finances. And while money might be top of mind, many of us avoid talking about it.
Our survey also found that 39% of Americans feel irritated or annoyed with their bank or banking services provider, and of that, 25% agree that it is because everything is so complicated.
We don’t talk about how we manage our money because there’s a wide variety of complex terms and daunting disclosures that can feel too overwhelming to tackle at times.
The challenge
That being said, being able to rapidly track your spendings and take action in case something is unclear has become a task to be done in seconds and, consequently, requiring as little cognitive load as possible.
Relevant information should be put right at a glance, fast to scan, and easy to understand. That’s why, when we talk about bringing N26 App Home Screen to the next level, we talk about two high-level goals:
My Role
When I joined the N26 design team in 2019, I led the design workstream of the app home screen until 2020. My cross-team was formed by amazing and talented people, including Lea Christodoulatos and Kristina Walcker-Mayer as Product Managers, Radina Doneva as User Researcher, Veronica Emelianova as Software Quality Engineer, Chirag Kunder as Android Engineer, Cédric Rolland as iOS Engineer, Demi Frechette as Software Engineer, and Larisa Amariei and Folger Fonseca as Tech Leads.
As a cross-functional team, we drew a plan to unpack and tackle problems from a user and business perspective, going through an extensive mapping over clashing moments in the user journey, analyzing customer support requests to understand why a substantial part of our 7 million customers reachs out to N26 so often, getting back to former research to find existing insights, and benchmarking patterns used by competitors and similar products.
In this case study, I’ll show some of these steps and go over the insights that guided us from discovery to delivery.
Business
Customer support is one of the biggest touchpoints between users and our product. When something is unclear or seems to be fraudulent, the first thing coming to users’ minds is to drop a message, get into a stack of requests, and once someone from the support opens the case, the back and forth of messages begins.
The friction and time spent can easily take days and trigger users’ anxiety and frustration. On the other hand, from a business perspective, every user request means that someone needs to be allocated to address the problem, which consequently can become a high waste of company resources.
That’s why the first step was to have a deep look at customer support requests from November that year. The idea behind this analysis was to get insights on which kind of questions come from requests related to the home screen and match them to the ones overloading the system. In a further moment, these insights would be used to prioritize changes and improvements to mitigate the number of users’ requests.
A summary of the top issues was pulled off by the brilliant product manager Lea Christodoulatos. That was the foundation to spot pain points from both sides and uncover opportunities.
Competitors
We tend to underestimate the importance of reducing the learning curve when users experience products for the first time.
However, creating familiarity can be helpful to make users ready when they experience our product for the first time. Knowing where to find key actions, using standardized gestures, and structuring content in a way that is familiar to consume gives them the feeling of control and safety to navigate with confidence and manage issues by themselves.
Bring this to our day-to-day life, it’s a similar experience when we do groceries in the same supermarket every Sunday.
We know where products are placed, how to reach out to someone to get help, where to pay and where’s the way out. On the other hand, when we visit a store for the first time, it’s quite common to feel disorientated until we understand how the system works.
This analogy can be reflected in the design and product development cycle. That’s why our next step was to have a look at big players and OS guidelines to understand the patterns already used out there.
Collaborating with my Product Manager, we benchmarked big competitors such as Revolut, Nubank, Apple Card, and Klarna amongst another couple of banking apps and similar products to get how they layer out information and structure their home page.
As presented on the chart below, we measured how frequently given information was presented and how prominent this info was displayed. The matrix between frequency vs. prominence revealed that details from the party responsible for taking money out of users’ accounts – whether a person, merchant – were somehow highlighted in the UI.
Apart from that, we were able to spot that any information responsible to give users more details regarding a specific transaction – i.e. location, exchange rate, date, tags, transaction category – was lifted up. The assumption lied on the fact, that these cues could lower the sensation that this transaction was fraudulent and foster the feeling of safety.
User Interviews
After gathering insights from customer support, mapping competitors’ patterns, and a couple of brainstormings, we faced the need to get users’ perspectives on the sparking opportunities raised as outcomes from our investigation.
To do so, we bucked ideas and questions and, in collaboration with our User Researcher Radina Doneva, we came up with a full-day workshop, with interviews and activities.
The session got started with a warm-up to grasp users’ relationships and experience with N26 – payment behaviors, usage of N26 features, reasons for logging in, most typical transactions, and which problems they have experienced so far.
Then, a card sorting activity containing specific actions, features, or content was performed in order to let them layer out which piece of content should live on the home screen and which should be deprioritized to a second step. As a follow-up activity, users were prompt to group these cards into “must-have”, “delightful”, and “not important” buckets.
As the final exercise, participants were presented with a prototype containing other features. Right after, we performed a memory recall test asking them to draw on an empty template what they had remembered from the prototype they interacted with a minute ago. The idea behind this was to do an explorative evaluation of user preferences and comprehension, and which info stood out and was kept in their minds.
At the end of the day, we spoke to ten financially active users who had N26 as the primary account, and their level of engagement varied from extremely disengaged to completely aware of their financial goals. Although users were mostly based in Berlin, we made sure to invite people from different nationalities with backgrounds varying from Student, to Lieferando Rider, Magazine Writer, and Social Media Media Marketing.
It’s part of users’ mental model to tap to see details when they don’t recognize a specific transaction. Meaning that the transaction details would be a good and reachable spot to allocate not only guidance and explanation regarding our product but detailed information regarding a purchase such as a merchant official legal entity, exchange rates, sender and recipient details, tags.
“If I have a charge that I’m not familiar with, I quickly tap into the transaction to understand them better, especially if I’m unsure or need more information, most often for ATM withdrawals.” Participant 2, 25 years, France.
All participants preferred seeing clean merchant details instead of a category icon or an encrypted name. The new version – presented in a prototype – was perceived as more modern, young, intuitive.
“This looks really good – way cleaner and more dynamic. We associate things a lot with brands and also I’m a visual person. It’s good to see the logos because it is easily recognizable, it’s faster for me to see what’s the payment“. Participant 7, 34 years, Berlin.
All participants preferred seeing clean merchant details instead of a category icon or an encrypted name. The new version – presented in a prototype – was perceived as more modern, young, intuitive.
More details, the better. Users tended to appreciate when more details regarding a specific transaction were presented such as recurrent labels, online, pending status, and even the location where the transaction was performed. In the card sorting exercise, these pieces of information were also usually placed in the delightful or essential buckets.“If the transaction is in a place that’s not where I live, it definitely needs to be there.”
Based on these insights collected from our users, business and tech perspective, I had a couple of session with my Product Manager and other team members so we can map different solutions to solve the issues we’ve found during our discovery.
The solution
Based on the insights gathered in the Analogous Research, Customer Support Request and former research, two core opportunities emerged.
By redesigning it from the ground up, we’ve brought what’s relevant – merchant, geolocation, date, real-time status, and personalized actions at a glance. Everything is a one-tap way.
With the smart-actions prediction, only relevant actions were displayed on transaction details.
With geolocalization, the place and time where users made a purchase were lifted up so they can relax during their travels.
Informative banners and badges were placed to let users know the status and how long it would take for a transaction to get through.
By getting a transaction declined, now users get a quick message explaining why and how they can revert it.
Replacing encrypted names and random icons for merchant logos and clean names, we’ve brought clarity and made users’ transaction list easy to scan without looking twice.
By introducing gestures on users’ transaction lists, we brought the simplicity of the app messages to users’ banking experience. Got your salary in? Swipe to move it to a Space. Paid something? Swipe to top it up from your saving account.
To keep the experience cohesive cross-platforms, we aligned the main navigation on android and iOS.
Foreign transactions are now displayed with the original amount below.
Learnings
People are sensitive when their money is on the table, that’s why changing transactions can be challenging. Every improvement, instead of reducing the customer support requests, could easily lead to the opposite outcome, For instance, geolocating a transaction in a different city or simply showing a different logo might have triggered a massive backfire on social media. That’s why working closely with customer support played a terrific role for us to succeed.
Transactions are connected with hundreds of microservices and old legacy that could easily have taken weeks to understand the logic and be able to act, even after the extensive investigation from our front and back-end developers. That’s why one of the biggest learnings was the ability to quickly act and replan in case we face a wall. I lost count of how many times our team had to brainstorm to get out of a rabbit hole and move forward.
Learning how to design systematically was also part of my growing path in this project. First, because introducing new features doesn’t mean simply adding a line or an icon to the UI, that’s why the tough question of “What’s more important than what” helped us to prioritize what was relevant for users in a specific context and define logics behind even before the UI was thought out.Second, reusing or improving components from the N26 Design System – already tested, accessible or flexible – played a huge role.
It could have been easier from a single designer point of view to have introduced new components in our changes, but from a perspective system serving a global product, using the existing components helped us not only improve our feature but the product as a whole.Third, the N26 App home page is rather an ecosystem than a screen. Transactions must live with notifications, balance, info cards, status, overdraft, search, and at least a dozen other components important in the user journey.
it was also interesting to see motivations, how many contexts and use cases triggered users to open N26 apps and check their transactions. On that matter, it was also interesting to understand that the journey for some people didn’t even start on the Home page, rather using Apple Pay or the physical card to pay, get a notification stating that is all good and that’s it, without even opening the app.
This project involved so many people that I couldn’t leave it without mentioning learning how crucial was to hear different voices – internal and external -, experiences and feedback. Users were quite vocal during the releases and willing to give feedback. That was reflected in the hundreds of mentions on social media regarding our changes — sometimes positive, sometimes negative, but always constructive and helping us to push the product forward.
Thanks
A huge thanks to everyone involved in the process from getting to go.In particular, I’d like to thank Lea Christodoulatos, Kristina Walcker-Mayer, Radina Doneva, David Quiring, Christian Herzlein, Jude Temianka, Tishia Que, Julian Kraan, Emanuel Miličević, Fatma Köstekli, Francesco Bianchi, Vivian Lo, Bruce Lui, Veronica Emelianova, Chirag Kunder, Cédric Rolland, Demi Frechette, Larisa Amariei and Folger Fonseca.
Get a 30-minute call to go through portfolio reviews, interview preparation, career growth, and much more.
