How we redesigned LCL Mes Comptes on Android
We, at Idean France, have been working for many years with LCL, a major French bank. LCL Mes Comptes has more than 500k daily active users on Android and it has been elected best banking app by its clients for the third consecutive year.
In 2019, a brand new design was launched for the website. And in 2020, it was time to redesign the mobile app. It was a big challenge to achieve this graphic migration while still adding new features, not to mention the Covid-19 pandemic that changed our daily life.
This article will focus on how we redesigned the app on Android, providing some tips and tricks.
The first step was to customize the theme, which is the better way to reflect a product’s brand.
It was released in version 4.7.0.
We updated the color palette and removed the custom image background to make the app less disturbing and improve user productivity.
To learn how to customize colors, check out Color Theming.
To learn how to customize typography, check out Typography Theming.
We started to create a design system with a set of components that will be used during the whole graphic migration.
The next step was to update the navigation to better fit current phones with longer screens.
It was released in version 4.8.0.
Bottom navigation bar
In order to improve user experience, we added a bottom navigation bar for top-level navigation, which is more accessible with one hand.
However, we wanted something unique with beautiful animations and transitions which was not possible with the BottomNavigationView, so we ended up creating our own class and built it with the same API.
To learn how to create custom components, check out Custom View Components.
We kept a navigation view for secondary navigation, which is less frequently accessed.
However, we wanted to make it full screen which did not seem possible at first sight. Indeed, there is a hardcoded minimum margin of 64 density-independent pixels in DrawerLayout which prevents the navigation view from being full screen. By applying the same negative margin to the navigation view, we could work around this limitation.
The final step was to update other components.
It started in version 4.10.0 and will be released in version 5.0.0.
We defined primary and secondary button styles with rounded corners that can be applied to any view.
To learn how to customize shapes, see Shape Theming.
We replaced alert dialogs with bottom sheets, which are more accessible with one hand.
Finally, we created custom components for account tiles, credit cards and many more.
It was exciting to work on this graphic migration and we hope you enjoy the result!