• LinkedIn Social Icon
  • Facebook Social Icon
  • Twitter Social Icon
  • Instagram Social Icon

UX design Portfolio

HDFC Mobile Banking Experience

The Government of India’s (GoI) mandate to digitize all payments has opened up a lot of opportunities and challenges for the exciting new sector of FinTech.

HDFC - One of the India's top Private banks wanted to revolutionize the way of payments with a lot of enhancement in UX design present in their current mobile app and hence organized a design challenge to get inspirations from the designs submitted by participants.

 

This project included 2 UX Designers, 1 Business Analyst, 1 Visual Designer and my role was lead UX Designer. The project duration was 1 month

Background

According to Forrester’s Global mobile banking report, mobile banking in India isn’t yet world class. Indian banks fare much poorly in mobile banking functionality when compared to the global average. HDFC scored 48 on 100 for its mobile banking functionality.

User Research, Findings and Data

User research preceded the redesign phase. It helped us understand: 
1. The users and their needs,

2. How they approached the problem

3. Their mental models of the solution

4. The way they perceived information

User Personas

The two key parameters we decided on for segmentation were the user’s financial security and familiarity with technology.

What is their typical behaviour with mobile banking? What are they looking for within the application?

We built a survey to analyse mobile banking behaviour and the results we observed from around ~100 entries were as follows:

Their key activities on the app helped prioritise the tasks on the application:

The average user’s focus was more on money management than wealth management

Mental models of organising information:

We followed up with a card sorting exercise with over 30 participants to understand how users categorized information, to draft the information architecture accordingly. A key finding was that a proportion of participants grouped deposits and mutual funds together as wealth management, while several banking applications typically categorized deposits under account information. 

The information architecture had to keep in mind the user’s mental model, without compromising on the standard norms of categorizing information.

Reviewing the User Experience:

Login :

One common complaint on the App Store was the inability to log in via the app. This was due to password expiry. While the website notifies the user prompting them to reset it, the app doesn’t. Leaving the users clueless until they got on the website

My Menu :

Constraints: Functionally, certain fields get disabled depending on the user’s input but remain enabled visually. This can serve as a misleading affordance (an attribute of an object that allows people to know how to use it) to the user delaying the user’s task completion time and affect user experience

Fixed Deposit User Flow:

The app requests the user to input the deposit amount before generating the rules that determine the minimum deposit amount and duration. This could lead to the user re-entering the amount based on the displayed rules. The ideal flow would be to educate the user on the rules before they enter the amount and duration.

Fund Transfer Flow :

  1. The past fund transfer flow on the app was highly convenient for a user looking to make an urgent transaction. However, there are two key validations in the process:

    a) Is it the actual user looking to make the transfer?
    b) Is the user certain of the transfer they’re trying to make?

Frequently made fund transfers often become habitual i.e ingrained in our muscle memory. While this makes it easier for the user, it can often result in the user easily accomplishing the wrong task.

Friction in user experience can sometimes be to the user’s advantage, especially if it’s while introducing an additional layer of validation in the payment process, an OTP for example.

2. The past approach of categorizing information into ‘Transact’, ‘Enquire’ and ‘Request’ although theoretically accurate does not prioritize the user’s flow of performing tasks and organizing information.

Credit Card:

The Redesign :

Red Routes prioritise tasks by evaluating each task on how many users perform it and how many times they perform it. This helps identify the crucial tasks that should be provided upfront and the good to have tasks that can be discovered gradually through progressive disclosure.

Features such as Bill payments, Fund transfer and viewing account details are crucial for money management and need to be provided up-front, whereas features like managing deposits, mutual funds that relate to wealth management can be disclosed progressively .

The Information Architecture took into account the tasks users wanted to primarily perform, the categories they perceived as well as the norms of categorizing banking features.

The Wireframing process involved putting together all the redesigned functionalities and flows on the mobile screen. This was the final, iterative check-point on how the workflow would translate onto the screens, before delving into how the screens would look.

User Interface Design :

Once the wireframes were finalised, we moved on to the User Interface design. Selection of colours, iconization and typographical choices were centred around the brand identity and functionality.

The redesigned signin screen:

Redesigned signin screen

The redesigned navigation menu prioritises the primary money management tasks that users perform. Secondary features are accommodated within the ‘More’ section.

Redesigned Navigation Menu

Account Screen: The primary information made visible on the account screen is the balance and the recent transactions. The screen provides access to transaction history- where transactions can be filtered by type, time-frame and amount.

Prioritising balance amount and recent transactions on the account screen with progressive disclosure to access transaction history by type, amount and time-frame

Transfer funds process incorporating OTP verification:

As a finishing touch, we also redesigned HDFC’s app icon as we noticed it wasn’t up to speed with current design trends.

High Fidelity Mockups of HDFC Banking :

Additional Features :

As a finishing touch, we also redesigned HDFC’s app icon as we noticed it wasn’t up to speed with current design trends.

  • Quick Payment Feature

  • Promotions and Rewards Section

  • Nearby ATMs and Branches

  • Quick Meeting setup with financial Advisor

  • Foreign Exchange Rates

  • Video Tutorials

Balance Based

 

  • Category based Budgets

  • Expense Tracker and Trends over months and years

  • Easy Account Switching and monitoring kids accounts

  • Payment Reminders