THE CLIENT
First Abu Dhabi Bank (FAB) is one of the largest banks in the UAE and the biggest client for VML Tech and Commerce in the region.
It offers a wide range of financial products including credit cards, loans, and investment services - each tailored to different customer segments. The website is a key acquisition channel, allowing users to explore products, compare benefits, and apply online.
OUR ROLE
Our team uses research and design to optimise the most critical acquisition journeys on the website and improve how 4 million customers find, assess, and apply for financial products.
AT A GLANCE
Research &
Customer Insight
Multi-method research surrounding customer behaviour in relation to 6 banking products.
Revamp of
High-Value Pages
Introduced advanced filtering to the credit card overview page, driving a 66% increase in applications.
Advocacy for
AI Workflows
Introduced AI-powered prototyping to speed up exploration and improve developer alignment.
Design System Audit
& Optimisation
Audited and redesigned 100+ components to improve usability, scalability, and flexibility.
Designing Complex
Financial Tools
Optimised/designed loan calculators, navigation, and financial tools using iterative processes.
AI Assistant
Experience Design
Designed conversational flows, edge cases, and messaging for an AI product discovery chatbot.
AT A GLANCE
Research &
Customer Insight
Multi-method research surrounding customer behaviour in relation to 6 banking products.
Revamp of
High-Value Pages
Introduced filtering to the credit card overview page, driving a 66% increase in applications.
Introduced advanced filtering to the credit card overview page, driving a 66% increase in applications.
Advocacy for
AI Workflows
Introduced AI-powered prototyping to speed up exploration and improve developer alignment.
Design System Audit
& Optimisation
Audited and redesigned 100+ components to improve usability, scalability, and flexibility.
Designing Complex
Financial Tools
Optimised/designed loan calculators, navigation, and financial tools using iterative processes.
AI Assistant
Experience Design
Designed conversational flows, edge cases, and messaging for an AI product discovery chatbot.
AT A GLANCE
Research &
Customer Insight
Multi-method research surrounding customer behaviour in relation to 6 banking products.
Revamp of
High-Value Pages
Introduced advanced filtering to the credit card overview page, driving a 66% increase in applications.
Advocacy for
AI Workflows
Introduced AI-powered prototyping to speed up exploration and improve developer alignment.
Design System Audit
& Optimisation
Audited and redesigned 100+ components to improve usability, scalability, and flexibility.
Designing Complex
Financial Tools
Optimised/designed loan calculators, navigation, and financial tools using iterative processes.
AI Assistant
Experience Design
Designed conversational flows, edge cases, and messaging for an AI product discovery chatbot.
CHALLENGE
As FAB's credit card portfolio expanded, so did the range of choices available to customers online. Recognising that more options can increase decision complexity, we saw an opportunity to get ahead of potential friction - ensuring the experience scaled alongside the product offering.
As FAB's credit card portfolio expanded, so did the range of choices available to customers online. Recognising that more options can increase decision complexity, we saw an opportunity to get ahead of potential friction - ensuring the experience scaled alongside the product offering.
CHALLENGE
As FAB's credit card portfolio expanded, so did the range of choices available to customers online. Recognising that more options can increase decision complexity, we saw an opportunity to get ahead of potential friction - ensuring the experience scaled alongside the product offering.
PHASE 1 - UNDERSTANDING CUSTOMER BEHAVIOUR
PHASE 1 - UNDERSTANDING CUSTOMER BEHAVIOUR
RESEARCH GOAL
Understand how users evaluate credit cards in a high-choice environment, and use emergent insights identify opportunities to reduce decision friction and increase application starts.
RESEARCH METHODOLOGY
We conducted mixed-methods research.
We conducted mixed-methods research, combining behavioural analytics with qualitative research, to understand both what users were doing and why they were doing it :
Research sessions were conducted by the Senior UX Researcher, while I led note-taking. Analysis, and synthesis was a collaborative effort. I was the primary author of recommendations.
To analyse behaviour across the credit card journey and set a foundation for building a discussion guide and support or challenge initial assumptions.
Google Analytics +
Microsoft Clarity Data Review
To analyse behaviour across the credit card journey and set a foundation for building a discussion guide.
To analyse behaviour across the credit card journey and set a foundation for building a discussion guide and support or challenge initial assumptions.
5 In-Depth Interviews with Elite Customers (earning a monthly income >AED50,000)
To gain deeper insight into customer decision-making.
To gain deeper insight into decision-making.
Why Elite first?
Since they were eligible for the full card portfolio, they offered the richest view of how customers navigate a high-choice environment and were the best starting point to identify initial patterns and preferences.
Elite customers were harder to recruit at scale and wouldn't be accessible through a survey.
100 Survey Responses from Mass Customers (earning a monthly income >AED5,000)
To validate whether the behavioural patterns observed in Elite interviews applied to mass customers while ensuring broader representation across the many sub-segments within this group.
Note: Elite and Mass broadly reflect how FAB structures its customer base. While there are many sub-segments within each group, and audience definition work is ongoing, this framing was the most practical lens for this research.
Note: Elite and Mass broadly reflect how FAB structures its customer base. While there are many sub-segments within each group, and audience definition work is ongoing, this framing was the most practical lens for this research.
KEY INSIGHTS
Customers initially default to their existing bank during discovery, but loyalty breaks when value is superior elsewhere.
Customers initially default to their existing bank during discovery, but loyalty breaks when value is superior elsewhere.
MOTIVATION
"I already salary transfer to the same bank so it made sense [to get a card from the same bank]."
BEHAVIOUR
"There is a good ones on the market. So, like, if the banks is offering. I'm like,
okay. Go ahead.”
"There is a good ones on the market. So, like, if the banks is offering. I'm like, okay. Go ahead.”
PAIN POINT
”But recently, I'm not happy with the, ADIB…in last two months, I'm trying to get a value. So, I want to check more the benefits of the value.”
Early discovery is increasingly AI-driven for quick and criteria-based decision-making.
MOTIVATION
"I need a clear view and understanding of the cards available on the market"
BEHAVIOUR
”I told ChatGPT that my bank is charging me an annual fees for my
credit card. So I'm looking for, free for life credit card that still give me the benefits of the cashback."
PAIN POINT
”I need the online application to ask
me "What do you need?". Like an AI embedded in it."
”I need the online application to ask me "What do you need?". Like an AI embedded in it."
Early discovery is increasingly AI-driven for quick and criteria-based decision-making.
Participants estimate value themselves through mental calculations of gains vs. costs.
MOTIVATION
"If there were more benefits, way more than the value of the annual fee then I would be willing to pay it."
BEHAVIOUR
"Per month, I am spending for electric, for water, for school. So you can say from 15 to 20 thousand. If I'm not getting good cashback from that, it's unfair."
PAIN POINT
"You're giving me a cashback credit card. I barely get around 600 dirham a year. And then you are giving me 600 dirham annual fees. So what's the point?"
Participants estimate value themselves through mental calculations of gains vs. costs.
PHASE 2 - OPPORTUNITY SELECTION AND ALIGNMENT
PHASE 2 - OPPORTUNITY SELECTION AND ALIGNMENT
OPPORTUNITY EXPLORATION
Research insights highlighted an opportunity to shift from a static comparison experience to a more supportive, decision-making experience.
Research revealed a need to move beyond just static comparison and better support customer decision-making.
Specifically, I identified opportunities to:
Enhance filtering to help customers quickly identify relevant options
Explore AI-assisted discovery to enable more personalised exploration
Introduce interactive tools, such as calculators, to support clearer value estimation
SOLUTION SELECTION
Filtering was already in progress, and AI-assisted discovery was on the roadmap so both were being handled and it was great to show stakeholders that existing projects were validated by research.
Calculators, however, were unowned.
Filtering was already in progress, and AI-assisted discovery was on the roadmap so both were being handled and it was great to show stakeholders that existing projects were validated by research.
Calculators, however, were unowned. Research showed customers were already doing mental value calculations themselves, and the reward table - FAB's closest equivalent - was causing misunderstanding. This made the calculator the right problem for me to own and solve.
BENCHMARKING
Other banks in the region were already implementing calculators for value estimation.
To understand how other financial institutions communicate reward value, I reviewed calculators from several regional banks including HSBC, Liv Bank, Emirates Islamic, and ADCB.
-
All calculators for other banks had inputs for customers to enter their spending within certain categories on one side.
-
Input complexity varied, ranging from simple total spending inputs to detailed category-based breakdowns.
-
On the other side, all calculators had some presentation of rewards or cashback that aligned with their respective loyalty programs.
EVALUATIVE RESEARCH
Before proposing any solutions, I conducted evaluative research with the closest thing we had to support customers in estimating credit card value for our highest performing card.
For the calculators specifically, I wanted to get an idea of how customers currently interpret reward information on the website to validate/challenge the need for our recommendation.
The FAB cashback card is the highest-performing card in the portfolio and the reward structure most commonly held by existing customers. Starting here meant we could validate the calculator concept on the most familiar, highest-traffic product first - giving us a proven foundation before extending the approach to co-branded cards with more complex reward mechanics.
Participants were shown the reward table used on the cashback page (as shown above) and asked to explain the benefits they believed they would receive.
RESULTS
Reward mechanics were misunderstood.
-
Many participants assumed they would receive both cashback and FAB Rewards simultaneously, even when the card structure involved receiving FAB Rewards exclusively with the option of converting to cashback.
-
Some participants also required clarification of percentage values (for eg. customers receive 0.15% for select categories but participants though it was an additional 0.15% cashback)
Reward tables created cognitive friction.
-
Some participants wanted to know how rewards could be converted into other benefits and what they were
-
One participant wanted to know what 'select categories' were without having to access detailed terms
-
Another participant, who was currently in the market for a credit card and well-versed with the landscape suggested a calculator similar to what they had seen on another bank's website.
STAKEHOLDER ALIGNMENT
The findings and concept directions were presented to stakeholders.
The idea of introducing a reward calculator resonated strongly as it would create both customer and business impact.
STRUCTURING THE EXPERIENCE
Based on the patterns from benchmarking, the calculator was designed with two primary areas: inputs and results side-by-side for immediate feedback.
CALCULATOR INPUTS
As part of earlier design system optimisation work, I had already refined input components at the atomic level and was able to reuse these proven input patterns.
During the input field redesign, we conducted usability testing on loan calculators that were already live on the website. Insights from this work informed how users prefer to enter and adjust financial values. The testing showed that:
-
text inputs were the primary method for entering values
-
sliders helped users explore ranges
-
mobile required additional +/- controls for precise input
INTERACTION CONSIDERATIONS - COMPONENT DESIGN
Several interaction details were considered during that process to improve usability and accessibility.
Touch Target Optimisation
To ensure comfortability on mobile devices, the grip area expands when pressed, increasing the touch target size in line with NN/g guidelines.
Accessible Contrast Standards
Contrast levels were carefully defined for interactive elements such as sliders and +/- controls to meet WCAG accessibility standards.
Natural Value Increments
Increment values were defined carefully so that spending adjustments felt natural and aligned with typical spending ranges.
Supporting Continuous Feedback
When the input list becomes long, the results panel remains sticky to the bottom of the screen, ensuring users can see it as they scroll.
Contextual Tooltips
An option to add tooltips was built into the component to provide contextual explanations when necessary.
Contextual Tooltips
An option to add tooltips was built into the component to provide contextual explanations when necessary.
FINAL INPUTS
Here's how the inputs show up in context. Although the number of inputs was high, I deliberately retained them because customers emphasised transparency during the evaluative research phase.
CALCULATOR RESULTS
The results section was designed to translate complex reward mechanics into a clear and actionable estimate of value.
Version 1
FAB Rewards Earned
Calculates the total monthly FAB Rewards based on the user’s spending inputs and the card’s reward rules.
Cashback Value Conversion
Rewards are converted into their equivalent cashback value, helping customers understand the real monetary benefit without needing to interpret reward conversion rates.
Primary Conversion CTA
An Apply Now button allows customers to immediately begin the web application journey after seeing their estimated value.
Secondary CTA
A Discover Other Redemption Options button encourages users to explore the broader rewards ecosystem.
Transparency & Compliance
Indicative calculation notes and terms ensure clarity around reward caps and redemption conditions.
Version 2
A second iteration, post internal discussions and a design critique, introduced an additional layer to help customers understand the card value relative to its annual fee.
Net Value Calculation
Estimated rewards are compared against the card’s annual fee to show the net benefit customers could receive.
Conditional Messaging
Dynamic copy adjusts depending on whether the estimated rewards exceed the annual fee, helping set realistic expectations.
CTA Copy Change
As suggested by our copywriter, changed to action-oriented, phrasing that better guides users toward next steps in line with conversion psychology.
ADDITIONAL CONSIDERATIONS
Colour-Coded Conditional Messaging
-
When rewards exceed the annual fee, messaging highlights the potential value customers could receive from the card.
-
If rewards fall below the fee, supporting copy reminds customers that additional benefits (lounge access, discounts, etc.) may still offset the cost.
Sticky Bottom Bar for Mobile
-
The bar is short and saves screen real estate.
-
It only appears once interaction begins (through sliders or text inputs), ensuring the interface remains uncluttered for customers who do not want to engage.
-
Customers quickly understand financial impact without having to scroll to results.
PHASE 4 - TESTING AND ITERATION
FIGMA MAKE PROTOTYPING
AI-assisted prototyping supported early testing, client validation, and development readiness.
-
Early validation and testing using a near-final design would enable quick iteration based on observed friction rather than assumptions
-
Micro-interactions (sticky bars, smooth sliders, feedback states) could be visualised early to assess usability and comfort
-
Mobile flows could be put directly in clients’ hands during stakeholder meetings, reflecting real usage (70%+ of users engage on mobile)
-
Clearer interactions would support a smoother development handoff and give more control to our design team to design our expectations
GUERILLA TESTING
Guerrilla usability testing was conducted with 10 participants - a mix of FAB customers and non-customers, with varied financial literacy - to identify friction points before further playbacks and development handoff. A funded usability study is planned post-launch.
KEY IMPROVEMENTS FROM TESTING
Preventing misleading reward perception
Entering large spending values in low-reward categories made the card appear less valuable. During testing, some users entered high rent amounts (AED 9,000–10,000). Because rent earned only 0.15% cashback, it overshadowed higher-reward categories and reduced the perceived value of the card.
Rent was removed not because it doesn't earn rewards, but because entering large rent values at the base cashback rate (0.15%) created a distorted overall picture — underweighting the categories where the card genuinely performs. Customers already earning cashback on rent through their existing card would see that separately; this calculator was designed to highlight where FAB's card adds incremental value.
Change: Low-reward categories were removed from the calculator inputs to still keep the results meaningful and transparent for customers while positively reflecting the business.
Clarifying reward timeframes
Participants were unsure whether reward estimates represented monthly or annual value.
Change: A tab was introduced to allow users to switch between monthly and annual estimates of all defined values based on their preference improving consistency within a single screen.
Calculating total spend
Participants wanted to understand how their total spend contributed to the reward calculation.
Change: The interface was updated to display total monthly spending alongside estimated rewards.
CO-BRAND DESIGNS
After presenting the final design to our external stakeholders, the concept was signed off and they were enthusiastic about exploring a similar tool for co-branded cards with more varied reward structures.
A key challenge was making the calculator reusable and scalable across different reward mechanics that followed different formulae and logics. The calculator was built using a small set of flexible, configurable, design-system components to allow multiple variants to be supported while keeping the experience consistent and scalable.
Etihad Cards
Made the value of airline miles tangible by translating them into destinations to strive for.
Mall Loyalty (SHARE) Cards
Used clearer language and framing to help users make sense of complex tiered rewards.
Subscription (FAB-Z) Discount Card
Turned complex subscription terms into a simple, personalised value view using toggle inputs.
Lifestyle Discount (Indulge) Card
Navigated a combined reward structure - mixing points and discounts across tiers - to surface clear value for customers.
PHASE 5 - HANDOFF AND SCALABILITY
PHASE 5 - HANDOFF AND SCALABILITY
DESIGNING FOR SCALABILITY
Reward logic, rates, and thresholds were structured so they could be configured through the CMS rather than hard-coded, allowing the component to adapt to future product changes.
Each credit card had slightly different reward mechanics, including varying reward rates, caps, and bonus categories. To support multiple card variants, the calculator was designed as a reusable component rather than a card-specific feature.
MEASUREMENT FRAMEWORK
To evaluate the impact of the calculator after launch, I defined several success metrics in collaboration with the data team.
These included:
-
Calculator Interaction Rate
Percentage of users who interacted with the calculator, indicating interest and customer adoption.
-
Click-through rate to web application
Rate at which users initiated a credit card application after using the tool assessed using the number clicks on the primary CTA on the component.
-
Click-through rate to completing application
Rate at which users complete a credit card application after using the tool in comparison to those who did not do so.
Together, these metrics would help determine whether the calculator improved customer understanding and supported more confident application decisions.
PROJECT STATUS
Currently in development and set to go live Q2 2026.
LEARNINGS
Because this was my first project with full autonomy, one of the key skills I developed was adapting presentations for different audiences.
I learned to engage stakeholders earlier to understand their assumptions, motivations, and what decisions they needed to make. This allowed me to tailor decks more effectively—focusing on the insights and implications most relevant to them rather than presenting every design detail.
I learned to engage stakeholders earlier to understand their assumptions, motivations, and what decisions they needed to make. This allowed me to tailor decks more effectively, focusing on the insights and implications most relevant to them rather than presenting every design detail.
CO-BRAND DESIGNS
After presenting the final design to our external stakeholders, the concept was signed off. Stakeholders felt the calculator had real potential to help customers, and were enthusiastic about exploring a similar tool for co-branded cards with more varied reward structures.
A key challenge was making the calculator reusable and scalable across different reward mechanics that followed different formulae and logics. The calculator was built using a small set of flexible, configurable, design-system components to allow multiple variants to be supported while keeping the experience consistent and scalable.
Etihad Cards
Made the value of airline miles tangible by translating them into destinations to strive for.
Mall Loyalty (SHARE) Cards
Used clearer language and framing to help users make sense of complex tiered rewards.
Subscription (FAB-Z) Discount Card
Turned complex subscription terms into a simple, personalised value view using toggle inputs.
Lifestyle Discount (Indulge) Card
Turned complex subscription terms into a simple, personalised value view using toggle inputs.
CO-BRAND DESIGNS
After presenting the final design to our external stakeholders, the concept was signed off. Stakeholders felt the calculator had real potential to help customers, and were enthusiastic about exploring a similar tool for co-branded cards with more varied reward structures.
A key challenge was making the calculator reusable and scalable across different reward mechanics that followed different formulae and logics. The calculator was built using a small set of flexible, configurable, design-system components to allow multiple variants to be supported while keeping the experience consistent and scalable.
Etihad Cards
Made the value of airline miles tangible by translating them into destinations to strive for.
Mall Loyalty (SHARE) Cards
Used clearer language and framing to help users make sense of complex tiered rewards.
Subscription (FAB-Z) Discount Card
Turned complex subscription terms into a simple, personalised value view using toggle inputs.
Lifestyle Discount (Indulge) Card
Turned complex subscription terms into a simple, personalised value view using toggle inputs.
CO-BRAND DESIGNS
After presenting the final design to our external stakeholders, the concept was signed off. Stakeholders felt the calculator had real potential to help customers, and were enthusiastic about exploring a similar tool for co-branded cards with more varied reward structures.
A key challenge was making the calculator reusable and scalable across different reward mechanics that followed different formulae and logics. The calculator was built using a small set of flexible, configurable, design-system components to allow multiple variants to be supported while keeping the experience consistent and scalable.
Etihad Cards
Made the value of airline miles tangible by translating them into destinations to strive for.
Mall Loyalty (SHARE) Cards
Used clearer language and framing to help users make sense of complex tiered rewards.
Subscription (FAB-Z) Discount Card
Turned complex subscription terms into a simple, personalised value view using toggle inputs.
Lifestyle Discount (Indulge) Card
Turned complex subscription terms into a simple, personalised value view using toggle inputs.
RESEARCH GOAL
Understand how users evaluate credit cards in a high-choice environment, and identify opportunities to reduce decision friction and increase application starts.
