How we redesigned LCL Mes Comptes on Android
We, at Idean, 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.
Q1: Theme
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.
Colors
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.
Typography
We replaced Roboto and Fjalla One with Montserrat. Since these fonts have different properties, it was necessary to adjust text sizes so we defined and used standard text styles.
Thanks to AndroidX, we also switched from the legacy Calligraphy to use Fonts in XML.
To learn how to customize typography, check out Typography Theming.
Design System
We started to create a design system with a set of components that will be used during the whole graphic migration.
To collaborate between designers and developers, we used zeroheight to share these components and InVision to share prototypes. It incredibly increased the whole team productivity and happiness.
Q2: Navigation
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 animate each item, we used Lottie which provides advanced animations based on JSON files and to animate between each item, we directly used the Canvas to draw a curve with a custom Path.
To learn how to create custom components, check out Custom View Components.
Navigation view
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.
Q3: Components
The final step was to update other components.
It started in version 4.10.0 and will be released in version 5.0.0.
Buttons
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.
Bottom sheets
We replaced alert dialogs with bottom sheets, which are more accessible with one hand.
To make it simple and straightforward, we created our own class which inherits the BottomSheetDialogFragment and we built it with the same API as the AlertDialog.
Custom components
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!
