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 people reach 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.

A Business Perspective

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 solve 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.

Analogous Inspirations

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.

Insight #1

‍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.

Insight #2

‍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.

Designing for users mental models

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.

Insight #1 – Usage of the transaction details

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.

Insight #2 – Clean merchant logos

‍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.

Insights #3 – Status & Location Awareness.

‍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.”

Opportunities

Based on the insights gathered in the Analogous Research, Customer Support Request and former research, three core opportunities emerged.

New transaction details

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.

Personalized Actions

With the smart-actions prediction, only relevant actions were displayed on transaction details.

Geolocalization

With geolocalization, the place and time where users made a purchase were lifted up so they can relax during their travels.

Real-time Status

‍Informative banners and badges were placed to let users know the status and how long it would take for a transaction to get through.

Rejection Reasons

‍By getting a transaction declined, now users get a quick message explaining why and how they can revert it.

Enriched merchant details

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.

Before

After

Swipe to payback

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.

Other highlights

iOS & Android Consistency

To keep the experience cohesive cross-platforms, we aligned the main navigation on android and iOS.

Original Amount

Foreign transactions are now displayed with the original amount below.

Learnings

#1 Opposite outcome as a risk

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.

#2 Plan to replan

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 habit whole and move forward.

#3 Design systematically

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 my 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 whole. 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.

#4 Multiple journeys

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.#5Different voices matterThis 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.

Shout-outs

‍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.

Relevant information should be put right at a glance, fast to scan, and easy to understand. That’s why, when we talk about improving the N26 App home screen, we talk about two high-level goals: