Design the Money Transfer feature in a banking application

HamrahCard ux design

Product Overview

HamrahCard is a financial mobile app that provides banking services like money transfer and bill payment to users. As a product designer, I was responsible for all aspects of the design process of this app for one year.

Team Members:

Me: Hossein Sharafi: Lead Product Designer

Arta Mokaberi: Product Designer, Usability Analyst

Siamak Mokhtari UI Designer

Project Details:

Customer: HamrahCard app (a subsidiary of Ayandeh Bank)

Company: FarazPardazan Co

Date: Aug 2019 – Jun 2020

Design Scope

In this case study, I am going to describe the process of designing a new “Money Transfer” feature in the HamrahCard app. This app handles a couple of financial services and by developing money transfer features in most fintech apps, this app needed to implement this feature in response to user demands.

User Personas

Creating user personas is crucial in the development of financial apps as it ensures a user-centred design approach. By understanding the unique needs, preferences, and behaviours of different user groups, developers can prioritize features, design intuitive interfaces, and strike the right balance between security and usability. 

Considering that this application has been in the market for several years, we had useful information about our users. We created the User Personas based on some research and also previous data from our in-site data analysis team.

Hamrah Card app Persona

Lean UX Canvas

Using the Lean UX Canvas, I outlined the current state of the app and wrote down my assumptions of future development. Since this is a living document, I revisited it to make updates as I went through the Design Thinking Process.

Lean UX Canvas

User Research

Survey

As the first step in my user research, I conducted a 12-question survey. I spent some time carefully crafting my survey questions to reflect the data I actually needed at the start of my process because surveys have proven to be a really helpful tool for capturing a lot of quantitative data.

I distributed my poll over Twitter and a few Telegram Channels, and within a week, I received about 100 responses.

Some valuable findings:

  • About 30% of those surveyed claimed to use the HamrahCard app.
  • 90% of those surveyed indicated they use one app (or more) for their daily financial needs.
  • The main use of a financial app is to check their bank account balance, and the second is to transfer money to other accounts.

– The simplicity of the process has been one of the most important parameters for people to choose a banking application.

User Interview

I interviewed +10 users who use at least one financial app. My interviews provided me with a lot of insightful information.

Findings

  • One of the most unexpected findings I made was how my interviewees’ financial service preferences changed depending on their age/income. Based on their experience, their needs were almost stable in a year.
  • Users cited that the variety of services available on an app is interesting to them, and they prefer to install an app that can give them more banking services. 
  • Some users had uninstalled some apps, because they couldn’t use them easily or the user flow for some tasks was not clear.

Affinity Map 

I converted all of my recorded interviews and survey results into digital sticky notes using Miro. After dropping all of my data onto sticky notes, I organized them onto my Affinity Map with themes and color-coded them by brands. 

affinity diagram

Some Key Findings

  • Most of the data points were related to money transfers and lists of transactions.
  • People prefer to use an app that accepts more bank transactions
  • People prefer to have all the features in one app (instead of using multiple apps)
  • People would prefer to be able to hide/remove some transactions from the list
  • People usually transfer money from their contact lists to some of their friends.
  • Transferring money is sometimes time-consuming due to copying and pasting different card numbers and desired amounts.
  • Security is always an issue for the users

Task Analysis

Task analysis is a visual used to map out the path that users take to do a specific action. Here I’ve shared the money transfer task analysis. Although there are several different ways to transfer money on these apps, I used my interview data to choose the steps that users would usually take.

task flow of the banking app

HamrahCard UserFlow

I had to describe the steps users take for a particular task as a user flow after extracting the task analysis to make sure this process does not conflict with other components of the application and adheres to our design principles and design language.

banking app user flow diagram

Low Fidelity Wireframes

Wireframes are designed based on the task analysis, Userflow and the design language of this app. We could do usability testing on low-fi wireframes to make sure that the new design is intelligible by our users and is satisfying user’s needs.

High Fidelity UI

The user interface of this section was designed based on the application design language and added to the app. The language of this version was Farsi and its English version will be published soon.

hi fidelity banking app ui

Measurable success

After implementing this feature, we had another iteration for usability testing, and the result was fantastic. The users could transfer money in less than a minute (58 seconds), and this smooth process attracted more users to the app. The average time for money transfer in rival apps is more than 2 minutes.

This app implements the final design, and you can download it from Google Play to try it.