How we redesigned LCL Mes Comptes on Android

Kamal Faraj
Ideas by Idean
Published in
4 min readOct 28, 2020


Illustration from

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.


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.


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.

Colors and typography before (left) and after (right)

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.

Top-level navigation before (left) and after (right)

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.

Secondary navigation before (left) and after (right)

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.


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.

Buttons before (left) and after (right)

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.

Errors before (left) and after (right)

Custom components

Finally, we created custom components for account tiles, credit cards and many more.

Credit cards before (left) and after (right)

It was exciting to work on this graphic migration and we hope you enjoy the result!



Kamal Faraj
Ideas by Idean

Software Engineering Manager at frog