Enhancing HDFC Bank’s Forex Card Services Through a User-Centered Mobile App

Tanishqa Ghagare
11 min readJun 18, 2024

--

In this project, I aimed to create a seamless and user-friendly mobile application for HDFC Bank’s forex card users. Join me as I walk you through the design process, key decisions, and the improvements made to enhance the overall user experience.

This project was done as part of the Design Simulator at 10kdesigners.

Introduction

Imagine yourself strolling through the charming streets of Paris, enjoying coffee and croissants. But when it’s time to pay with your HDFC Bank forex card, it’s declined, leaving you confused and embarrassed. You try to resolve the issue by visiting the HDFC bank website, only to find it overwhelming. There are hundreds of options but finding info about your forex card can feel like searching for a needle in a haystack. You just want to check your balance or see recent transactions, but where do you even start?

This frustration can be avoided with HDFC Forex Express, a simple mobile app designed to provide seamless access to essential features, ensuring hassle-free transactions wherever your travels take you.

Problem Statement:
Enhancing HDFC bank’s forex card services through a user-centered mobile app.

Background: Users find it challenging to efficiently manage and utilize HDFC Bank’s forex card services solely through the website, leading to difficulties in handling their forex card needs in a timely and convenient manner.

Market Research and Background

I started my research by identifying the top players in the forex card industry and analysing their market sizes. I then compared their functionalities and features to understand the differences between them.
Based on this research, below are my findings about HDFC Forex Card:

  1. Ranked in the top five : HDFC forex card is ranked among the top 5 best forex cards in India, widely used by travellers going abroad.
  2. Debit card functionality: Unlike competitor forex cards that acts like credit cards, HDFC forex card requires users to add funds to their forex cards in order to make transactions through it.
  3. Process to add funds: Currently one can add funds to their HDFC forex card by net banking or through the existing HDFC Bank mobile app (the process to which is nearly hidden and non-discoverable).

I also researched online user reviews to identify common issues faced by users, some of them are highlighted below:

After understanding the base level problem through secondary research and and reading a few user reviews online, I wanted to understand the problems faced by users in depth and hence I decided to conduct user interviews.

Key Takeaways from User Interviews:

  1. Users are forced to visit the bank or rely on third-party services to manage their forex card needs, which can be inconvenient and time-consuming.
  2. Users find managing forex card services like adding funds, changing ATM pin etc solely through the website highly inconvenient. The navigation is not intuitive, and finding specific information like transaction history or reloading the card takes too much time.
  3. The response time for customer queries is slow. The chatbot (Eva) often fails to resolve issues, and there’s no dedicated customer care number for quick resolutions.

After performing primary research and conducting a few user interviews, I observed the below pain points:

As HDFC bank’s forex card is rated among the top 5 best forex cards in India with widespread usage, it is imperative to enhance the user experience and address the current challenges faced by users.

Therefore, the development of a dedicated mobile app is crucial to enhance accessibility and user experience by offering seamless card management and transaction tracking on the go.

Key metrics I aimed to improve through designing this app:

  1. Card Activation Rate: Increase the percentage of issued cards that are activated and actively used by customers.
  2. User Retention Rate: Boost the percentage of customers who consistently use the forex card over time.
  3. Customer Satisfaction: Enhance user satisfaction with the overall forex card experience.
  4. Reload Frequency: Simplify the process to increase how often users reload their forex cards.
  5. Customer Support Response Time: Reduce the time taken to resolve customer queries and issues.

Competitor research & analysis:

I performed competitor analysis to analyse how other forex card applications work and the features they offer.

Understanding the features offered and how different forex cards work
Here are the App Store screenshots, as these apps can only be explored by users who have a forex card.

MoSCoW framework

-Following thorough research, I identified critical pain points that offered valuable insights into the app’s flow. I outlined all potential features and their corresponding flows. Given the time constraints, I made a strategic decision to concentrate on crafting the Minimum Viable Product (MVP) of the app. I employed the MoSCoW Framework to prioritize features and designed the app accordingly.

-Based on the below MoSCoW framework, I have finalized the essential features to be designed for the MVP.

Introducing HDFC Forex Express

Introducing HDFC Forex Express, a mobile application tailored for HDFC forex card users. My objective in designing this app was to simplify the user experience after card purchase, allowing users to effortlessly utilize its services, check their balance, and reload their cards within minutes.

  • Design System

To achieve a seamless and intuitive user experience, I developed a comprehensive design system for HDFC Forex Express. This system incorporates consistent UI elements, typography and colour schemes, ensuring a cohesive and user-friendly interface throughout the app.

  • Wireframing

I created basic wireframes to outline the app’s structure and key features.

  • Iterations

I refined the app design through multiple iterations based feedback from my mentors.

  • Lets have a look at the final designs of the app:

Onboarding & Signup flow

The on-boarding and sign-up flow for the HDFC Forex Express app is designed to be simple and to the point. Users can easily create an account or log in with their existing credentials if they are already have a forex account. The process ensures a smooth start, allowing users to get their forex card and access all features effortlessly.

Post Sign up Experience

Once a user signs up, they will be prompted to browse all available cards on the home screen, which leads to the card activation process, i.e. ordering a card. Users will be able to explore the app interface and see all tabs, including Home, Card, Transaction, and Rewards. However, these tabs will remain in an empty state until the user purchases and starts using a card.

On the home screen, users will be prompted to take two actions:

  1. Browse and Order a Card: Users can browse all cards, then order the one that suits them best.
  2. Link an Existing Forex Card: Users who already have an HDFC Forex card can link it to the app. This is useful for those who purchased their card directly from the bank or are long-time users from before the app existed.

