Graduation Project · Brand & Visual Design · NID Ahmedabad · 2023

MSFL

Reimagining a financial brand for the next generation

Role

UX/UI & Brand Designer

Context

NID Graduation Project

Sponsor

Marwadi Shares & Finance Ltd.

Timeline

Feb 2023 – Oct 2023

Tools

Figma · Adobe XD · InDesign

A comprehensive brand reimagining and UX transformation for one of India's oldest stock brokerages — spanning visual identity, a Diwali campaign, email design systems, and a complete Demat account journey overhaul. Graduation project at National Institute of Design, Ahmedabad.

View Demat Journey Read the process

01 · The Brief

A legacy brand meets a digital-first India

Marwadi Shares and Finance Limited (MSFL) was founded in 1992 and grew into one of Gujarat's most trusted stock brokerages. By 2023, the Indian stock market was being redefined by Zerodha, Groww, and Angel One — digital-native platforms built for a younger, mobile-first generation. MSFL needed more than a refresh. It needed a reimagining.

Challenge

Brand trust

Long-standing customers, brokers, and sub-brokers were shifting to younger digital platforms. The brand felt dated against digital-first competitors targeting the youth.

Challenge

Drop-offs in onboarding

The Demat account opening process claimed to take 5 minutes but regularly consumed 35+ minutes, causing significant user abandonment at multiple points.

Challenge

Campaign underperformance

Advertising campaigns were underperforming in generating new leads, especially outside Gujarat. No consistent visual language existed across channels.

02 · Research

Understanding the market and the audience

The research phase combined primary and secondary methods — analysing MSFL’s internal data, benchmarking against leading platforms including Groww, HDFC Securities, Dhan, and Zerodha, and building investor personas grounded in real behavioural patterns.

Audience insights

Finding

Youth-skewed engagement

The 21–30 age group showed greater platform engagement than the 31–50 bracket combined. Mobile-first design was non-negotiable.

Finding

5:1 gender imbalance

Male users outnumbered female users 5:1 — signalling an untapped opportunity for inclusive financial communication and product design.

Finding

Gujarat-centric reach

Audience engagement declined significantly beyond Gujarat, despite presence in Maharashtra and Rajasthan — a core expansion challenge.

User personas

Persona 1

The Strategic Investor

Rajendra, 42. Senior manager in Mumbai. Values brand reputation, research depth, and long-term portfolio management. Uses HDFC Securities.

Persona 2

The Aspiring Investor

Aman, 25. Content writer in Ranchi. New to investing, prefers simple UX and low fees. Uses Zerodha for its educational resources.

Persona 3

The Trusting Investor

Rajesh, 60. Retired government employee in Jaipur. Invests through his MSFL sub-broker. Values personal relationships over digital convenience.

03 · Visual Identity

Elevating the brand language

MSFL’s existing brand guidelines specified Roboto as the typeface and defined a colour system, but lacked hierarchy rules, spacing standards, or a digital design system. The visual identity work elevated these foundations — clarifying typographic hierarchy, refining colour application, and creating consistency across touchpoints.

Typography

Roboto — defined hierarchy

Roboto Light for headings, Roboto Regular for body copy. Weight and sizing rules established for the first time across all digital and print assets.

Primary Colour

Marwadi Blue #007DC5

Core brand colour applied with discipline across all digital channels. Paired with Occur Yellow #FFB623 for energy and warmth in campaign materials.

Design System

300+ Figma screens

MSFL had no design system. This project created the first — components, spacing tokens, colour variables, and interaction patterns ready for handoff.

04 · Campaign

Nivesh Ka Shubh Aarambh

The first major deliverable was a Diwali season investment campaign — “Auspicious Beginnings of Investment.” The strategy leveraged India’s festival of prosperity to create an emotional entry point for new investors, running across Facebook, Instagram, Zee Business TV, Google Ads, and Gujarat Mirror newspaper.

Outcome

Highest leads generated

The campaign delivered more new customer leads than any other MSFL campaign at the time of launch — validating the culturally-resonant creative strategy.

Creative

Bull & Bear Rangoli

An illustrated bull and bear set within a Diwali rangoli — connecting financial symbolism with cultural celebration in a single, memorable image.

Channels

5-platform rollout

