Redefined banking dashboards to enhance user adoption and retention

Redefined banking dashboards to enhance user adoption and retention

Redefined banking dashboards to enhance user adoption and retention

To transform Vegapay's financial products into user-friendly, efficient systems that banks and fintechs prefer over offline methods.

To transform Vegapay's financial products into user-friendly, efficient systems that banks and fintechs prefer over offline methods.

To transform Vegapay's financial products into user-friendly, efficient systems that banks and fintechs prefer over offline methods.

Summary

Problem:

Vegapay's complex banking dashboards were causing usability issues for clients. Users struggled with data overload, while founders wanted to provide better experience and customization in ongoing structures. The existing system was not meeting the evolving needs of banks and fintechs efficiently.


Solution:

Designed and revamped dashboards, focusing on simplicity, clear data visualization, and customization options. Implemented a scalable design system to ensure consistency across products, improving user experience and operational efficiency for diverse products.

TIMELINE

Jul - Oct 2023

TEAM

1 Design Manager

1 Designer (me)

1 Product Manager

1 Engineer

TOOLS

Figma

Figjam

Gdocs

Trello

DISCIPLINES

Visual Design

Product Strategy

Prototyping

Design System

Context

Vegapay provides a suite of products to help banks and fintechs digitize their financial infrastructure and build and manage credit and lending products. These products help banks and fintech to streamline their operations, launch new products quickly, and improve customer experience. They collaborated with Hucentric to optimize the product and design challenges.

challenges and INSIGHTS FROM TEAM

Vegapay develops complex dashboards for bankers (25-50 years).

User complaints revealed data overload and usability issues for product managers, while founders desired mobile access and customization. These insights informed Vegapay's focus on a new design for a more user-friendly and efficient experience.

Vegapay develops complex dashboards for bankers (25-50 years).

User complaints revealed data overload and usability issues for product managers, while founders desired mobile access and customization. These insights informed Vegapay's focus on a new design for a more user-friendly and efficient experience.

DESIGN PHILOSOPHY

How might we make the users adopt our product over offline means (status quo) and improve the experience to reach a wider audience?

How might we make the users adopt our product over offline means (status quo) and improve the experience to reach a wider audience?

1: Easy to Use

Make it simple to find what you need and get things done quickly to ensure a smooth experience.

2: Clear & Organized

Show you the important information in a way that's easy to understand, like charts and graphs.

3: Customizable and Scalable

Looks great and works in a way that seems more intuitive, accessible, and scalable according to the evolving needs.

Product i

Client Dashboard

Client Dashboard

Client Dashboard caters to Vegapay’s diverse clientele and assists in managing teams, resources, programs, and much more.


The product had to be introduced with multiple new features, better-optimized flows and architecture, and updated with consistent branding and design language.

Before v/s After for Bin Charter in Client Dashboard

Some more designs from the Client Dashboard

Product iI

Program Dashboard

Program Dashboard

Program is a concept that combines Vegapay's financial products into bundled packages. It offers a way to group various financial products for streamlined offerings.

The Card Management module I worked on provides banks with tools to configure and set up cards. This platform allows banks to design cards and determine what information should be presented to them.

Glimpse of the Card Management Module

product III

Corporate Card Management System (CCMS)

Corporate Card Management System (CCMS)

Designing CCMS was a sprint work of a few weeks, it was built for SBM Bank, Mumbai. It consisted of 4 dashboards — Branch, Branch Correspondent, Vendor, and Admin. 


The major function of these dashboards was to manage everything related to corporate cards, varying from ordering to assigning to inventory management.

HQ/Admin Dashboard

Onboarding

Branch Dashboard

Branch Correspondent (BC) Dashboard

Vendor Dashboard

DESIGN SYSTEM (ui kit)

Comprehensive Style and Component Library

Comprehensive Style and Component Library

I established a detailed design system on Figma to ensure consistency and facilitate future expansion — developed molecular components from atomic ones, based on existing designs within dashboards. I collaborated with engineers to make them understand the components’ interactions, designs, and edge cases.

challenges

1: Lack of Scalable Design System

Inconsistent UI patterns and the absence of a design system made it difficult to roll out updates, onboard new clients, and maintain UX quality as the platform grew.

2: UX Friction

Complexity in the interface reduces user satisfaction and trust, potentially hindering adoption and the platform's effectiveness.

3: Operational Inefficiencies

Design-development handoffs needed more clarity, potentially leading to redundancies, miscommunications, and slower time-to-market for new features.

business goals

The primary business objective was to enhance Vegapay's scalability and operational efficiency through a well-defined design system. This would facilitate faster feature development, reduce redundancy, and improve collaboration between designers and developers, ultimately increasing user satisfaction and engagement.

The primary business objective was to enhance Vegapay's scalability and operational efficiency through a well-defined design system. This would facilitate faster feature development, reduce redundancy, and improve collaboration between designers and developers, ultimately increasing user satisfaction and engagement.

Solution

The hierarchy progresses from basic elements to more complex ones:

1: Foundations

This is the groundwork, including accessible color styles, spacing systems, a grid system for layout, and well-defined type options.

2: Atoms

These are the essential building blocks like buttons, input fields, toggles, and switches.

3: Molecules

Imagine these as simple components built by combining atoms. Examples include cards and dashboard widgets.

Atomic Design's building blocks created a scalable foundation for Vegapay's design system, ensuring consistency across products. The Lean UX process, focusing on rapid user testing and iteration, kept the system efficient and user-centered. This approach balanced scalability, development speed, and user needs.

Atomic Design's building blocks created a scalable foundation for Vegapay's design system, ensuring consistency across products. The Lean UX process, focusing on rapid user testing and iteration, kept the system efficient and user-centered. This approach balanced scalability, development speed, and user needs.

learnings

1: Simplification of complex systems

How to streamline complex financial dashboards for better usability.

2: Cross-functional collaboration

Working effectively with product managers, engineers, and other team members.

3: Balancing multiple stakeholder needs

Addressing user complaints while meeting founders' requirements.

4: Rapid prototyping

Designing and iterating quickly, especially for sprint work like the CCMS project.

impact and key metrics

  • Harmonized product themes and branding, reducing design inconsistencies by XX%

  • Decreased user drop-off rate by XX% within the first-month post-launch

  • Developed a comprehensive UI kit integrating existing products, boosting development efficiency by XX%


*Metrics are kept confidential

  • Harmonized product themes and branding, reducing design inconsistencies by XX%

  • Decreased user drop-off rate by XX% within the first-month post-launch

  • Developed a comprehensive UI kit integrating existing products, boosting development efficiency by XX%


*Metrics are kept confidential

  • Harmonized product themes and branding, reducing design inconsistencies by XX%

  • Decreased user drop-off rate by XX% within the first-month post-launch

  • Developed a comprehensive UI kit integrating existing products, boosting development efficiency by XX%


*Metrics are kept confidential

Divyansh Pareek © 2024

|

10:10 AM

Divyansh Pareek © 2024

|

10:10 AM