Until the user does not purchase or links a card, each tab in the app will prompt them to order a card.

Here’s how a user without a card can view the interface.

Here’s the login experience with a card — stay tuned to see more in detail!

Activation flow (Get your card)

Once a user clicks on “Browse All Cards” or “Order a Card,” they will enter the activation flow, where they are prompted to purchase a card. Users can browse all available cards by swiping left, allowing them to explore a variety of forex cards offered by HDFC Bank. This feature helps them choose the card that best suits their needs and preferences.

Users can compare different cards by reviewing the features listed below each card. The activation flow is designed to make it easy for users to purchase a card without visiting the bank, offering the convenience of ordering a card from home and getting it delivered to their doorstep.

To complete the process, users need to verify their identity by providing their PAN card proof and home address for card delivery. During this process, users will also see a virtual preview of their card and have the option to confirm the name that will appear on the card.

Home screen

Once the user purchases the card, they will see the active states of the app interface. The home screen is the first thing a user sees upon opening the app. The design of the home screen aims to provide users with an immediate overview of their card details, balance, and recent transactions. This bird’s-eye view allows users to quickly access key information before navigating to other tabs.

The home screen prominently displays the user’s card along with four quick access controls. Considering that a forex card is primarily used by travellers abroad, these quick access options are designed to simplify the user’s experience:

  1. Card Details: Users can view their card details by flipping the card. This feature protects sensitive information such as the card number, CVV, and expiry date, which are only revealed when the card details button is clicked.
  2. Add Money: This quick access option allows users to quickly add funds to their forex card. Since the card can only be used with a sufficient balance, this feature is crucial for ensuring seamless transactions.
  3. Freeze Card: In case the card is lost or stolen, this option lets users freeze their card immediately. This feature is designed to reduce panic and frustration by making it easy to secure the card.
  4. Check balance: This option allows users to check their forex card balance, in case a user holds a multi-currency forex card — in that case balance in all currencies will be displayed to the user.

Additionally, users can view a summary of their recent transactions on the home screen. By clicking “View More,” they are directed to the transactions tab where they can see detailed or custom transactions.

My Card screen

To protect sensitive information such as the card number, CVV, and expiry date, these details are not shown upfront. Instead, users can view this information by toggling the card details and cvv button on and off. Based on user interviews, I identified that the card tab is where users might need the most assistance.

Users are also given the option to add money, freeze the card, or manage their card here, providing convenient access to these features once again after their initial availability on the home screen. This repetition ensures that users can easily perform essential actions from multiple points within the app.

Transactions screen & how custom period transaction work

Having a separate Transactions tab is crucial as it allows users to quickly and efficiently track their spending, ensuring financial transparency and control. Viewing transactions is essential for users to monitor their account activity, verify payments, and detect any unauthorized charges promptly.

There are two ways users can access the Transactions screen. First, by clicking the “View More” button on the recent transactions card on the home screen, and second, by selecting the Transactions tab from the bottom navigation bar. This screen allows users to view all their transactions in detail.

Users can filter transactions by predefined time periods: the last 7 days, the last 10 days, or the last 30 days. Additionally, they have the option to set custom date filters. Each transaction entry displays the date, time, recipient, amount paid, and transaction status (success or failed), helping users verify whether their card has been debited and avoid duplicate transactions.

Users can also download their transaction history for any selected time period.

Adding money to your card

The most important feature of the HDFC forex card is “adding money,” as the card functions like a debit card and requires funds to be added. Unlike other forex cards that work like credit cards, the HDFC forex card necessitates users to easily add money. Users are first shown the card and its last 4 digits so they are aware of which card they are adding money to. The card also displays its status, whether active or inactive. If users have cards that have expired, the status will show as inactive, prompting them to purchase a new card.

Users can also view the available balance in their card. In case a users hold multi-currency forex card, where it could have multiple currencies loaded, users can view all balances. Further as the HDFC multi-currency card can hold up to 22 currencies, users can easily add a new currency to their card anytime by clicking on the "Add a New Currency" button.

Process to add money to your forex card:

  • Pick your currency: Decide the currency you want to load onto your card from the 22 available options.
  • Choose your preferred payment method: Net Banking or UPI.
  • Type in the amount you want to add & select a currency from the drop down menu: The HDFC multi-currency card can hold up to 22 currencies. Users can easily select their preferred one.
  • Pay securely: Enter your debit/credit card details and proceed securely.
  • Verify with OTP: Once you confirm the amount and card details, you’ll receive a one-time password (OTP) for verification. Enter the OTP to complete the transaction.
  • Money loaded: The money will be instantly added to your card. Check your balance easily under “My Balance” in the quick access bar or on the “Add Money” tab within the card section of the app.

Future considerations for the HDFC Forex Express app:

  1. AI-Powered Expense Management: Integrate AI to provide personalized spending insights and budgeting tools, helping users manage their finances more effectively.
  2. Global ATM Locator: Incorporate a feature that helps users locate nearby ATMs that accept HDFC Forex cards, providing convenience while traveling abroad.
  3. Travel Booking Integration: Allow users to book air tickets and hotel reservations directly through the app, offering a seamless and comprehensive travel experience.

To wrap up, designing the HDFC Forex Express app was a challenging yet rewarding experience, especially as it was my first-ever app design project. Throughout this journey, I encountered numerous obstacles that pushed me to learn and grow, enhancing my skills and understanding of user-centric design.

I would like to thank Shubham, Abhinav, Param and Divya for providing their valuable feedback and guidance.

Thank you for taking the time to explore my case study.

I am open to freelance projects, internships and full time roles. Feel free to reach out to me on LinkedIn & X.

--

--