top of page

A Renowned Mauritian Bank (NDA)

Simplifying online foreign currency transfers for Bank Corporate Clients internationally

Product Design | Digital Transformation 

(Note: I have omitted all the confidential information, in order to adhere to my Non-Disclosure Agreement)

CIIB_HEader image.jpg

Fig 1. Payment Approval Mobile App

About the project

As part of the digital transformation, the bank was looking to ease end to end foreign currency transfer process by automating the manual processes of initiating & approving a transfer for their international corporate clients to reduce errors & increase customer efficiency.

Business Goal

  • Reduce cost to serve

  • Reduce Manual Intervention & risk of errors

  • Create competitive advantage through innovation

  • Reduce customer service calls

My Role & Team

Role: Product Designer at the bank 

Team: 10 (Including me, Product Owner, Business Analyst, Scrum Master, Tech Lead, 5 Engineers)

Location: Mauritius

My Contribution: Led the UX Design effort for the two primary journeys.Worked closely with product owners, stakeholders and a team of engineers of the bank to ship user centric and accessible user experiences.

Outcome

  • 20% increase in new Internet Banking customers with the launch of the new mobile app within one year

  • 89% of the transactions were automated resulting in increased customer satisfaction

  • The Mobile App received an Award in the space of Best Payment Hub

Problem Statement

1. Manual entries reduce productivity & increase errors

The payment initiator spends 22% of the time on repetitive tasks like finding the most frequent transactions, entering the name of a saved beneficiary, amount to be transferred etc which leads to poor productivity and increases human errors as a result of which they are not able to concentrate on high priority tasks.

Usability issue -CIB 2.jpg

Previous Design

2. Legacy bank software did not support modern integrations

The payment approvers needed a solution to authorize payments on the go. The existing payment approval platform was obsolete and could not be made responsive. This led to customer unhappiness and resulted in loss of business credibility.

Signatory_current.jpg

Previous Design

Process & Methods

My working day at the bank...

The digital factory followed the Agile Methodology, where the product development was spread across different sprints. To be able to cover all the aspects of the design process, designers in the squad were expected to stay a sprint ahead.

​

Some of the methods I used were, Paper prototype testing with the customers, wire-framing in Sketch, conducting usability testing, creating Personas, user Flows, stakeholder & user interviews

​

​

​

CIB_1.jpg

Here are a few key highlights

Target users

Payment Initiators & Payment Approvers

We developed proto-personas basis the knowledge received from stakeholders to get a better understanding of who we were designing for.

Users-CIB.jpg

This link will take you to an another tab

Diving In

Understanding user goals

User Goals.jpg

Capturing first impressions using low-fidelity sketches

I started with sketching wireframes based on a few hypothesis, these sketches were then used to capture first impressions of the target user & observe their comfort level. The feedback received from them was captured on post-it notes.

Sketches.jpg

Highlighting form usability issues

Usability issue -CIB 1.jpg
Usability issue -CIB 2.jpg

User Flows

I re-designed the experience once the initiator selects "Foreign Currency Transfer". The design for the initial screens remained the same.

Initiator-flow.jpg
Approver-flow.jpg
Initiator head shot.png

Payment Initiator

RE-DEFINING THE  PROBLEM STATEMENT 

How might we make the payment initiation experience efficient and error-free?

Explorations

Designing a new "Make an international" payment landing page

The goal of the new landing page was to provide customers with quick access to three main functionalities 

​

  • Initiate a payment to an existing beneficiary

  • Initiate a payment to a new beneficiary

  • Repeating a saved/favorite transaction

​

The design criteria for this page was to have a conversational tone of voice in the labels

landingpage_exploration.jpg

Testing with customers

UT.jpg

Technical Limitations

Design limitations.jpg

Visual Design

Initiating a Transfer

Scenario 1

Initiate a transfer to an existing or new beneficiary

Problem

Smith says “I have to search for previously saved beneficiaries & transactions everytime I log into the Internet Banking system which is quite redundant & consumes alot of my time”

Solution

We created a new landing page, and provided quick access to the frequently used functionalities like Paying an existing beneficiary, Repeating a saved transaction.

new.jpg

Scenario 2

Entering details of the beneficiary

