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
Current site map
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.
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.
Wireframes
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.
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.
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
27xp 20xp 15xp 13xp
Iconography
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.
