Personal Project . 2022-23

Personal Project . 2022-23

Elevating the UI and UX for HDFC Bank

Elevating the UI and UX for HDFC Bank

Overview

Overview

Overview

The overarching goal is to improve customer satisfaction, streamline interactions, increase user engagement, and align the digital experience with HDFC Bank's branding and strategic objectives.

Roles & Responsibilities

Roles & Responsibilities

Roles & Responsibilities

UX Research. UX Design. Information Architecture. Sitemap revamp

Approach

🧮 Framing the Problem

Crafting the objective based on data analysis.

🧮 Framing the Problem

Crafting the objective based on data analysis.

🔍 Research and Analysis

To conduct a thorough analysis of HDFC Bank's current digital experience, including qualitative research, UX/UI evaluations, and competitive benchmarking.

🔍 Research and Analysis

To conduct a thorough analysis of HDFC Bank's current digital experience, including qualitative research, UX/UI evaluations, and competitive benchmarking.

🧠 Brainstorming

Develop a strategic approach to the redesign. Consider how the redesign will improve the overall user journey and simplify tasks for users through user personas and user journey maps.

🧠 Brainstorming

Develop a strategic approach to the redesign. Consider how the redesign will improve the overall user journey and simplify tasks for users through user personas and user journey maps.

✏️ Design and Prototyping

Implemented changes to information architecture and navigation structure. Created wireframes, mockups, and interactive prototypes to visualise design solutions.

✏️ Design and Prototyping

Implemented changes to information architecture and navigation structure. Created wireframes, mockups, and interactive prototypes to visualise design solutions.

Framing the Problem

HDFC Bank's current UX/UI showed areas for improvement in

  • navigation,

  • accessibility,

  • visual appeal, and

  • functionality enhancements.


These were discovered from secondary data analysis, industry standards, and competitor benchmarks.


This project aimed to improve customer satisfaction, increase user engagement, enhance accessibility, and align with HDFC Bank's business goals :


- "to provide a seamless and convenient customer experience through digital solutions such as MobileBanking, NetBanking, and ChatBot support."


-" building brand loyalty for our financial solutions and services. To convert the purchasing behaviour of our customers to adopt unassisted digital journeys both for improving customer experience as well as saving costs to the Bank." - HDFC Annual Report 2022-23

Research & Analysis

Research & Analysis

Research & Analysis

Content analysis of user reviews on the App Store and Google Play revealed several user pain points which have been outlined in the user journey map below.

Information
Architecture

Information
Architecture

Information
Architecture

The existing app provided the opportunity to map out the flow across the screens. The app currently has 67 screens which were narrowed to 52 screens as shown in the images below.

The existing app provided the opportunity to map out the flow across the screens. The app currently has 67 screens which were narrowed to 52 screens.

Below : Information Architecture of the existing mobile banking app, with 67 screens.

Below : Information Architecture of the updated mobile banking app, with 52 screens.

Brainstorming Solutions
to Glaring Problems

🧭 Navigation Bar

A sticky Navigation bar across all screens will reduce steps to return to the Home-screen.

⬅️ Buttons to External Sites

Banner ads within the app linked to products outside the app - to the bank's web page.

❌ Inconsistencies

  • Multiple Buttons that led to the same page were fixed.

  • Buttons to 'go back' inconsistent.

Design &
Prototype

Design &
Prototype

Wireframes were created to visualise the proposed changes.


Below, you'll find detailed wireframes and hi-fidelity screens demonstrating the design for the mobile application.

Original vs Redesigned

What Problem does the redesign solve?

The Navigation Bar

The sidebar, commonly found in websites, is replaced by the navigation bar to reduce the number of steps the user has to take to reach frequently accessed pages.

Card Displayed

Users of multiple cards will find that the cards are featured along with the account linked to it, making it easier for them to view account statements.

High Fidelity UI Designs

Going Forward

🎯 Next Steps

Usability Testing

🎯 Measuring Success

Lorem ipsum dolor sit amet

Approach

🧮 Framing the Problem

Crafting the objective based on data analysis.


🔍 Research and Analysis

To conduct a thorough analysis of HDFC Bank's current digital experience, including qualitative research, UX/UI evaluations, and competitive benchmarking.


🧠 Brainstorming

Develop a strategic approach to the redesign, including proposed changes to information architecture, navigation structure, visual design elements, and interactive features. Consider how the redesign will improve the overall user journey and simplify tasks for users through user personas and user journey maps.


✏️ Design and Prototyping

Create wireframes, mockups, and interactive prototypes to visualize and iterate on proposed design solutions.

Wireframes

Wireframes were created to visualise the proposed changes.


Below, you'll find detailed wireframes and hi-fidelity screens demonstrating the design for the mobile application.

Previous

Next

© Sharon Jacob 2024