Dubai First

Dubai First

Role 
UX Design Director

Responsibilities
・Design Team Leadership
・Strategy
・Product Roadmap
・Design System
・User Experience
・User Interface

Dubai First is a credit card and consumer finance company which was acquired by First Abu Dhabi Bank. The initial project is to revamp its mobile app.

The goal was to create a new experience for Dubai First customers with new features, better performance, and experience.

I joined this project as UX Design Director and my role implied collaboration and alignment with business, development, and design. Also, I did quite some hands-on work, setting up the Design Language System, working on processes, roadmap and UI, while looking into having a successful on-time product release.

What we encountered

When my team and I took over the project we encountered an app that had a lot of work to be done.

Dubai-First-Old-App-1
Dubai-First-Old-App-2
Dubai-First-Old-App-3
Dubai-First-Old-App-4

Understanding the users

The research was conducted, to find which features would interest users more. On it, the interviewees were given various options of features that may be implemented in the future but needed prioritization. Interviewees had to choose how much they would pay for each of them, which one they saw using more and why.

Dubai-First-research

Creating a Design System

One of the first things we decided to work on was the design system for Dubai First (DF). Having a robust design system would allow us to work faster and have consistency across all DF's products. Also, this will help us to reuse elements when moving to other projects across First Abu Dhabi Bank (FAB), as there are similarities between their products.

Buttons
Forms
Credit Cards
iPhone-6-Credit-Card-Analytics

A simple yet powerful app to use

Taking into consideration the research done and the objectives of the business side of Dubai First, we focused on the app's features that both the customers felt they were more important and that also made sense for the business.

Login
Home – Multiple Cards
Home – Scrolled
Categories Dialog
Transaction – Detail (Map)
Split Bill – 2 Selected
Cards
Credit Limit Increase
Apply for Credit Card
Spendings – Monthly
More – Help
ATM & Branch locator – Info

Not your typical banking app

One of the objectives for the design team was to keep the corporate image of Dubai First while giving it a more modern look.
Through the usage of illustrations, we inform the user and create a unique design style that would be incorporated in the Dubai First brand language.

Illustration – Nothing here yet
Illustration – Address changed
Illustration – Address not changed
Illustration – Card delivery
Illustration – Split reminder sent
Illustration – Split reminder not sent

Going into desktop and tablets

After we worked on the mobile version, we moved into the desktop and tablet version. Because of time constraints, I decided our approach would be to have a first version based on the mobile app. That meant expanding the designs to a 720px size (iPad on portrait mode), having some elements on 480px and other ones as full screen. The features would be the same as the ones in the mobile app and will expand in the future.

Transactions
Transactions – Filters
Transaction – Detail (Map)
Cards – Default position
Split Bill

Expanding the scope

Using the work done for Dubai First, both the UI of the mobile app and the Dubai First Design Language System, we made a proposal to revamp the UI of the King Saudi Arabia app.

It was quite easy to adapt the elements to the other app as it has similar functionalities and UI.

Home – Scrolled

Dubai First app

Home – Light Theme

KSA app, light theme

Home- Dark theme

KSA app, dark theme

Home – Dark and Light Theme

KSA app, light & dark theme

Isaac Vigil © 2020