● UI/UX Case Study — Wealth Management

Morgan Stanley
Margin Lending
Portal

Client Morgan Stanley (via Capgemini India)
Year 2012 – 2013
My Role UI Functional Lead
Domain Wealth Management — Margin Lending
Wealth Management Dual-Persona UX Web App

Designed a dual-persona portal for high-net-worth clients and their Morgan Stanley advisors — 55 screens, a 3-tier margin call alert system, and a Portfolio Health widget that became the most-used feature per post-launch user feedback.

Project Overview

Premium UX for High-Net-Worth Wealth Management

The Margin Lending Portal was a client-facing and relationship-manager-facing web application enabling high-net-worth clients and their Morgan Stanley advisors to manage margin loan facilities. The portal allowed users to view available credit, initiate drawdowns, monitor collateral positions, and receive alerts on margin calls. Given the premium wealth management context, the design language needed to project trust, clarity, and confidence — quite different from the utilitarian RIMS system I had worked on previously.

The project was facilitated remotely with wealth management product teams based in Sydney, Australia. The dual-persona nature of the product was its defining UX challenge: both Relationship Managers (RMs) and their clients accessed the same underlying data, but required entirely different information hierarchies and action sets. An RM needed to see all clients at a glance, monitor margin call risk, and act quickly. A client needed a clear, simple view of their own portfolio health and credit position.

My Role & Team

End-to-End Ownership of Both Personas

My Title UI Functional Lead
Client Team Wealth Management Product, Sydney
Delivery Team Capgemini Pune — BA + 5 Java developers
Screens Designed 55 (RM Portal + Client Portal)
Mentored 2 junior UI designers
HTML / CSS JavaScript Java JSP IE8+ / Firefox / Chrome Axure RP MS Visio Agile Sprints
Design Process

Two Personas, One Coherent System

🔍 01
Discovery
Remote sessions with Sydney WM product team. Mapped RM vs Client workflows. Identified 8 critical margin call scenarios.
👤 02
Define
Two user persona documents: Relationship Manager and HNW Client. Separate IA and navigation hierarchies for each. Shared data model.
✏️ 03
Design
55 screens across RM Dashboard, Client Self-Service, drawdown flow, alert system. Pure HTML/CSS interactive prototype for demos.
🧪 04
Test
HTML prototype demos with Sydney stakeholders. Internal usability review with 3 Capgemini BAs acting as proxy users. Iteration across 4 review cycles.
🚀 05
Deliver
UI spec + component guide (22 components). Pattern library — first formal design documentation in this Capgemini team. Handoff to dev team.
Key Contributions

What I Built and Delivered

  • 01
    Designed both the RM Dashboard and Client Self-Service portal — 55 screens

    Owned end-to-end UI design from discovery through handoff. The RM portal gave advisors a portfolio-level view of all client facilities; the Client portal gave HNW clients a focused, simplified view of their own credit position.

  • 02
    Designed the 3-tier Margin Call Alert system

    Designed a persistent alert banner system with three severity tiers: Watch (amber), Warning (orange), and Call (red). Each tier had distinct visual treatment, escalation messaging, and a linked action panel. RMs could see all at-risk clients at a glance and act from the same screen.

  • 03
    Facilitated remote requirements sessions with Sydney product team

    Led structured requirements sessions with the Sydney-based wealth management product team and Pune-based BAs. Bridged cultural and timezone communication gaps across a 4.5-hour time difference with async documentation and weekly live calls.

  • 04
    Built an interactive HTML/CSS prototype (no JS framework) for stakeholder demos

    Created a clickable HTML prototype of the RM dashboard and drawdown flow using pure HTML tables and CSS — no JavaScript framework. Allowed Sydney stakeholders to experience the actual browser UI rather than static screenshots during review calls.

  • 05
    Designed the Portfolio Health summary widget

    Conceptualized and designed a single-panel widget showing collateral value vs. loan balance vs. available credit as proportional bars — giving both RMs and clients an instant health assessment without needing to read tables of numbers.

  • 06
    Established the first formal UI component documentation for the team

    Produced a 22-component pattern library document — the first formal UI component documentation in the Capgemini/MS engagement. Covered usage rules, states, and HTML/CSS snippets. Reduced design inconsistency and dev rework measurably.

  • 07
    Mentored 2 junior UI designers

    Reviewed screen outputs from 2 junior designers, aligned them to the design system standards, and ran weekly 1:1 design critique sessions. One junior designer went on to lead their own module within 6 months.

UI Screens

Wealth Management Portal — 2012–2013

Morgan Stanley Margin Lending — UI Screen
Key UX Decisions

Design Thinking That Shaped the Product

DECISION 01

3-Tier Margin Call Alert Severity

Margin calls are high-stakes, time-sensitive events. The original requirement was a binary "alert / no alert" system. I pushed for a 3-tier model: Watch (LVR approaching limit — yellow), Warning (LVR at limit — orange), and Call (LVR exceeded — red). Each tier had distinct visual treatment, escalating urgency cues, and different action sets. RMs told us in post-launch feedback that the Watch tier alone was the most valuable feature — it gave them time to act before a situation became critical.

DECISION 02

Portfolio Health Single-Glance Widget

Early designs showed collateral, loan balance, and available credit as three separate table rows with numbers. Testing revealed that neither clients nor RMs could quickly assess "health" from numbers alone. I redesigned it as a proportional bar system where the length of each bar relative to the others conveyed the relationship instantly — a full green bar (collateral) with a tall red bar (loan) meant danger, visually, before any number was read. This widget consistently ranked as the most-used screen in post-launch user feedback.

DECISION 03

Collapsing 7 Steps Into 3

The original drawdown initiation flow had 7 steps defined by business requirements: facility eligibility check, credit availability check, amount entry, purpose selection, account selection, fee disclosure, and confirmation. I analysed which steps required user input and which were system-determined. Steps 1 (eligibility) and 2 (credit check) were automated — so I combined them into a pre-filled results screen that the user just confirmed. Steps 3, 4, and 5 shared a single screen with conditional fields. This reduced the flow to 3 actual user steps without removing any required business logic.

Outcomes & Impact

What Was Delivered

55 Screens Designed

Complete RM + Client portal coverage — from onboarding and dashboard to drawdown and alert management.

2 Distinct Personas

Separate information architectures and UX flows for Relationship Managers and HNW Clients — same data, different views.

7→3 Drawdown Steps

Drawdown flow reduced from 7 steps to 3 by combining automated checks with user-input screens — no business logic removed.

22 Documented Components

First formal component pattern library in the engagement — adopted by the broader Capgemini/MS UI team.