Role
Product designer
Timeline
Jul - Aug 2023
Industry
Banking, Fintech
Streamlining hierarchies and boosting transparency & performance for enterprise brokers
Overview
HDFC Bank, one of India’s leading financial institutions, serves over 43 million customers and continues to push the boundaries in digital banking. To support their internal teams, we developed a robust web application that enables seamless lead tracking, unit-wise analytics, payout insights, invoice management, and lead drop-off monitoring.
As the product designer, I led the UI design process—crafting a cohesive mood board and scalable design system. I also took ownership of the UX for the organisation section, simplifying navigation and driving operational efficiency across teams.
Challenges
HDFC’s enterprise brokers juggled large teams, but their tools weren’t built for scale.
Leads were scattered, performance data lacked clarity, and access controls were messy and manual. The challenge: Streamline hierarchy and performance management without adding complexity.
Goals
The goal was to design an internal tool that streamlines operations, boosts lead conversions, and delivers actionable insights for data-driven decisions.
It aimed to empower teams with better visibility and performance tracking across units.
The project was scoped to be completed within a specified 30-day timeframe, including research, design, and final presentation.
IMAGE 1.1
Project Timeline
How do we achieve our goals?
User analysis
To design effectively, we followed a data-driven approach to understand how HDFC’s internal users interacted with existing tools.
By tracking behaviours and identifying usage patterns, we uncovered key pain points and user needs. These insights shaped detailed personas and guided feature development, ensuring a more intuitive, user-centric experience.
IMAGE 2.1
Age Distribution
IMAGE 2.2
Define Problem
Web app Architecture
Before diving into the design process, we began by mapping out all the key features and their functional details to align with the needs of HDFC’s internal teams. This step was crucial in understanding how different users—brokers, managers, and operations staff—would interact with the system. It ensured that the user flows we designed were efficient, intuitive, and grounded in both business objectives and real-world usage scenarios.
IMAGE 2.3
Information Architecture
Wireframes
To enhance hierarchy management, we focused on designing the organisation chart—a key tool for brokers managing complex teams. Over three wireframe iterations, we refined how reporting structures were visualised, navigation simplified, and access streamlined. Guided by stakeholder feedback and usability insights, the final design delivers clarity, scalability, and effortless control, empowering brokers to lead with confidence.
IMAGE 2.4
Organisation Setup UX Wireframes
Crafting clarity through engaging design
Reusable components
The design process started with creating reusable components like buttons and text inputs to streamline high-fidelity design development. During this phase, we selected a colour scheme aligned with the HDFC's brand and ensured every element met accessibility standards.
IMAGE 3.1
Reusable Components
Hi-fi designs
Design began by translating collected data into visual layouts, followed by multiple iterations for each page. We believe the first design is rarely the best, so ongoing refinement helped create a user-friendly and effective final product.
GIF 3.2
Org Builder Setup
IMAGE 3.3
High-Fidelity Designs
GIF 3.4
HDFC BSA Webdesk
Handoff & build
Documentation
In this collection, you’ll find design files, wireframes, UI elements, and detailed documentation developed for the HDFC internal web app. It serves as a clear guide to our design decisions and a valuable resource for both stakeholders and the development team.
IMAGE 4.1
Style Guide
