USer Interface Design

USer Interface Design

N26

N26

N26

N26

N26

Recently I decided to take the next step to a (nearly) all digital wallet: I’ve become a member of N26, a mobile bank based in Germany. It’s a virtual bank, there is no headquarter and all of the management — from setting up your account to locking your credit card — can be done either online or via their app, which is really beautiful by the way — they don’t call it “Banking by Design” for nothing. After a few weeks of testing the app to the core and using it almost everyday I came across a few things that were okay but not great, so I started thinking how they could be improved.

Recently I decided to take the next step to a (nearly) all digital wallet: I’ve become a member of N26, a mobile bank based in Germany. It’s a virtual bank, there is no headquarter and all of the management — from setting up your account to locking your credit card — can be done either online or via their app, which is really beautiful by the way — they don’t call it “Banking by Design” for nothing. After a few weeks of testing the app to the core and using it almost everyday I came across a few things that were okay but not great, so I started thinking how they could be improved.

06

Role

Role

UI / UX Designer

UI / UX Designer

Year

Year

2017

Type

Type

Case Study

Case Study

Navigation Bar

Navigation Bar

n26-navbar-old

Old Navigation Bar

Old Navigation Bar

n26-navbar-new

New Navigation Bar

New Navigation Bar

The new icons should be easier to identify, but also give a better idea what’s hidden behind them. Furthermore, the Transactions and the Statistics icon have been changed in order to match the data they show just a little bit better.

I’ve replace the expressionless paper airplane with the Cash Map, that has been on the top of the landing page previously. It was used for N26 references to friends (by which both of you get €15 btw) and I get it, N26 wants to grow and gain more users, but only the most important things should go into the navigation bar an I believe few would prefer Referrals to the Cash Map.

Another thing that has been added are labels. Labels are really a necessity and most companies underestimate their importance (e.g. VSCO). Of course N26 is mostly for young people, however, there are a lot of reasons for a mid-30 guy to sign up and he is likely not familiar with the meanings of these icons. Why not label them? There’s enough space!

People have bank accounts for 3 reasons:

  • save money
  • get money
  • move money (this includes spending money)


While savings are currently limited to Germany, moving and getting money can happen everywhere. So why not highlight the most important thing people want to do? Make the icon a little bigger and mark it in the brand color — it’s as easy as that. Let’s take me as an example: I open the app because of two reasons:

  • send money to someone
  • see, who has sent me money

So with a highlighted + I am reminded of what I actually want to do. This is also a good thing for the bank, because they make money because of transactions.

The new icons should be easier to identify, but also give a better idea what’s hidden behind them. Furthermore, the Transactions and the Statistics icon have been changed in order to match the data they show just a little bit better.

I’ve replace the expressionless paper airplane with the Cash Map, that has been on the top of the landing page previously. It was used for N26 references to friends (by which both of you get €15 btw) and I get it, N26 wants to grow and gain more users, but only the most important things should go into the navigation bar an I believe few would prefer Referrals to the Cash Map.

Another thing that has been added are labels. Labels are really a necessity and most companies underestimate their importance (e.g. VSCO). Of course N26 is mostly for young people, however, there are a lot of reasons for a mid-30 guy to sign up and he is likely not familiar with the meanings of these icons. Why not label them? There’s enough space!

People have bank accounts for 3 reasons:

  • save money
  • get money
  • move money (this includes spending money)


While savings are currently limited to Germany, moving and getting money can happen everywhere. So why not highlight the most important thing people want to do? Make the icon a little bigger and mark it in the brand color — it’s as easy as that. Let’s take me as an example: I open the app because of two reasons:

  • send money to someone
  • see, who has sent me money

So with a highlighted + I am reminded of what I actually want to do. This is also a good thing for the bank, because they make money because of transactions.

Login

Login

n26-login

A lot has changed here. Let’s begin at the upper right corner. A share extension icon — for what reason you might ask. But in a time, where every password has to be unique for every website and long and secure and it should contain an upper letter and at least 8 characters and don’t forget the number and the special character — you know it — it’s really hard to remember all those passwords. Why not link to a password manager (e.g. 1Password, LastPass, etc.)? Also, typing all those passwords is a pain in the a**.

I moved “Forgot Password?” as a question mark into the password box to save space and because most people know the meaning of the question mark in the password box. The account I’m currently using is shown at the bottom and not at the top, because this overstrains the user’s attention and most people don’t have more than one bank account, especially at one bank. And another subtle change: The button at the bottom now says “Change account” and not “Log in” anymore, because you basically log in with hitting the enter key after entering your password or ideally (in my study) the password manager logs you in automatically. The TouchID icon has been pretty much invisible before, the colors weren’t perfect and the fingerprint was hard to see. Actually, I wanted a pink fingerprint, the one that’s used in the pop-up, but then it would have been as undiscoverable as before.

