Redesigning the DKB App
Transforming an ancient banking app into a state of the art experience
Choosing a bank institution in Germany was pretty lame back in the days: You could either choose Sparkasse or join the VR-Bank. That was it. Surely there also were some exotic institutions on the market, but not worth mentioning them. Especially in the countryside, they did not play much of a role. Hence almost everyone was having an account with one of the big bulls that made life pretty comfy for them. Nevertheless, that good life started getting harder when digitalization began (Sadly enough some of their employees probably still have not heard of it): Plenty of online-banks entered the pitch and people were no longer forced to choose between the devil and the deep blue sea. I also switched: I got myself an account at the online-bank called “DKB”: They are famous for not charging for the account itself, withdrawing money inter- and nationally or for money transfers. What they, unfortunately, are also well-known for: Their hilariously bad native app (I rate iOS only). Whereat the phrase “native” is an extenuation: It basically only consists of web-views with native elements added (Apple Pay and Face ID). Even worse: The UX/UI of the app was not much changed since going live a view years ago. That induced me to do so: Making this clearly, really, annoying piece of app use- and enjoyable, here we go!
I. Research
Competitors-Analysis
Sparkasse
As already mentioned, the Sparkasse is one of the oldest and biggest banks in Germany. I used to be the account holder and am therefore very familiar with their iOS app which still looks like freshly designed after the finance crash: No whitespace offered, no proper mobile menu (hamburger) and in general pretty hard to interact with. But when forced people get used to everything, right?
N26 - The Mobile Bank
N26 where the first ones in Germany doing, what all old bulls (Sparkasse, VR…) where not even thinking about: Offering a smart, flexible and great working banking app. The UX and UI have been on point ever since. No wonder they have their own in-house Product Department.
Tomorrow - The Sustainable Bank
Jumping in the crazy world of capitalism with the goal to create a sustainable banking app and make the (banking) world a better place? Tomorrow does exactly that and their app works amazing! Only love and hugs for those fellas and their beautiful app. Hopefully, they are aware of the sharks. Check them out and spread some love!
DKB App: Audit Of Current App (iOS)
Three Major Pain Points
Menu
That menu truly is a relict of the good old Webdesign days: Put everything in there, which some stakeholder says is important and do not forget the submenus, the more content the better! No space on mobile? Use hamburger!
Honestly: In over five years of using the app I did not click once on 95% of the menu items. They are totally useless and a waste of everything.
Back-Functionality
What do people do if they want to go back in an app? They swipe back, correct. What happens in the DKB-App if you do so? You open the menu! Did not see that one coming but at the same time it also is as useless as nipples on a breastplate: As the menu, itself is a disaster (see point 1), this feature sucks each time you accidentally open it. Do you now wonder how to get back then?
You can either try to find the back button (which is a text-link) at the bottom of the screen or be brave enough to fight you through the menu.
Overall App Experience
That app just does not feel right. And that totally is because of the web-views literally used everywhere in the app. Can someone put a Volvo-Engine into a Porsche? You can, but it does not feel right. Same with only putting web-views in a native app: That just does not work and people feel that something is wrong there. Let us do the redesign!
II. Redesign
Assumptions
- As I do use the app regularly since years I am average user/target group
- The average user has between two and three bank accounts
- The average user does not care about 95% of the menu-items (mentioned in three major pain points)
- The average user wants to quickly get an overview of all his bank accounts and browse those accounts in detail from time to time
- The average user wants to make payments as easy and fast as possible
- The average user wants to get messages which concern him and his accounts
These assumptions lead to the creation of the tab bar (bye-bye burger, you will not be missed):
- Accounts Overview (Übersicht)
Easily keep an eye on all accounts - Accounts Detail View (Konten)
Get specific information about a specific account - Banking
Transfer money - Mailboxes (Nachrichten)
Never miss a fee-change again - Profile (Profil) - the best of the rest
The best of the rest: Profile-, Account Settings, Legal Stuff, Support…
Accounts Overview
The accounts overview quickly reflects what the average user wants to see first: What is going on at my accounts, is everything alright there? For a detailed look just click on the particular account and get more information right away. Hint: Did you notice that I got rid of the Z-Pattern in that screen (account/transactor left-aligned, amount right-aligned) that you see in almost every banking app? I am not a huge fan of the eye-jumping that needs to be done there and it also causes a higher chance of line-slipping when multiple entries visible. Instead, I aligned everything strongly focused on the left side, which makes readability and grouping much easier for the user. Check hereinafter how great it works with the accounts detail view as well and also take a look at the law of proximity for nerd-level knowledge!
Accounts Detail View
The accounts detail view displays all transactions which have been done on a certain account. Looking for a certain transaction? Use the search. Looking for transactions years ago? Use the filter. More bank accounts? Just swipe the bank-cards to browse between all your accounts. Need detailed information about a transaction? Just click on it and get the transaction detail view which offers you all important information. Hint: No Z-Pattern again!
Banking
As this is a banking app there should be the possibility to do banking somewhere. Here you go. The banking flow is quite a huge one as you have at least four steps and plenty of options to go for. So simplicity is key here: The stepper always tells you where you exactly are within the flow. Different button-states indicate either you are ready to continue or not and plenty of whitespace gives you room to breathe and keep the focus high.
Mailboxes
A mailbox for everything! Actually the total number of mailboxes is a bit confusing but the separation makes sense - assumed you get plenty of mails and want them pre-filtered. Then those different mailboxes have their right to exist even that's a lot.
Profile (The Best Of The Rest)
In this area you can find everything that is still left and was unimportant enough to not make it within Tabs 1 - 4: From changing your personal data like address or phone number to bank-card settings or the help-area. All that stuff is reachable there. A new burger is born!
III. Old vs. New
Takeaways
- Just do it: This case took me one and a half days. Including research, wireframing/sketching (which I do not mention in the article) and writing this medium-article. Obviously it is not ready to go live, but a solid base to start with and iterate on.
- KISS: The use cases in banking-apps are for one pretty identical and for the other quite straight forward. Do not over-engineer too much and steal like an artist!
- User is king: I have a deep understanding for every stakeholder out there which is afraid that his topics are unimportant and so do not make it in an application, but: Kick everything, that adds no value for the user.
Note: As there is no English version of the app, all wordings are german.
