Skip to content

Morgan Stanley

Advisor, Team, and Branch Web Platform Design

Two tablets, a phone and a laptop on a blue background showing Morgan Stanley microsites: the Oxwaki Valley Branch page, The Delta Wing Group team page, advisor Poloma Prescott’s profile and a “Services We Provide” grid.

Introduction

One component library, an entire network of microsites. Its atomic structure generates seven localized microsite types — including advisor, group, branch, complex, brand, and location finder — each resolving across six breakpoints from a single source.

Role
Lead UX Designer, Design System Architecture
Scope
Component system and responsive library spanning seven page archetypes, including location finder.
Client
Morgan Stanley
Tags
Design Systems, Component Architecture, Responsive Design, Financial Services, Accessibility, Interaction
Angled composition of Morgan Stanley Oxwaki Valley Branch pages on a blue background: the branch header with an appointment button, a services list, a team section and More From Morgan Stanley cards.

Accessible & Inclusive

Accessibility governed the work: WCAG 2.1 AA compliance, semantic color tokens, per-archetype focus order, tested screen-reader behavior, and contrast re-verified through every palette change.

Phone showing the Granite District Complex branch page, with call and directions links, branch contact details and a Schedule an Appointment button.
Tablet in landscape showing the More From Morgan Stanley section, with article cards on mobile banking and Reserved living and giving benefits.
Laptop showing the Granite District Complex branch page, with a video of a city skyline and a list of services.
Angled composition of Morgan Stanley advisor pages on a purple background: Poloma Prescott’s profile header, her mission statement and services, and a Global Investments Office Portfolio Insights panel.

Repeatability

Reuse kept the platform consistent at scale, one component fix reaching every instance across two thousand placements.

Tablet in landscape showing an advisor’s More From Morgan Stanley section, with a mountain lake photo, a Let’s Talk About You card and a Contact Me button.
Laptop showing Poloma Prescott’s advisor profile header, with her title, phone number, social links and a Contact Me button.
Phone showing the Global Investments Office Portfolio Insights panel above a Business Planning card.
Tablet, phone and laptop on a teal background showing The Delta Wing Group private wealth management team page, with its mission statement and skyscraper photography.
Phone in landscape showing a Contact Me invitation above a market ticker with Nasdaq, Dow and S&P 500 changes.
Laptop showing The Delta Wing Group page, with section tabs, a Managing Wealth, Making a Difference introduction and a list of services.
Laptop, tablet and phone on a dark teal background showing The Kito Khan Group financial advisor team page, with contact details, a video and a mission statement.
Tablet in landscape showing a grid of Morgan Stanley article cards, including cash back rewards, ideas that could add alpha and cybersecurity resources.
Phone in landscape showing a “Where will this summer take you?” card about budgeting tools, beside a photo of a fairground ride.
Laptop, tablet and phone on a green background showing the Graystone Consulting page, with an aerial ocean header and client asset figures.
Tablet in landscape showing Graystone Consulting’s Services We Provide grid: philanthropy, endowment, institutional investment and impact consulting.
Phone showing a Public & Private Corporations card beneath a photo of a wind turbine.

About Morgan Stanley

I led UX/UI design for the Morgan Stanley advisor web platform and engineered the design system. One component library — atomic structure and layered on a shared base — generates seven page archetypes on the platform, including advisor, group, branch, complex, brand, and location finder. Each module resolves across six breakpoints, so a single source covers the full responsive range.

Repeatable components, pattern and interaction guidelines, and accessibility standards governed the system. Semantic color tokens aligned to industry standard, and every combination cleared contrast, re-verified each time the client revised the palette. Focus order and screen-reader behavior shipped as tested specifications. Reuse and versioned, tested changes held the platform consistent — one fix to a component propagated to every instance, over two thousand across the platform.

Accessibility
  • Ensuring WCAG 2.1 AA compliance was foundational.
  • Semantic color tokens aligned to industry standard.
  • Focus order specified per archetype.
  • Screen-reader behavior documented and tested.
  • Contrast re-verified across every palette revision.
Design System
  • 750+ component library, atomic architecture: Atom, Element, Unit, Module, Section.
  • Seven page archetypes, including location finder, generated from one system.
  • Six-breakpoint responsive scale authored per module.
  • Components layer engineered on a shared base library - 2,000+ reusable instances.
  • Token-first color: neutral ramp, brand primaries, semantic error and success.
Tools
  • Figma
  • Sketch
  • Github
Back to UX Design