The biggest change here is pretty obvious: The background. It’s not that I didn’t like the endlessly looped GIF of a lake in front of a mountain — it’s really calming, but for me it’s not as appealing as the rest of the product/brand/bank. It is designed for the youth and therefore it should feature something beautiful, exciting but especially something wild and independent, without changing the subject too much. As if previous reasons haven’t been enough, what was the most annoying thing about the GIF or video, whatsoever: I don’t know why, but sometimes it took up to 5 seconds until it was fully loaded. Sometimes the background was gray, sometimes it didn’t start playing immediately. Maybe this happened because of a bad internet connection or because of the file size. Now, as a picture, everything should be fine.

A lot has changed here. Let’s begin at the upper right corner. A share extension icon — for what reason you might ask. But in a time, where every password has to be unique for every website and long and secure and it should contain an upper letter and at least 8 characters and don’t forget the number and the special character — you know it — it’s really hard to remember all those passwords. Why not link to a password manager (e.g. 1Password, LastPass, etc.)? Also, typing all those passwords is a pain in the a**.

I moved “Forgot Password?” as a question mark into the password box to save space and because most people know the meaning of the question mark in the password box. The account I’m currently using is shown at the bottom and not at the top, because this overstrains the user’s attention and most people don’t have more than one bank account, especially at one bank. And another subtle change: The button at the bottom now says “Change account” and not “Log in” anymore, because you basically log in with hitting the enter key after entering your password or ideally (in my study) the password manager logs you in automatically. The TouchID icon has been pretty much invisible before, the colors weren’t perfect and the fingerprint was hard to see. Actually, I wanted a pink fingerprint, the one that’s used in the pop-up, but then it would have been as undiscoverable as before.

The biggest change here is pretty obvious: The background. It’s not that I didn’t like the endlessly looped GIF of a lake in front of a mountain — it’s really calming, but for me it’s not as appealing as the rest of the product/brand/bank. It is designed for the youth and therefore it should feature something beautiful, exciting but especially something wild and independent, without changing the subject too much. As if previous reasons haven’t been enough, what was the most annoying thing about the GIF or video, whatsoever: I don’t know why, but sometimes it took up to 5 seconds until it was fully loaded. Sometimes the background was gray, sometimes it didn’t start playing immediately. Maybe this happened because of a bad internet connection or because of the file size. Now, as a picture, everything should be fine.

Statistics

Statistics

n26-statistics

Actually not too much has been changed here. Statistics can be shown for month only for the current year and the months can be chosen by the downside arrow next to the month. This was rather a personal decision, because I don’t really want to know where my money went in January 2016. Maybe I want to compare the current month to the last one, so I thought statistics for just one year should be fine.

Next up: Expenses and Income. This has been moved to the top, so it’s immediately visible. You can change the view either by swiping or tapping; previously there have been difficulties with knowing how to change the view and also, below the pie chart in a tiny font I wouldn’t wonder if most people didn’t find it.

Actually not too much has been changed here. Statistics can be shown for month only for the current year and the months can be chosen by the downside arrow next to the month. This was rather a personal decision, because I don’t really want to know where my money went in January 2016. Maybe I want to compare the current month to the last one, so I thought statistics for just one year should be fine.

Next up: Expenses and Income. This has been moved to the top, so it’s immediately visible. You can change the view either by swiping or tapping; previously there have been difficulties with knowing how to change the view and also, below the pie chart in a tiny font I wouldn’t wonder if most people didn’t find it.

n26-dark-green

Dark Green for current selection

Dark Green for current selection

n26-light-green

Light Green for unselected content

Light Green for unselected content

Two other small tweaks: Firstly, the color of “Total Spent” is now the same as the indicator for the current selection. These colors were chosen to match the data, but also to achieve as little distraction as possible in both views. Secondly, monthly average is shown, not 4 month average.

Two other small tweaks: Firstly, the color of “Total Spent” is now the same as the indicator for the current selection. These colors were chosen to match the data, but also to achieve as little distraction as possible in both views. Secondly, monthly average is shown, not 4 month average.

Cash Map

Cash Map

n26-cash-map

Yes, the map itself changed too. It’s now using Google Maps as data service and now, you aren’t only able to see ATMs around your current location, but you can search for specific locations, where you want to see the ATMs. There’s a blue arrow in the search bar for your current location and next to it, there are filters for showing specific or all ATMs. This has moved into the address bar, so the user has an unrestricted view at the map without getting distracted.