Problem

Smith says “ I expect the system to save the details of the beneficiary and show it to me when I repeat a transaction to the same beneficiary next time”

Solution

Beneficiary details will be autofilled when initiating a transfer to an existing beneficiary.

Hnet-image.gif

Scenario 3

Authenticating the Transfer with a Soft token code

Problem

“ I often forget to carry my hard token device with me, in such cases it gets difficult to authenticate the transfer”

Solution

We incorporated a new feature called“Soft Token” which would eliminate the need of carrying the hard token device around.

Authenticate_final.jpg

Scenario 4

Post-initiation of transfer

Problem

“ I do not have visibility on the status of the approvals for the transactions”

Solution

A reference number will be generated at the end of every request making it easier to track the initiated requests. Along with that they will receive notifications everytime an action is taken on the request by an approver.

Post-initiation of transfer.jpg
Approver head shot.png

Payment Approver

RE-DEFINING THE PROBLEM STATEMENT

How might we enable approvers to authorize payments on the go?

Explorations

Designing the payments approval mobile app

The goal of the mobile application was to provide detailed information of the payments to be approved.

​

Other secondary goals, were

  • Keep a check on the account summary

  • Check the transaction status dashboard

  • Check Notifications

Mobile version.jpg

Visual Designs

Approving a transaction

Scenario 1

Approving OR Rejecting Transactions

Problem

“ I am constantly travelling & it gets difficult to access my laptop everytime”

Solution

We created a new mobile application to approve/reject transactions on the go

approve-transactions-1.jpg
approve-mobile.png

Scenario 2

Approving OR Rejecting Transactions

Problem

“ There are about more than 50 transactions per day to look at, its very time consuming to give an action on each separately”

Solution

We built the capability to be able to bulk select

transactions

Confirm.jpg
Confirm Transactions.png

Scenario 3

Transaction Dashboard

Problem

“I do not have visibility on the status of the transactions once they are approved”

Solution

We designed a Transaction Dashboard, where the approver can have a look at the status of all transactions whether they are in-process, successful or unsuccessful.

Transaction Dashboard mockup.jpg
Transaction Dashboard.png

Scenario 4

Checking Account Balances

Problem

“ I am unable to keep a check on the money going out”

Solution

Account Position would give a detailed view about the balances in each account of the company.

Account position.jpg
Account position.png

When things go wrong!!

We envisioned & designed for scenarios where customers might find themselves hitting a roadblock with situations like the system being down or the session getting expired which would cause frustration.

error states.jpg

Outcome

1. Increase in New Internet Banking Customers

Before the inception of new mobile application the rate of clients (local and international corporates of different sizes, global businesses, trusts etc) using the bank’s Internet Banking platform was 50%

​

After mobile application was launched (following intense consultation sessions with many clients), an uptake of

20% was registered, putting the rate of Internet Banking users at 70%

​

​

2. Increase in Straight Through Processing of Transactions

With the newly developed Internet Banking experience and Mobile app, the bank achieved 89% STP

(Straight Through Processing) without any manual intervention compared to the vision of achieving 60% STP

Culture

Collaborative working atmosphere

  • Weekly sync-up with the User Interface designer of the bank to make sure there is consistency in the designs I created.

  • Resolving design discrepancies and getting acquainted with the new updates in the design system through weekly meetups

Following a pre-defined design
system
 

  • Sharing concepts with the tech team to check on the feasibility of the design, the amount of effort it would take and if there was an alternative solution to the design.

Discussing limitations of the software with the tech lead

  • The product owner and Business Analyst briefed me on the priority of features to be released in the 1st phase of the product.

  • They would explain the different aspects of the product & what the business needs were.

  • Validating designs as per the user stories written by the Business Analyst

Gathering an understanding about the product

Key-Takeaways

What I learnt...

  • Collaboration & Communication is key

  • While technical limitations challenged me with limited design explorations, but it was an opportunity to design within the given constraints

  • Cross-functional team & having empathy for team members

  • Be an advocate for the user, but also understand the business & tech needs

I have summarized my key-learnings on this project in this article here - https://www.linkedin.com/pulse/ux-stint-mauritius-disha-shah/​

bottom of page