Pablo de la Fuente


Sparkasse

UX/UI redesign
08/2024

Sparkasse is one of Germany's leading banks, serving millions of customers daily. However, the current Sparkasse mobile banking app has become outdated, with users expressing frustration over its complex navigation and dated design.

This case study aims to identify the app's key issues and propose a redesign focused on improving the user experience. Our goal is to create a more intuitive and modern app that better meets the needs of Sparkasse's customers.





Current design
As a user of the Sparkasse app, I had noticed a few areas where the user experience could be improved. The app's interface often feels cluttered and overwhelming, making it difficult to find the information users need quickly. Additionally, certain features, such as transferring money or checking account balances, could be streamlined for a more efficient experience. 

My primary goal for redesigning the Sparkasse app is to create a more intuitive and user-friendly interface, and the main improvements I am aiming for are:
  • Simplify the overall navigation and reduce clutter.
  • Improve the visibility and accessibility of key features.
  • Enhance the app's visual appeal.
  • Provide a more personalised and engaging user experience.




User pain points
After having read the reviews on the app stores, we can summarise the main complaints in 4 categories.

Cluttered interface
The app displays irrelevant information when it is not needed, leading to confusion and making it difficult to find information.

Complex navigation
The structure and user flow is too complicated and prioritizes less frequent paths over more important ones, such as money exchange or checking the online post office. 

Poor customer support
When needing urgent help, the app loads a website to show the ‘Service Center’ where both FAQs and emergency assistance coexisting, taking big load times.

Inconsistent visual design
The app doesn’t have a clear design system that is followed everywhere, plus many features are not build natively into the app and load the official website with a different design language. 



Competition analysis
The Sparkasse is a German cluster of savings' banks, owned by the Sparkassen-Finanzgruppe, that operate under one brand and centralized system. More than 10 years ago, with the rise in popularity of online banking, they decided to create their own online banking solution. Fast-forward to 2024, it is now the times of digital and neobanks. These banks offer financial services entirely online, eliminating any physical branches. Therefore, these companies invest more into curating a beautiful and efficient banking experience as a selling point to retain customers.

Sparkasse hasn’t updated its design language in over ten years, and new online banks are catching up in customer acquisition—specially among younger customers. 

We can learn a lot of good practices from these banks, as well as from other legacy banks that have adopted better solutions to the new era of banking. 



Navigation revamp
One of the main challenges with the current design of the app is not being able to find what the user needs quickly. The current user flow is confusing and in many aspects makes no sense. Looking at the current Navigation Bar, fixed in every screen, we can already see what’s wrong. Most of the features are cluttered in the main home screen, leaving the other 3 main screens almost useless.

My redesign focuses on giving each screen its logical features. In the new home screen, the latest transactions are displayed, together with some sending money buttons plus quick access to the service center. Secondly, I’ve renamed the middle screens, from ‘Products’ and ‘Services’ to ‘Finances’ and ‘Discover’. This way there are less redundant and each of the elements are correctly classified: one screen for the user financial products like cards and accounts, and the other for other products the bank offers.
Finally, the user screen has been completely overhauled giving major importance to the inbox, as many of the communications are done though the app now instead of by traditional post. 




Typography & Palette
The company has a strong brand personality, and it’s really well known in Germany, specially thanks to its iconic red color. I decided to stick with it and expand it in a couple of shades to have more room for accents. Besides, black and white are going to be an important part of the whole UI to achieve good contrast and legibility.

On the other hand, the current typography is a custom typeface called Sparkasse SG. Although it is not bad, it is antiquated and gives off an outdated vibe. I thought about swapping it for the typeface Sora, which is similar to the old one, but has a more modern and up-to-date character. 



Design system
One of the biggest UI problems was the incositency of the dseign system



⚠️ Work in progress...


Thanks for watching



Back to home

Pablo de la Fuente © 2024