Banner_edited.png

ADIB

VISUAL DESIGN | UX | PRODUCT DESIGN

Mobile Banking

App Redesign

What is ADIB?

Date

Spring 2021

Role

UI UX Designer,

Product Designer

Tools

Figma, Photoshop

Abu Dhabi Islamic Bank PJSC (ADIB) is an Islamic bank based in Abu Dhabi, United Arab Emirates. The bank is located throughout the Middle East in countries like KSA, Egypt, Qatar, as well as the UK.

ADIB banking app is a clients-only app that allows to manage funds, transfer money, and pay for services.

Current product

Frame 4.png

Current site map

Site map before.png

Problems

Splash screen

Splash screen is clustered with unnecessary tabs that provide no important information and confuse the user

Transfer tabs

The Transfer function is repeated through separate tabs which takes up a lot of space and makes it difficult to navigate.

Live chat

There is no option available for a live chat which makes it difficult for the user to ask necessary questions and seek help.

Solution

ADIB banking app was traditional but required information restructuring, more innovative options like "hide your funds", and the ability to perform certain tasks online without the need to visit the branch.

Initial designs

Site map

We constructed a site map that helps us in understanding ways users can interact with the product, as well as allowing us to see navigation through user goals.

sitemap.png

Paper sketches

Throughout this project, my sketchbook proved invaluable time and time again. Being able to quickly iterate with my sketchbook, I could create and alter ideas with the stroke of a pen. This enabled me to get instant feedback from my peers on marketing and product concepts, allowing me to iterate on concepts rapidly.

87C19517-3E85-4C4C-AE76-FAE03DA4D666_edi
3C3AC400-52A4-4017-BD7A-0CAC87C34B81.jpg
179D0616-E230-4132-A3C8-4D801EEF472F.jpg

Wireframes

wireframe.png

Low-fidelity prototype

After sketching out some wireframes and thinking through the preliminary flow, we reviewed what was necessary, unnecessary, and what areas needed improvement. We poured a lot of our time into this step to make sure we had the finishing touches on the underlying UX before moving onto the visuals.

Visual mockups

After several iterations of the sketches and wireframes, we came up with the final product design. 

mockups_edited.png

Product solution

ADIB mobile app is a completely redesigned app that allows users to effectively manage their funds online.

Splash screen

01

The first screen user sees is a splash screen. We have completely redesigned the screen and made it look less busy with monochrome colors. This allows the user to easily find the next necessary step, whether it is a login option, location finder, or customer support.

Hide your funds

02

It is sometimes absolutely necessary to show your account screen to other people. The "Hide your funds" function allows users to hide the information about their funds' amount.

Live chat

03

In order to help users with the issues, they might be facing, we created a "Live Chat" option. Now users can talk to the bank's representative through the app and solve their problems faster.

mckp.png

Style Guide

We have followed the brand guide and designed the product solution with the original branding in mind. 

Colors

#1E3A68

#4AA4E1

#B6E1FE

#888888

Typography

SF Pro Display.png

27xp 20xp 15xp 13xp

Iconography

icons.png

Takeaways

During the course of creating this project, I learned valuable lessons in content system arrangement and designing for mobile devices.

Understanding the constraints and opportunities offered by mobile app technology helped me frame my design decisions and strategy.

Overall, this project taught me how to design across numerous mobile devices, and develop a product strategy that is aligned with a company's brand image.

MacBook Pro - 1.png