Yes, the map itself changed too. It’s now using Google Maps as data service and now, you aren’t only able to see ATMs around your current location, but you can search for specific locations, where you want to see the ATMs. There’s a blue arrow in the search bar for your current location and next to it, there are filters for showing specific or all ATMs. This has moved into the address bar, so the user has an unrestricted view at the map without getting distracted.

Settings

Settings

n26-settings

Re-designing settings was the hardest part for me. The original screen already had more features than needed and the layout was quite good, but here are my thoughts:

Card details

There’s no need for 2 different screens that show — more or less — the same information. If I lose my card, I want to lock it as quick as possible, so I put it directly on the top of the settings screen. There’s all the features you need:

  • Lock your card
  • Change your pin
  • Card number & expiration date
  • Share your IBAN via the share extension (Email, iMessage, WhatsApp, etc.)

The decision to hide IBAN and SWIFT was a personal one — again. Most of the time I don’t need to know these numbers, because I never have to type them in somewhere. If someone wants to send me money, I’m going to send him my bank details before, so he doesn’t need to write them down (who still does that nowadays?). And with an option like MoneyBeam, there’s basically no need to share your bank details at all, because you can easily request money via email or messages.

Colors & Icons

The bottom of the card is in the bank colors now and the log out button too. Previously it was red and only the stroke was highlighted, so it didn’t catch the eye of the user immediately. Given that red is already used for expenses and therefore isn’t the color, that makes the user the happiest, I’ve changed it to the brand’s turquoise to match the rest. The “General Settings” icon features a slightly different person to make it more appealing to people.

I tried to keep it to the minimum of features, only the real important ones should be visible on a first glance.

Re-designing settings was the hardest part for me. The original screen already had more features than needed and the layout was quite good, but here are my thoughts:

Card details

There’s no need for 2 different screens that show — more or less — the same information. If I lose my card, I want to lock it as quick as possible, so I put it directly on the top of the settings screen. There’s all the features you need:

  • Lock your card
  • Change your pin
  • Card number & expiration date
  • Share your IBAN via the share extension (Email, iMessage, WhatsApp, etc.)

The decision to hide IBAN and SWIFT was a personal one — again. Most of the time I don’t need to know these numbers, because I never have to type them in somewhere. If someone wants to send me money, I’m going to send him my bank details before, so he doesn’t need to write them down (who still does that nowadays?). And with an option like MoneyBeam, there’s basically no need to share your bank details at all, because you can easily request money via email or messages.

Colors & Icons

The bottom of the card is in the bank colors now and the log out button too. Previously it was red and only the stroke was highlighted, so it didn’t catch the eye of the user immediately. Given that red is already used for expenses and therefore isn’t the color, that makes the user the happiest, I’ve changed it to the brand’s turquoise to match the rest. The “General Settings” icon features a slightly different person to make it more appealing to people.

I tried to keep it to the minimum of features, only the real important ones should be visible on a first glance.

Re-designing settings was the hardest part for me. The original screen already had more features than needed and the layout was quite good, but here are my thoughts:

Card details

There’s no need for 2 different screens that show — more or less — the same information. If I lose my card, I want to lock it as quick as possible, so I put it directly on the top of the settings screen. There’s all the features you need:

  • Lock your card
  • Change your pin
  • Card number & expiration date
  • Share your IBAN via the share extension (Email, iMessage, WhatsApp, etc.)

The decision to hide IBAN and SWIFT was a personal one — again. Most of the time I don’t need to know these numbers, because I never have to type them in somewhere. If someone wants to send me money, I’m going to send him my bank details before, so he doesn’t need to write them down (who still does that nowadays?). And with an option like MoneyBeam, there’s basically no need to share your bank details at all, because you can easily request money via email or messages.

Colors & Icons

The bottom of the card is in the bank colors now and the log out button too. Previously it was red and only the stroke was highlighted, so it didn’t catch the eye of the user immediately. Given that red is already used for expenses and therefore isn’t the color, that makes the user the happiest, I’ve changed it to the brand’s turquoise to match the rest. The “General Settings” icon features a slightly different person to make it more appealing to people.

I tried to keep it to the minimum of features, only the real important ones should be visible on a first glance.

Conclusion

Conclusion

As I’ve said before, the app is basically really good, it makes banking feel comfortable and easy. But there were some things, that I didn’t have the best experience with in day to day usage. I believe my case study features some important points, that could be improved and I also believe, that I presented a few good ideas about how to fix these problems. Some were thought through more carefully than others and there surely are different, maybe better solutions.

As I’ve said before, the app is basically really good, it makes banking feel comfortable and easy. But there were some things, that I didn’t have the best experience with in day to day usage. I believe my case study features some important points, that could be improved and I also believe, that I presented a few good ideas about how to fix these problems. Some were thought through more carefully than others and there surely are different, maybe better solutions.