Ideas by Idean
Published in

Ideas by Idean

How we redesigned LCL Mes Comptes on Android

Illustration from idean.com

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.

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.

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.

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.

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!

--

--

--

A collaborative collection of stories and musings from us, a global design studio

Recommended from Medium

How to write my first Java Program

5 Python Projects for Engineering Students

What’s new in Nexus Wallet v2.2.0?

Introducing NATS support in Kubeless

THE TOP 5 REASONS WHY YOU SHOULD USE JAVA FOR YOUR NEXT FINTECH PROJECT

Temple wallet for the ByteBlock NFT Marketplace as a Web Extension for your Browser.

Debugging Challenge #3

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kamal Faraj

Kamal Faraj

Software Engineering Manager at frog France

More from Medium

How to maintain Android code test coverage

Snapshot Testing in Android app using Shot library

Kotlin Data Store On A Different Activity

Language Change Programmatically in Kotlin, Grow Your Apps Audience Using Localization…