Facebook, Instagram, Zee Business TV, Google Ads, and Gujarat Mirror — each adapted to platform-specific formats and audience expectations.

05 · Email Design

Making the inbox work harder

Research showed email recipients have a 50ms attention window and roughly 11 seconds to engage with the full message — and 50% access email on mobile. MSFL’s existing emails were long, text-heavy, and unattractive. The redesigned system prioritised immediate visual impact, personalisation, and mobile-first layouts with optimised animated GIFs.

Design decision

Animated GIFs, optimised

GIFs kept short and load-optimised — delivering motion and personality without penalising users on slower mobile connections.

Design decision

Smartcase product launch

Featured emailer for MSFL’s AI-driven research advisory SaaS — positioned as a portfolio empowerment tool for classic Demat account holders.

Design decision

Reader-centric framing

Emails reframed around the user’s specific need, not the product feature — using personalised subject lines and value-first content hierarchy.

06 · Demat Account Journey

Redesigning the account opening flow

The pivotal project deliverable — a complete overhaul of the Demat account opening process. The existing flow claimed to take 5 minutes but regularly consumed 35+ minutes. Document uploads were cumbersome, email confirmations created breaks in flow, and the overall UX led to significant drop-offs at multiple points.

The 9-step journey

Steps 1–3

Verification

Mobile number verification → Email + referral code → KYC verification. Streamlined to minimise context-switching and unnecessary confirmations.

Steps 4–6

Account setup

KYC details → Plan & segment selection → Bank verification. Cancelled cheque upload replaced with digital bank confirmation.

Steps 7–9

Completion

Document uploads → Account review → Aadhaar e-Sign. A single e-sign at the end replaced multiple signature steps throughout the flow.

07 · Design Iterations

300+ screens. Two iterations. One winner.

After wireframes were completed in Adobe XD using a mobile-first approach, design moved to Figma where two distinct visual iterations were developed — each proposing a different take on colour usage and component placement across 300+ screens.

Iteration 1 — Rejected

Vibrant blue

Heavy use of Marwadi Blue throughout — sophisticated and brand-forward, but vibrant backgrounds created legibility issues with thin text for older users.

Iteration 2 — Selected

Clean and accessible

Non-white background with clear text. Elements correctly positioned on the status bar. Simpler, more accessible, with better readability across all age groups.

Why it won

Accessibility + efficiency

Optimised micro-steps brought key actions within closer reach. Desktop designs extended the same system — mobile-first, scaled up.

08 · Outcomes

What shipped

Impact

~45% reduction in UX steps

The redesigned Demat journey cut user actions by nearly half compared to the original flow, with zero compromise on SEBI compliance requirements.

Impact

Highest-ever campaign leads

The Nivesh Ka Shubh Aarambh Diwali campaign delivered the highest number of new leads compared to any previous MSFL campaign at the time.

Impact

First design system for MSFL

300+ Figma screens became the foundation of MSFL’s first-ever design system — components, tokens, and patterns for all future digital work.

Key learnings

Learning 01

Design both sides of the table

Products must balance business constraints and user needs equally. Customer-only benefits aren’t sustainable; business-only constraints produce products nobody uses.

Learning 02

Steps vs. cognitive load

It’s not the number of steps that matters — it’s the time and mental effort required. A 9-step flow can feel instant if each step is clear and purposeful.

Learning 03

Domain experts are gold

Regular consultation with Gaurav Bhojak and the MSFL leadership surfaced constraints and context that no desk research alone could have revealed.

09 · Reflection

What this project taught me

Reflection

🏦 Financial design demands trust

Every decision — colour, copy, layout — carries the weight of someone’s money. Users don’t experiment with financial apps; they judge them in seconds and leave.

Reflection

🎯 Brand and UX are one conversation

Separating brand identity work from UX design creates inconsistency. The most impactful moments came when both disciplines actively informed each other.

Reflection

📐 Systems over screens

Designing 300+ screens taught me that the real work is the system underneath. Once components and rules are right, individual screens become fast and consistent.

Reflection

🇮🇳 Context is everything in India

India’s diversity of trust, language, age, and digital literacy means no single pattern works universally. MSFL’s audience demanded regional sensitivity at every touchpoint.

Talk to me about this View all projects