UX Case Study: Omni-Channel Banking for the most prominent Islamic Bank in Qatar 🇶🇦

BACKGROUND

Qatar Islamic Bank (QIB) was established in the late 1900s. A Shari’a board supervises its products and operations that ensures the Bank adheres to Islamic banking and finance principles.

QIB had a mobile app with basic banking features. This app was not scalable and closely tied to the legacy backend. The bank had recently adapted BackBase as the preferred banking solution.

OBJECTIVE

Our long-term objective was to redesign the legacy mobile app, suggest new features that can help customers, create an omnichannel experience for the brand covering retail banking, mobile banking, ATM, call centers, and branch bank banking experience.

As a part of Phase 1, we were supposed to build an MVP for QIB’s mobile app.

A team of 8 developers, 1 business analyst, and 1 UX designer was set up onsite in Qatar to execute this project.

Duration: 3 months

My Role: Being the only designer, I was pretty much responsible for everything: research, prototyping, visual designing, and usability testing.

Technology: BackBase

DESIGN PROCESS

Research

• Context study
• User interviews
• Business stakeholder interviews

Definition

• Problem statement
• Multi-touch point user journey map
• Personas
• Success metrics

Ideation

• Feature narrative
• Sketches
• Wireframes

Design

• Visual design
• Stakeholder review

Testing

• User feedback
• Usability testing
• Metric analysis

1. RESEARCH

We interviewed all stakeholders (Business, tech, support staff, and call center staff), reviewed analytics reports, and understood the current system.

We then met the end-users and had an open discussion session on why and how they use the QIB app. We targeted extreme users. First, those who used the app very frequently. Second, who were not using the mobile app. Third, frequent users.

I find testing with extreme users beneficial as they help you discover problems which the moderate users get used to or do not observe.

1.1 Key pain points of business stakeholders

1. The usage of mobile apps is very low.
2. Retail banking had more features than the mobile app, and so, customers preferred using the web over mobile.
3. Difficult to add new services and offers due to old tech-stack.
4. Customers still relying on physical branch banking.
5. Call center banking is preferred over self-served mobile app features. (Password reset, confirmation of transactions, etc.)

1.2 Key pain points of user

1. Too many steps are needed to complete payment transfer and authentication.
2. The registration process is complicated.
3. Account numbers and names are truncated on mobile.
4. OTP authentication is an issue for ex-pats using the app outside the country.
5. The branch locator does not work.
6. The app is updated frequently, and it is frustrating to wait every time I need to transact.
7. Other banking apps have much more features and are easy to use.

1.3 Key usage stats

1. 28% of transactions are account transfers. Amongst these, 80% of transactions are between QIB accounts only.
2. 46% of transactions are utility bill payments.
3. 21% of transactions are credit card payments.
4. 1.2% of transactions are international fund transfers.
5. 80% of users log in only to see their account balance.
6. 7.5% of utility bill payments happen over internet banking.
7. 92.5% of utility bill payments happen over mobile banking.

1.4 Competitor Analysis

Our primary aim was to innovate and build something that ensures QIB maintains the legacy of the best Islamic mobile app.

Study 1

Study 2

Study 3

Study 4

2. DEFINITION

During this stage, I put together all our findings from the first phase. I started defining the problem, defining the users, their behavior, expectations, and journey, and began the ideation workshop with business and technical stakeholders.

2.1 Problem statements

I am a local Qatari QIB user

I am trying to register for mobile banking

But I am unable to complete the registration

Because the process is too complicated and I get frustated easily.

I am an ex-pat QIB user who is currently in my hometown

I am trying to complete a wire transfer

But I am unable to verify the trasaction

Because the OTP gets sent to my local Qatar mobile number

2.2 User persona

My analysis from the user and business interviews led to the conclusion that the QIB users belonged to 3 major segments:

1. Qatari Male
2. Qatari Female
3. Expatriates

User personas

2.3 User journey

