Next Gen HDFC Netbanking

Building Web Banking for 56 million users across India

HDFC Bank is one of the largest customer base for its banking services in India. With simplified navigation, a sleek and updated interaction design, the Next Gen platform is built to elevate user's banking experience.

Client

HDFC Bank

Client

HDFC Bank

Client

HDFC Bank

Industries

Financial Services, Banking

Industries

Financial Services, Banking

Industries

Financial Services, Banking

Date

2019

Date

2019

Date

2019

Recognition

Global Most Innovative Digital Banking in 2021

Recognition

Global Most Innovative Digital Banking in 2021

Recognition

Global Most Innovative Digital Banking in 2021

App Screen with open sidebar
App Screen with open sidebar

Challenges

Ensuring design consistency across a large design team while navigating conflicting requirements from multiple product owners.


Process

  1. Define design patterns and approaches.

  2. Ensure that team is applying the same design patterns.

  3. Manage design enhancements request.

Challenges

Ensuring design consistency across a large design team while navigating conflicting requirements from multiple product owners.


Process

  1. Define design patterns and approaches.

  2. Ensure that team is applying the same design patterns.

  3. Manage design enhancements request.

Challenges

Ensuring design consistency across a large design team while navigating conflicting requirements from multiple product owners.


Process

  1. Define design patterns and approaches.

  2. Ensure that team is applying the same design patterns.

  3. Manage design enhancements request.

Problem

Sprint development delays caused rushed decisions, resulting in unclear user story requirements. This confusion and misalignment among team members resulted in frequent scope changes and compromised design consistency.

Problem

Sprint development delays caused rushed decisions, resulting in unclear user story requirements. This confusion and misalignment among team members resulted in frequent scope changes and compromised design consistency.

Problem

Why?

Impacting of implementation inconsistency

Users encountered different styles and behaviors for similar components, causing confusion. Further feedback from stakeholders highlighted frustration with the unpredictable behavior such as error messages. Stakeholders provided feedback, expressing frustration with the unpredictable behavior of elements like error messages.

Why?

Impacting of implementation inconsistency

Users encountered different styles and behaviors for similar components, causing confusion. Further feedback from stakeholders highlighted frustration with the unpredictable behavior such as error messages. Stakeholders provided feedback, expressing frustration with the unpredictable behavior of elements like error messages.

Why?

Users encountered different styles and behaviors for similar components, causing confusion. Further feedback from stakeholders highlighted frustration with the unpredictable behavior such as error messages. Stakeholders provided feedback, expressing frustration with the unpredictable behavior of elements like error messages.

Collecting findings

To understand design constraints in our design system

I gathered the team to delve into their experiences to uncover specific challenges they faced when applying existing components. By understanding these challenges and the adaptations they made, we can better guide improvements.

Collecting findings

To understand design constraints in our design system

I gathered the team to delve into their experiences to uncover specific challenges they faced when applying existing components. By understanding these challenges and the adaptations they made, we can better guide improvements.

Collecting findings

I gathered the team to delve into their experiences to uncover specific challenges they faced when applying existing components. By understanding these challenges and the adaptations they made, we can better guide improvements.

To ensure design consistency across a large design team while navigating conflicting requirements from multiple product owners.

→ our goal

To ensure design consistency across a large design team while navigating conflicting requirements from multiple product owners.

→ our goal

To ensure design consistency across a large design team while navigating conflicting requirements from multiple product owners.

→ our goal

The approach

Establishing Design Patterns that can be reused across various applications

The approach

Establishing Design Patterns that can be reused across various applications

The approach

Establishing Design Patterns that can be reused across various applications

01

Establishing Governance and Documentation for Design Patterns and Design System

This involves setting clear documentation practices, adopting a single, centralised repository as the source-of-truth for design-related information, and demonstrating its practical application. This promotes consistency across projects and facilitates collaboration and knowledge sharing among team members.

01

Establishing Governance and Documentation for Design Patterns and Design System

This involves setting clear documentation practices, adopting a single, centralised repository as the source-of-truth for design-related information, and demonstrating its practical application. This promotes consistency across projects and facilitates collaboration and knowledge sharing among team members.

01

This involves setting clear documentation practices, adopting a single, centralised repository as the source-of-truth for design-related information, and demonstrating its practical application. This promotes consistency across projects and facilitates collaboration and knowledge sharing among team members.

02

Managing the Design System Enhancement Request Process Flow

Concurrently, our goal is to continually improve the design system to meet evolving needs. Creating a step-by-step guide on how the design team addresses situations where the design library does not meet the product team’s requirements. This includes maintaining open communication with both the internal team and clients to discuss any necessary changes to the design system.

02

Managing the Design System Enhancement Request Process Flow

Concurrently, our goal is to continually improve the design system to meet evolving needs. Creating a step-by-step guide on how the design team addresses situations where the design library does not meet the product team’s requirements. This includes maintaining open communication with both the internal team and clients to discuss any necessary changes to the design system.

02

Concurrently, our goal is to continually improve the design system to meet evolving needs. Creating a step-by-step guide on how the design team addresses situations where the design library does not meet the product team’s requirements. This includes maintaining open communication with both the internal team and clients to discuss any necessary changes to the design system.

My Learnings

To improve your team's efficiency and ensure a high level of design consistency in your projects,

  1. Establish clear design guidelines. Have well-documented and accessible guidelines. It will be helpful to conduct alignment sessions that ensured every team member fully understood and apply the new guidelines.

  2. Engage the entire team. Focusing on clear communication and quality control. Make sure everyone, from designers to developers, understands the importance of consistency. With that we minimised rework.

My Learnings

To improve your team's efficiency and ensure a high level of design consistency in your projects,

  1. Establish clear design guidelines. Have well-documented and accessible guidelines. It will be helpful to conduct alignment sessions that ensured every team member fully understood and apply the new guidelines.

  2. Engage the entire team. Focusing on clear communication and quality control. Make sure everyone, from designers to developers, understands the importance of consistency. With that we minimised rework.

My Learnings

To improve your team's efficiency and ensure a high level of design consistency in your projects,

  1. Establish clear design guidelines. Have well-documented and accessible guidelines. It will be helpful to conduct alignment sessions that ensured every team member fully understood and apply the new guidelines.

  2. Engage the entire team. Focusing on clear communication and quality control. Make sure everyone, from designers to developers, understands the importance of consistency. With that we minimised rework.

Let's collaborate on crafting experiences that make a difference.

I made this with Framer

Let's collaborate on crafting experiences that make a difference.

I made this with Framer

Let's collaborate on crafting experiences that make a difference.

I made this with Framer