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.
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.
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.
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.
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.
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.
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.
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.
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.
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.