Since our vision was an omnichannel experience, we designed the customer journey map across all channels: mobile, web, print, email, branch, social, and marketing. The call center journey was kept out of scope for this phase as major reforms were planned, and we were to be involved in it after few weeks.

The journey was designed from the phase where a user would need to have a bank account till the point where they decided to end the relationship.

This journey had some confidential information that could not be disclosed in public. So, I had to blur the details. But the skeleton would give you a good idea of how the journey was mapped.

Skeleton for customer journey mapping.

2.4 Success metrics

In close collaboration with the marketing team, we came up with 5 KPIs that would define the success of the new experience that QIB offered.

1. Number of mobile app users
2. Number of transactions per week
3. Task completion rate (Registration, money transfer, utility bill payment)
4. Maximum 3 clicks to content (Account summary, transaction details, loan details)
5. Customer satisfaction score

3. IDEATION

With a group of 20 people from different departments in the bank, I facilitated the ideation workshop. While the primary aim was to ideate for the MVP, we also gathered a couple of ideas for the long term.

3.1 Key ideas to improve the user experience (for ex-pats and locals)

• Simplified onboarding process.
• Biometric login for iOS and Android.
• Personal passcode for OTP-less verification.
• QIB authentication app for OTP-less verification.
• Collaboration with major utility providers like Vodafone and Ooredoo.
• Magnetic strip management (Users who travel a lot need to activate their card’s magstripe for usage in a particular country to avoid fraud)
• Integration with charity organizations (In Islamic culture, people donate a fixed amount of their savings monthly to charity organizations)
• e-Ticketing for branch visits

3.2 Key ideas to utilize BackBase offerings

• NFC based card-less cash withdrawal
• NFC based bump payment and account transfer
• Apple Pay integration

3.3 Other ideas

• Cheque deposit via image capture.
• Cheque management and status tracking
• A customized theme for different customer segments
• Loan and investment management
• Geofencing and iBeacon for branch ticketing and marketing

3.4 Feature prioritization for the MVP using KANO Model

I used the KANO model to prioritize the features essential to the users and business stakeholders and included a flavor of technical timelines while creating this.

KANO model used for feature prioritization

3.5 Wireframes

Wireframes designed for CB

4. DESIGN

5. TESTING

Number of users: 3 male, 3 females (50% ex-pats, 50% locals)

Device: Android (Samsung) and iOS (iPhone 6, iPhone 6 Plus, iPhone 7)

Task: Account transfer / Beneficiary management /Branch ticket booking.

Time: 30mins approx.

Users were shadowed, and observations were made on how they are using the application, their response to alerts, what looks clickable to them, and whether or not they can complete the task given to them in the optimum time frame. Since the interface was made simple and following other banking designs, the users responded quickly, and the task completion was successful. Although the time taken to complete the task was more than expected, I had observed some points which could improve:

1. Page loading time while fetching beneficiaries from IBAN.
2. Android users were reluctant to using swipe gestures and preferred taking longer routes with more taps. This was despite the interaction being native to Android. (Swipe to action)
3. In branch ticket booking, google maps were being used, which had some own CTAs and was interfering with the primary CTA of the app, thereby confusing the users.

These users were then interviewed to share their experiences. Their journey of using the app was recorded and played to pinpoint any specific issues they had. The findings of the usability session were terrific. We got some helpful feedback and retouched the interface designs after this session.

5.1 Evaluating the success metrics

1. ✅ Number of mobile app users increased by 10%.
2. ✅ Number of transactions per week increased by 8%.
3. ✅ Errors and drop-offs in task completion were reduced by 70% and 50%, respectively.
4. ✅ Clicks to content: All modules were reachable in less than 3 taps.
5. ✅ Customer satisfaction score: Improvement in Google Play and Apple Store ratings.

Play Store and App Store feedback

About the author

Atishay is a seasoned product designer known for his strategic approach to design and implementation. His work focuses on aligning user needs with business objectives to create impactful digital solutions.

Interested in more case studies or potential collaborations? Visit atishaydesign.com 🚀