As a frequent user of HDFC Bank’s banking app, I often find myself taking far too long to carry out common tasks such as, transferring money, browsing through my account transactions or even just searching for my account information.

I decided to redesign some of the user flows that I commonly use and give the user experience and interface (UI/UX) an update.

Style guide

Helvetica LT Black is used to design the logo, therefore, I decided to use the Helvetica LT font family for the redesign. The primary color set of blue and red is based on the logo. I chose additional tints and shades of these primary colors that would bring the design elements together.

Workflows and user experience

Helvetica LT Black is used to design the logo, therefore, I decided to use the Helvetica LT font family for the redesign. The primary color set of blue and red is based on the logo. I chose additional tints and shades of these primary colors that would bring the design elements together.

01. Adding a beneficiary

In order to transfer money, users must first add a payee/beneficiary and their account details. The bank will then verify these details. At the moment, in the current app, users can only add a payee via the Pay > Money Transfer page.

I usually update my payee list once or twice a week to either add or remove payees, hence want faster access to these actions. I redesigned the existing workflow to allow users to quickly add payees from any screen they are on, directly from the Quick Actions menu.

Tapping on Add a beneficiary brings up a modal sheet, which appears on top of the user’s current screen and returns the user back to the same screen once closed.

02. Transferring money

After a payee is added, users generally want to transfer money to them. Right now users need to go to the Pay > Money Transfer link in the sidebar menu. Ideally, account related actions should be accessible directly from the Accounts interface.

I added the Transfer Money action to the Actions tab available for each account and designed it to be a linear, 3-step process: Choose a beneficiary — > Add payment details — > Review transfer details

Once the transfer details are reviewed, the user will get an OTP to authenticate and confirm the transfer.

03. Transactions and Activity

Another frustration with the existing HDFC Bank app is the process of viewing transactions for an account and not being able to filter or sort the data efficiently. Transaction data is only available for 30 days and to view older transactions, users need to download a PDF.

I redesigned this workflow to enable users to browse transactions with an infinite scroll, loading new transactions as the user scrolls to the end of the screen.

I also added filters to view transactions by date or type and added the ability to swipe on individual transactions to report or share them.

04. Navigation

The primary navigation is currently hidden behind the hamburger menu, requiring at least two clicks to get to a new section. When the navigation menu opens, CTAs are hidden under an accordion style menu and the nomenclature used is confusing. For example, there are no direct links to navigate to an Accounts or a Cards page to find more relevant information.

I designed a new floating navigation UI with links to five primary sections — Home, Accounts, Cards, Quick Actions and More — that allows users to navigate to different sections of the app with a single click. The Quick Actions menu allows users to customize and access actions that they commonly use from a single location in a single click.

Extras

Home

Other than the commonly used workflows, I also wanted to design a more informative and useful home page, which would give users a birds eye view of their account and banking activity.

Currently, the home page has two tabs — Overview and Favourites. The Overview tab provides an account overview including information about account balances and pending dues, with a prompt to add billers if none have been added yet. I’m not sure what the Favourites tab does since I’ve never used it.

I redesigned the page to provide users with information about their daily activity, account balances, outstanding bills, credit card statements and offers.

Accounts

The Accounts section shows users how much money is currently available in their accounts, individually and in total. Users can then select an account to view more details. Under each account there are three tabs:

• Details: Information about the account, bank and branch.
• Actions: CTAs that allow users to perform actions on the account, such as viewing transactions, transferring money, adding account holders, etc.
• Trends: Displays data about account activity in a graphic format, allowing users to better understand their spending patterns and account usage.

User authentication

I designed the sign in workflow and UI to match the new styles and added a new workflow, enabling users to sign in using their fingerprint instead of using their customer ID and password.