BLC bank is one of the oldest banks in Lebanon offering banking, insurance and asset management services. It is part of the Fransabank group, the fourth largest financial institution in Lebanon, and operates a network of over 50 branches across Lebanon.
What was done: Omnichannel design.
Softwares used: Sketch, Illustrator.
Project done at Johnson Luke
Check BLC bank’s website here
A concept delegated to provide smooth and consistent journeys among all banking processes.
To keep consistency and familiarity within the banking processes and across the different channels,we created one journey for all processes a user can perform on the apps.
We called it ‘The Process Journey’.
It starts when a user initiates a banking process (whether money transfer, cheque-book request or mobile recharge, etc.),and before verification and confirmation, the user passes through a journey of different screens having one unified template (the process template).
The process template is where the user inputs data (ex: transfer amount), and it presents only one task input per screen.This maintains clarity and focus, and caters for a wider range of users, especially those with less technological literacy.
The structure of our UI design follows the atomic methodology in which UI components are embedded within each-other where patterns are created to form templates and pages.
The atomic design starts with atoms; the foundational building blocks such as type, labels, colors and spacing.Those get together to form molecules; those are simple elements used on the interface such as lists, bars, form-elements, etc.
The organisms are sets of atoms and molecules combined to form more complex modules, those are bars, lists, cards, etc. that establish the different templates when getting in context. Pages are specific instances of templates.
After conceptualizing our project, we went into sprints of layout-structuring and wire-framing.
To build a consistent UI library, we worked on all channels in an interviewed manner.
After we aligned our team around a clear set of shared goals and vision, we started building a holistic design library that identifies the brand principles and unifies its digital identity. The library ensured us to use the right combinations of UI components and patterns in a logical and consistent way, across all the channels.
When approaching the design we wanted to make sure that legibility led the endeavor.A light gray background with darker text helped keep the design easy on the eyes.We used pops of vibrant red to call attention to important areas of the interface like the primary navigation and various calls to action.
An appealing and effective design is in maintaining complete harmony. To achieve this, we used Fibonacci sequence “The Golden Ratio” to distribute – even the smallest of design elements – on the page, which elevates and brings balance to our designs.
When approaching the design we wanted to make sure that legibility led the endeavor.A light gray background with darker text helped keep the design easy on the eyes.We used pops of vibrant red to call attention to important areas of the interface like the primary navigation and various calls to action.
As we approached our final designs, we created a testable prototype and did successive user-testing with some iterations, but each iteration was well worth the time.
After designing all screens and pages, we linked them all together into a high-fidelity, fully-interactive prototype so we can test and validate them.We made sure to add resizing configurations on all our sketch design components so they can be previewed and tested on different screen sizes.
We applied user-tests to the main journeys on the different channels. Our responsive prototype allowed us to test the mobile app on smallest screen available in the market to ensure no faults.For the ATM, we had to make sure it caters to all people, especially the elderly, so we went to one of BLC branches and did on-site tests to real clients to make sure their journey was smooth enough.
We made sure to deliver our product with full documentation, easily understandable by developers and designers.
To ensure faultless collaboration with front-end developers, we made sure to add all attributes and apply needed specifications to our sketch designs to become Zeplin ready. We gave them a well-organized Zeplin project with all symbols, templates and pages a developer needs.
We built a complete design system that serves as a single source of truth for all teams involved. It identifies the interface design principles and provides building instructions on colors, fonts, spaces, shapes, icons, illustrations, UI components, modules, templates, micro-interactions and transition effects.
Rayan Bou Hamdan
UX/UI Designer
International Seabed Authority, Jamaica