![](https://framerusercontent.com/images/9YPSTK1Fn8mYDpR5OcqDiSXw7lc.png?scale-down-to=2048)
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
DESIGN PHILOSOPHY
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 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 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.
![](https://framerusercontent.com/images/0yztG1l8epak8sX7xSh0GsLYO8.png)
![](https://framerusercontent.com/images/9CWhJpD2Fo9KcSRXy6uwrG24E.png)
![](https://framerusercontent.com/images/J3HVUuhSPp0CYaZQeAgB2KRC0.png)
![](https://framerusercontent.com/images/kAhDZ3HQ95NZiAE5EEXMP32aOI.png)
Glimpse of the Card Management Module
product III
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)
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.
![](https://framerusercontent.com/images/6dBozdEI0AWMfXahX2exth4SQA.png?scale-down-to=2048)
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
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.
![](https://framerusercontent.com/images/BaGRX6dnCom2jiZJDZk7blc80g.png?scale-down-to=2048)
![](https://framerusercontent.com/images/oBl0KulTq2Ro87YzVVPTbcB3lGE.png?scale-down-to=2048)
![](https://framerusercontent.com/images/dmPjKUHgLjzLGPCJHmyf6XOZEY0.png?scale-down-to=2048)
![](https://framerusercontent.com/images/ffnWVYeEFhjP21r4DwRvf1giXo.png?scale-down-to=2048)
![](https://framerusercontent.com/images/Z7KUYVf0ZmhhGHFGdXOhGcgFa8.png?scale-down-to=2048)
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