> UX_REDESIGN // CASE_STUDY // FINSERVE // 18_FRAMES

FINSERVE — Same three tabs.
A completely different afternoon.

Finserve is the back office mutual fund distributors use to onboard clients, place orders on BSE StAR MF and plan goals. It worked. It was also built in 2019, and it showed. I rebuilt the UX of 34 screens and didn’t move a single thing advisors already knew where to find.

[ ROLE ]
Sole product designer · ~3 months
[ PRODUCT ]
Mutual fund distributor platform · Fintech
[ SCOPE ]
34 screens + design system · Dark theme
[ NOTE ]
NDA · old UI shown greyscale and unbranded
Case Study Format: 18 frames in 6 chapters. Click any frame to inspect it in full resolution.
Start reading
CHAPTER 01

Intro

FRAME 01
FRAME 01 // 18 HERO

Same three tabs. A completely different afternoon.

Finserve is the back office mutual fund distributors use to onboard clients, place orders on BSE StAR MF and plan goals. I rebuilt the UX of 34 screens and didn’t move a single thing advisors already knew where to find.

Finserve hero: the redesigned dashboard with role, timeline, scope and process details.
Click to zoom & inspect
CHAPTER 02

The problem

FRAMES 02–04
FRAME 02 // 18 THE PROBLEM

Built in 2019. Running a 2026 business.

A distributor’s day runs on deadlines: BSE’s 3 PM cut-off, SIPs that bounce, KYC that expires. In the old product each of those lived somewhere different.

The 2019 dashboard in greyscale: ten equal cards with eye icons as the only actions.
Click to zoom & inspect
FRAME 03 // 18 A DISTRIBUTOR’S DAY

Four deadlines a day. No single place to see them.

A distributor’s day: KYC renewals, bounced SIPs, redemption calls and the BSE cut-off.
Click to zoom & inspect
FRAME 04 // 18 COMPETITOR RESEARCH

Eight tools in the Indian market. Most of them start with a report.

Where Finserve does it differently: it starts with the day, not the report, and every number has a button.

Competitor research comparing eight Indian mutual fund distributor tools.
Click to zoom & inspect
CHAPTER 03

Process & decisions

FRAMES 05–09
FRAME 05 // 18 PROCESS

Design thinking, and the moment the plan broke

The old product didn’t have a feature problem. It had a “what next?” problem.

Design thinking process from empathise to test, and where the plan changed.
Click to zoom & inspect
FRAME 06 // 18 NUMBER → NEXT ACTION

Every number gets a verb.

Examples of numbers paired with actions: bounced SIPs, client birthdays, rejected orders.
Click to zoom & inspect
FRAME 07 // 18 FORKS

Reskin it, rebuild it, or keep the map and rebuild the roads?

Three options weighed: reskin the 2019 layout, rebuild the IA from scratch, or keep Client info / Invest / Plans and rebuild every flow beneath them.

Three design directions compared, with the chosen one highlighted.
Click to zoom & inspect
FRAME 08 // 18 KEPT THE MAP, REBUILT THE ROADS

The map stayed. Every road underneath it is new.

The three top-level modules, Client info, Invest and Plans, kept from the old product.
Click to zoom & inspect
FRAME 09 // 18 USER FLOW

One morning, three jobs.

The advisor signs in, reads the brief, and branches into one of three jobs. Red paths are the failures the old product left to memory.

User flow from sign-in to the morning brief, branching into three jobs with failure paths.
Click to zoom & inspect
CHAPTER 04

Before / after

FRAMES 10–13
FRAME 10 // 18 BEFORE / AFTER: DASHBOARD

From ten equal cards to a morning that tells you where to start

Same data, new reading order: what needs action today, then the four numbers that define the book, then trends, then lists.

Dashboard before and after the redesign.
Click to zoom & inspect
FRAME 11 // 18 BEFORE / AFTER: ONBOARDING

One crowded page became four guided steps

The old page nested three tabs inside the first of four BSE steps. Now each step has one job.

Client onboarding before and after the redesign.
Click to zoom & inspect
FRAME 12 // 18 BEFORE / AFTER: LOGIN

A quieter front door

The first screen of the day should take three seconds. The old one competed with its own background.

Login screen before and after the redesign.
Click to zoom & inspect
FRAME 13 // 18 BEFORE → AFTER IN NUMBERS

Four changes, four numbers.

Four before-and-after numbers summarising the redesign.
Click to zoom & inspect
CHAPTER 05

Craft & system

FRAMES 14–16
FRAME 14 // 18 CRAFT: FLOWS

34 screens across three modules advisors already knew

Client info, onboarding in four steps · Invest, from basket to allotment · Plans, Client 360 and goals.

Redesigned screens across the Client info, Invest and Plans modules.
Click to zoom & inspect
FRAME 15 // 18 STRUGGLE & ACCESSIBILITY

The dark theme almost didn’t ship

“Do we like dark?” is an opinion. “Does it pass WCAG?” is a decision.

Contrast checks used to make the case for the dark theme.
Click to zoom & inspect
FRAME 16 // 18 DESIGN SYSTEM

24 colour tokens, one type scale, a component kit built for dense data

Tokens live as Figma variables with the same names in design and in CSS, so engineering can map them one to one.

Finserve Dark design system: colour tokens, type scale and components.
Click to zoom & inspect
CHAPTER 06

Proof & reflection

FRAMES 17–18
FRAME 17 // 18 PROOF

No launch metrics yet. Here’s what holds up on inspection.

Evidence for the redesign, including a 15.3:1 contrast ratio.
Click to zoom & inspect
FRAME 18 // 18 AFTER

What I’d do differently

Bring the audit first. Thanks for scrolling.

Reflection on what to do differently, and thank you.
Click to zoom & inspect