Fintech and future banking

Design of an end-to-end mobile responsive app for First Abu Dhabi Bank for "instant banking", including products as auto loans, personal loans and credit cards. (Jun 2019-Mar 2020)

The problem

Created an inventory of existing styles on the current website, including the landing page and unique pages. We then compared these findings to prioritize design inconsistencies.

The challenge

Create an effective and intuitive way for current customers to apply to a ready-to-use banking product (Personal loans, auto loans and credit cards)

The team

Isa Gouverneur - UX Lead

Ramiro Guevara - Senior UX/UI Designer

Claudia Mauro - Senior UX/UI Designer

Eloisa Rodriguez - UX/UI Designer 

Onaizha Panwar - Project Manager 

Derivables

  • Benchmark and Competitive Analysis

  • Road Mapping

  • Sketches and wireframes

  • Usability testing  

  • Hi-Fi wireframes

  • Prototype

Overview & research

Create an MVP "Blue Sky journey" that would allow the following:

  • Onboarding and customization of a digital product for existing bank users

  • Meet KYC, credit and legal current bank criteria

  • Technology implementation of the OCR system and "UAE Pass" 

  • Native application and mobile responsive journeys

To start our research, we identified competitors and divided the investigation into the following areas: 

  • North America Banks and startups that are implementing digital banking 

  • Europe (All these areas had to cover personal and auto loans for online banking simultaneously)

  • UAE Banking direct competitors

Draft of roadmap

Benchmark and competitive analysis

Insights:

  • Most competitors lack instant loan options (auto and personal)

  • American banks tend to excel in technology practices, data visualization and FinTech 

  • Competitors from Middle East banks tend not to have a customer-centric digital experience 

  • All competitors have included some type of banking benefits/rewards through their digital banking products

Snippets of research repository

Wireframes

Blue Sky Journey

After defining the steps for the user and the flow. We lay out the wireframes in a "main or master file" that would be mirrored on Personal loans, auto loans and credit cards.

Proceed to onboard the client by asking questions regarding to user’s preferences and user ID and password if they have an existing account.

Technology recognition: The interface would be able to recognize if it is available to access through UAE Pass, NFC (near-field communication) and OCR (optical character recognition)

First option: would allow the user to be approved right away by meeting the back-end criteria, and also would be able to bridge with the FAB app and access instant funds or a credit card

Second option: The User would sign the customer declaration. In order to access funds, it would be required to schedule an interview at a FAB facility

High fidelity screens

I was responsible for:

  • Selection of imagery and design style guide

  • Design client decks 

  • Peach to the stakeholders the proposals made through remote work. This allowed me to be the bridge between my team, the project manager, and the bank product owners.

  • Communicate feedback to team members and implementation

Onboard the client: questions regarding to user’s preferences and user ID and password

Product offers and lead generation

Product offers: Lead generation

Product offerings

Usability testing

In order to capture the users’ feedback, we did A/B usability testing on the credit cards journey and provided 3 different sets of technologies and endings. I was responsible for putting together the prototype on InVision.

We partnered with a digital lab that also provided us insights on eye ball tracking, heat maps. We had 12 participants 

User testing insights

  • The hamburger menu icon was difficult to understand, which made it difficult to navigate through the journey

  • NFC icon was not self-explanatory

  • Personalization of a digital credit card seems attractive for most users

  • Multiple tabs for the documentation section were confusing

Final thoughts

Key Learnings

Next steps

  • Working in the field with service operators, along with user data from research, interviews, and testing, provided invaluable input and ongoing feedback that helped us craft, then iterate on an experience that not only delivered on core business needs but also excited users!

  • With streamlining communication being a main goal of the project, the team, client, and stakeholders having an open and transparent dialogue during the planning and discovery phase was critical to the development of clear objectives and a realistic timeline for the project.

  • Development Handoff: Package and continue to collaborate

  • ​Research: Dive deeper into competitors, various technologies, ethnographic research, and more usability testing

  • Hi-Fi Prototype: Flush out more functions, microinteractions, and mini-animations

Go back home :)