Al Hilal Bank’s
Retail Banking
Customer Experience
About
is a progressive Islamic bank. We offers a wide range of client-centric Shari’ah compliant Banking. We work hard as a team to deliver a modern, fun and functional experience to our customers.
Al Hilal Bank
Lead UX Designer: I was responsible for creating the customer experience for the Credit Card team from scratch. This involved strategising, conceptualising, designing, and delivering the hand-offs to developers working across multiple platforms.
Role
Skills: I have experience conducting both quantitative and qualitative UX research, including persona development, competitor analysis, user interviews, affinity mapping, user scenarios, storyboarding, scenario mapping, and usability testing. I follow a user-centered approach to ensure the best possible outcomes for our users.
Tools: Figma, Figjam & Miro.
Timeline: 10 months.
© Al Hilal Bank
So, What’s the
Problem?
We faced some challenges with our previous credit card experience, as it was offline and broken. Customers had to do branch walk-ins or contact customer care. To address this, we decided to create a fully functional, enjoyable, and explorative experience for our customers to make the most of their credit cards.
“I want everything on my mobile or watch.”
“I like to find best possible offers to ease daily spend like cash-backs & offers.”
“I don’t like going to banks and waiting in queue.”
“I don’t like complex banking apps.”
People problems
Our decision to create a better credit card experience was based on user interviews, customer care reviews, and insights from sales.
Business problems
Experience is broken and divided into Offline and Online.
Low numbers of users.
Touch-points/Rewards weren’t getting enough attention.
Validated by Stakeholder Interviews & KPIs
As we started exploring the problem statement to generate initial understanding. We began our exploratory phase, In that, we planned to perform user interviews, completive analysis and a few whiteboard discussion sessions between teams. - rewrite
Tackling the problem statement
To gather insights into the pain points and frustrations of the current journey, we conducted user interviews with the bank's sales executives and some existing customers. We then interviewed a group of random users who represented our target audience and asked them about their daily usage of mobile banking and related categories. This group primarily consisted of mobile users, with a few also using the web. This exercise formed the foundation for imagining version one of the new experience.
Here are few questions from our interview sessions:
Do you use credit cards?
How many credit cards do you have?
Which bank has the best application process for credit cards? Why?
What other things did you like about the credit card application process?
Did you apply for any credit card where you don't have an account?
If yes, what made you apply there?
User Interviews
We performed a competitive analysis to understand how our competition operates, identify industry trends, and establish a reference point against which we could measure our growth. In order to gain insights into the banking market in the UAE, we explored a range of fintech and lifestyle applications.
By collecting user flows and journeys, we gained a deeper understanding of current user patterns, interactions, and design trends. This allowed us to generate a list of features that would better meet the needs of our users.
Competitive Analysis
Research Insights
We categorised our findings into four groups based on the overall credit card experience, including user interviews, competitive analysis, and group discussions. These categories are as follows:
User Personas
To drive our design decisions and better empathize with users, we created personas based on the user interviews conducted during the research phase. These personas represent different user types/groups that may use our product.
Al Hilal Bank has a large customer base in the UAE, so demographic considerations were important in creating personas for the project.
To ensure accuracy, the personas were based on the distribution of UAE population spending patterns on credit cards.
Our decision to build six personas was based on the distribution of the UAE population's spending volume on credit cards, with a good mix of four expatriates and two Emiratis.
User Flow Diagram
After conducting exploratory research and gathering insights, we mapped out the user's initial tasks, including an entry point, steps to completion, and the final step in completing a task. Once the user journey was established, we began to unpack the design flow.
Validating Assumptions
After mapping out the user requirements and flows, we created low-fidelity wireframes to quickly iterate and gather feedback from users and the team. Once we had a solid foundation, we developed a basic user interface of the happy path with key screens to conduct usability testing. This helped us validate our assumptions and gather early feedback from customers to enhance the user experience.
Usability testing round 1
Here are a few user comments on the initial journey
Users want the option to choose the credit card limit at this point before agreeing to it
The two card sections ‘Recommended’ and ‘Other cards’ are not prominent
Users think that entering personal and employment details are redundant steps
The terms of the Murabaha Agreement are not clear from the illustrated boxes
"TP" is not intuitively understood as Touch-points by all users
Many would skip reading the UAEFTS T&Cs as it is lengthy and detailed
Conceptualization & Low-Fi Prototypes
Once we mapped out the basic user requirements and flows, we began creating low-fidelity wireframes. These rough screens allowed us to quickly iterate and gather feedback from users and the team before focusing on the visual design.
Credit card - Onboarding customer flow
Credit card - In App service flow
Design systems
It was a huge challenge for our design team to implement a complete revamp of the user interface on all three platforms - iOS, Android and Web - as part of the rebranding effort. But we saw this as an opportunity to create a design system that would enable us to deliver a faster, scalable and consistent UI across platforms.
We named our design system "Hilal", which means the crescent moon. It was based on Brad Frost's Atomic design methodology, and we carefully crafted it to bring scalability and consistency to our designs.
Our design system consisted of a collection of visual elements like color, typography, functional components, and more. We created these components as design tokens and visual components in Figma, making them easily accessible and reusable throughout the application.
With the Hilal design system in place, we were able to create a seamless and cohesive experience for our users, no matter which platform they used. This not only helped us in design but also allowed developers to reuse components, increasing code efficiency. The implementation of the design system proved to be a game-changer for our team as it brought scalability and consistency to our process.
Learn more about design system, go to this blog by Batsirai Madzonga, Head of Design, Al Hilal. Click here to read the case study
Final Product
Onboarding & Servicing
A Fun onboarding experience
Instant Virtual Credit card
Shariah Compliant Journey
Full Control of Credit Card
Adjust credit card limit
Use this Figma prototype to see it in action.
Credit card
Onboarding
Use this Figma prototype
Manage credit card
Use this Figma prototype
The Impact & acheiving success metrics
In February 2022, Al Hilal Bank launched its redesigned iOS and Android applications, which onboarded a large number of new customers and addressed several issues in the previous banking experience. The launch was a huge success, with almost 90% of users liking the product, making a significant impact in competing with other giants in the industry.
The team's hard work and dedication were evident in the final product, and I am extremely proud of their accomplishments. Some of my favourite and proudest moments were working alongside this team.
Reflection & Takeaways
As a product designer, I've always dreamed of working on a project that would impact thousands of people and businesses. When I got the chance to work on the redesign of Al Hilal Bank's credit card experience, I was thrilled. It was a rare opportunity to design an end-to-end product with a large consumer base. Here are few key takeaways in the process.
Test early and test often
During the design process, we were fortunate enough to be able to meet with our users and conduct usability testing. This allowed us to test our designs and validate our assumptions early on in the process.
How to mentor
As the lead designer for this project, I was given the opportunity to mentor and work with a junior designer. This partnership proved to be a valuable experience as it challenged me to hone my communication skills and apply my knowledge of best design practices in a way that was understandable to someone with less experience. It was a valuable lesson in adjusting my feedback style for different audiences and learning how to delegate design work effectively.
Content design is underrated. I learned that copy plays a significant role in shaping the user experience. During this project, I worked closely with content writers to test out different words and phrases in my designs, and I was amazed by the impact that copy could have on the user journey. Through these experiences, I gained a deeper appreciation for the importance of collaboration between designers and writers, and the need for flexibility in design to ensure a seamless user experience.