UX Lead · Product Owner
BNY Mellon
Pershing X
Advisory Experience Platform
A complex financial advisory platform used by wealth managers and advisors to plan, propose, and manage client portfolios. Redesigned end-to-end across three parallel workstreams.
Role
UX Lead / Product Owner
Mentored Jr. + Assoc. UX designers
Agency
Publicis Sapient
Client
BNY Mellon — Pershing
Advisor & Wealth Management
Competencies
IA · UX · Design Systems
Product Strategy · Navigation
User & Data Flows
Use Case 1
Pershing Account — Managed
Existing client. Single and multi-account scenarios. Full managed account opening flow with proposal, investment type, and attribute collection.
Use Case 2
Client Onboarding — Convert to Managed
Converting an existing standard account to managed. External custodial accounts. New client onboarding with KYC/EDT requirements.
Use Case 3
Direct Indexing
Bespoke Basket creation, Intelligent Indexing, S&P500 customization, backtesting and portfolio analytics. Multi-model, multi-path workflow.
Engagement Arc
01
Product Audit
Every screen, table,
modal & nav catalogued
02
Heuristic Analysis
Pain points → palette
of viable ways forward
03
Use Cases
3 primary scenarios
with all stakeholders
04
Design System
Atomic, modular, WCAG.
Tables, forms, nav, flows
05
Flows + Navigation
Current vs proposed,
IA, nav schema, POC
06
Direct Indexing
Bespoke Basket + BL/WL,
Backtesting, shipped
"Build it well, document it clearly, but don't marry it."
— Zack Gort · Design System philosophy on the BNY Mellon / Pershing X engagement
Artifacts
24
Screens documented
Workstreams
3
Parallel pipelines
Platform
Wove
BNY Mellon / Pershing X
Phase
Shipped
Design system + DI flows
Role
UX Lead
Product Owner · Publicis Sapient
DOCUMENTED PHASE COVERAGE
Core Flows
Research
Stakeholder
Design System
Navigation + IA
01 · Core Flow
Opening a Managed Account
5-phase flow: overview, account opening, proposal selection, investment details, attributes
02 · Strategy
Key Takeaways & Opportunities
Workflow issues, workstation concept, card system paradigm, data display rethink
03 · Design System
Table Reskin Scenarios
Figma/HTML structure analysis, checkbox column, strict vs flexible reskin paths
04 · Design System
Elevation: Tables + Buttons
Table build overview, form fields, dropdowns, toggles, button anatomy + color
07 · Research
Roles & Responsibilities
Whiteboard capture: Christopher, Eileen, Isabella, Zack — conversational UX mandate
08 · Strategy
Workstation & Card System
Two key opportunities: consistent workspace + card-centric data paradigm
09 · Features
Features to Consider
Panels as workspace, conversational UX naturalization patterns
10 · Research
Account Opening Whiteboard
Client onboarding, let's get started, add account detail, direct-to-managed scenarios
11 · Stakeholder
Ralph's Brief
High-level user flows, can/cannot change list, key impact areas, deliverables
12 · Concept
Lift Diagrams
Manual entry vs preload lift curves — cognitive effort visualization
13 · Audit
Current Flow Inventory
Screenshots + old flowchart inventory of existing account opening experience
14 · Proposal
Current vs Proposed Flow
Side-by-side: existing account opening flow + new proposed redesign with lift curves
15 · Features
Panels + Conversational UX
Panel workspace, conversational UX, interstitial feedback, tooltips & alerts
16 · Navigation
Left Rail Navigation
Evergreen left rail, account masthead, tooltip panel, drawer/workspace exploration
17 · Navigation
Nav Expansion Concept
L1/L2/L3 navigation hierarchy, horizontal ethos, 1280px content focus area
18 · Flows
Account Opening + Direct Indexing
Client services flow map, direct indexization: landing, customize, basket, build-own
FIGMA FRAMES — ZAX SANDBOX · NODE 984-27038
8 SVG-recreated screens from the Direct Indexing workstream. Work delivered via Publicis Sapient; design system and DI flows shipped to production. Bespoke Basket flow, Panel Paradigm, Customize S&P500, Intelligent Indexing, Backtesting & Analytics.
Shipped Direct Indexing Publicis Sapient
F1 · Figma
Bespoke + BL/WL Flow
Concept scope, 3-phase creation flow, and BL/WL decision tree for security filtering
F2 · Figma
Panel with Stepper
Purple stepper bar, left-rail nav, curated whitelist selection, BL/WL ticker table
F3 · Figma
Panel Paradigm Solution
Wireframe → hi-fi: flat table → panel opens → purple filter panel → analytics
F4 · Figma
Direct Indexing — Landing
My Baskets table + 5 model entry cards: S&P500, Intelligent, Bespoke, Model, Upload
F5 · Figma
Customize S&P500
Filter controls + securities table with per-ticker BL/WL assignment
F6 · Figma
Intelligent Indexing
ESG, risk, rebalancing, tracking error questionnaire — needs stakeholder walkthrough
F7 · Figma
Bespoke Basket — 6 Screens
Strategy exclusions → settings → constraints → whitelist → table → review & submit
F8 · Figma
Backtesting & Analytics
Flow diagram + results: cumulative return chart, stats table, apply-to-portfolio CTA
01 · Core Flow
Opening a Managed Account
5-phase workflow for the managed account setup process. Use case: Pershing Account, Managed, Existing Client.
Flow Doc
Phase 05
Deliverables
Core managed account opening flow — 5-phase UX spec for the primary use case
01 Overview & Key Information
The client onboarding log ties to BNY Mellon's Portfolio Centers as an account once it has been opened. Key data pulled from FAs' existing client records.
Overview Screen
Key Info
FA Context
02 Opening a Managed Account
Navigate to: /ClientOnboarding/OpeningManaged/<ClientID>
Client List
Select Client
Open Managed Acct
Form: Basic Details
Managed Details
After you Add Managed Details — navigate to Button and proceed to Custodian. → Navigate to button/proceed and proceed to CustodianFull
03 Proposal or Investment Type Selection
Proposal Start
type?
UMA
SMA
MF
ETF
Managed
Page Tracker: Primary — 5 investment type branches from single decision point
04 Adding the Investment Details
Model Selection
UMA Details
SMA details
Table: Other Row Items
Investment type governs which detail fields appear. UMA has expanded options. SMA has fewer required fields.
05 Adding Managed Account Attributes
9-step attribute collection sequence with branching based on custodian, account type, and proposal:
Custodian Setup /
Account Type Entry
Investment Proposal
Type Selection
Select UMA / SMA
Investment type
New Funding
Source Total
Select
Trading Group
Account name...
Give Managed
Account a Name
Table Safety Check
(Duplicate Acct Alert)
Adding Sleeve
Options (SMA)
Summary Screen
(Managed Account)
02 · Strategy
Key Takeaways + Flow Overview
Complete flow inventory overview plus potential opportunities surfaced from the managed account experience audit. Two primary concepts: Workstation and Card System.
Opportunity
Phase 05
Deliverables
Full flow overview + key takeaways; workstation and card system opportunities identified
Top-Level Flow Overview
Opening a Managed Acct
Client Onboarding: Convert to Managed
Monitor your Managed Acct
Research Investments + Models
Key Takeaways
Client Onboarding: Converting an Account to Managed Account
Existing Acct
Convert to MA
Proposal Select
MA Attributes
Submit
Existing client data pre-filled Fewer steps than new open
Monitoring your Managed Account
MA Dashboard
Performance
/
Holdings
/
Activity
Alerts + Notifs
Take Action
READ ONLY optimized view
Researching Investments + Models for Managed Accounts
Model Catalog
Filter + Search
Model Detail
Compare
Select → Proposal
UMA / SMA / ETF / MF Compare up to 3 models
PHASE PROGRESSION — SYSTEM-WIDE
Prospect / Client
Account Opening
Proposal + Investment
MA Attributes
Submit + Custodian
Monitor + Research
1 "A table to write on" — Consistent Workstation

Workflows are embedded within table constructs. Instructions are sometimes clear, but actions are often obfuscated behind a button or interaction.

Consider leveraging an overlapping Panel System (Drawer, side-modal) — any time there is a user task, provide a consistent platform/paradigm (think panel/drawer) for the user to accomplish the task at hand.

"Sidebar: this was inspired by the rear-hatch of my Jeep — I could use the rear trunk as a workspace, but I need a consistent fold-out table that attaches to the rear hatch."
Workflow Issues (Current)
  • Table data and performing actions affecting said data are intermixed within existing HTML table structures
  • Tasks/User Actions are not always intuitive or clear; user-action sequencing is obfuscated behind a button/interaction
  • Limited to none in the way of help/utility (tooltips) or instructional context
Key Benefits — Dedicated Workspace
  • Simplified tables optimized for viewing (removing baked-in workflows)
  • Separating READ ONLY data: optimize for display viewing
  • Layer atop a modal (drawer/panel/etc) for focused workarea/taskarea
  • Leverage tooltips and nested panels for additional context / instructions / links to resources
  • With simple and efficient tables, comes room for optimization and bona fide feature development
2 "If it's in the cards!" — Card System

Consider how we approach and deliver data through a card system. Identify key data sets based on user behaviors — think: daily workflows/tasks.

Using that, create components around those focused data sets that we call into a card-centric UI paradigm.

NEST cards within Tables
An HTML table nested within our card (as shown) isn't perfect — but this isn't a perfect example.
Data Display Issues (Current)
  • All data is housed and displayed in tables, engineered to accommodate all viewing and utility needs the user may have
  • Workflows are designed/engineered to exist within these table constructs; logical paths/solutions created by product developers may not align with users' product expectations
Key Benefits — Card System
  • Focused information backed by UX and engineering logic
  • Reimagined/refactored filtering system, based on 'data as components' ethos
  • Future-ready: as in, tablets or phones, or clouds
Results: Will ideally lessen "cognitive overload" as we might experience vis-a-vis a table-centric user experience. We can still print things or otherwise save out as tables.
03 · Design System
Table Reskin Scenarios
Analysis of Figma component structure vs. HTML markup reality for the Pending Service Orders table. Two implementation paths.
Design System
Phase 05
Design System
Table reskin analysis; Figma/HTML structure comparison; two implementation scenarios
Original Table Structure (Screenshot Reference)
☐ Date Received Actions Due Date Service Order # Account # IP/IP Team Order Type Request Status ✎ Task Task Details
☐01/15/2024—01/22SO-2241ACC-8832Team AStandardPending✎ReviewAwaiting approval
☐01/16/2024—01/23SO-2242ACC-9910Team BExpeditedIn Progress✎SubmitMissing docs

We are able to affect the ordering of columns on an as-per (ad hoc) basis. Given that capability, we decided to move the checkbox to the first column position.

Figma Build / HTML Structure Match

Please take notice that the checkbox is contained in its own individual container cell. We have matched the HTML table structure with our 'reskin components'.

☐ checkbox
(own cell)
Date Rec.
Actions
Due Date
SO#
Acct #
IP/IP Team

Simply put, this means we were able to adjust color of cell borders and fill, the icon sprite, the padding therein, and for fields with text, the font used for those.

OS Library Table Headers (Built without real-life context)

Mental delineation needed for FIGMA/DESIGNER PROCESSES versus FUNCTIONAL/REAL LIFE PARAMETERS:

Appearances are deceiving. Sure, these both have a checkbox and font/type. But while the Portfolio Reskin tracks may share header sort functionality, that function is mapped to different things (chevron vs text link) — which would require markup and backend changes.

This particular screen requires 11 columns but per the FIGMA PROCESS used to create generic base tables, it is unable to accommodate that need without a refactoring from a FIGMA/DESIGN standpoint (i.e. detach and customize).

We'll need to detach and customize for every single component used.
Process note: V0 and V1 terminology lists were iterated in tandem with actual screen designs to validate language decisions — working directly with a UX copywriter embedded in the client team. These reskin scenarios emerged from that cross-functional alignment process.
Scenario 1
Strictly Reskin

Maintain current Figma component structure as-is. Apply brand/system colors, typography. No structural changes to markup. Fastest path; most constrained.

Fast Limited Per-component detach
Scenario 2
Flexibility from Parameters

Allow for structural flexibility as conveyed above. More brand and system uniformity. Allows real-life column counts, custom cell logic, proper checkbox isolation.

Flexible More effort Future-proof

*Scenarios as defined in conversation with Jason and Naresh

04 · Design System
Elevation: Tables, Buttons, Form Fields
Design system component documentation covering table architecture, form inputs, button variants, and radio button anatomy.
System
Phase 05
Design System
Atomic component elevation: tables, form fields, dropdowns, toggles, buttons, radio controls
Tables
Form Fields
Buttons
Radio Buttons
Table Build Overview
  • Table Container
  • Table Header Components
  • Table Pin's Header
  • htTable Components — Instance Display Headers
  • Table Cells
☐COLUMN HEADER ▾COLUMN HEADER ▾COLUMN HEADER ▾COLUMN HEADER ▾
☐Cell valueCell valueCell valueCell value
☐Cell valueCell valueCell valueCell value
Table Components — Colors
Header Text Primary
#1A1916
Header Text Low
#1B4FD8 / Raisin 708
Header Cell Background
#EAE8E3
Body Cell White
#FFFFFF / Fog White
Table Border/Lines
#1A1916
Table Cell Background Alt
#F2F1EE / Gray Set
07 · Research
Roles & Responsibilities
Whiteboard capture from team alignment session. Role definitions and working agreements for the conversational UX initiative.
Whiteboard
Phase 03
Discovery
Whiteboard session — role alignment and conversational UX mandate established with team
Christopher — To support & facilitate
Eileen
Isabella
What do you want to do with this project?
Where would you like to take ownership?
Zack
How can I structure this entire process end-to-end to support?
Zack — to iterate on "Conversational UX"
Context: This whiteboard session took place at 375 Hudson St. — part of an intensive in-office working period during which the full product ecosystem was inventoried and the team's working methodology was established. The artifacts from these sessions became the project's connective tissue.
Role Summary
PersonRoleFocus
ChristopherSupport + FacilitateEnablement, unblocking
EileenOwnership TBDTo define in session
IsabellaOwnership TBDTo define in session
ZackConversational UX LeadEnd-to-end process structure
VDA SYTH Context (Partial)

Reference notation from whiteboard top-right: VDA SYTH (+B...) — likely references the Voice/Data Architecture synthesis artifact and additional B-track workstream.

Conversational UX mandate: Naturalize the UI away from pure table/dropdown constructs toward interactions that feel like a guided conversation with the system.
08 · Strategy
Workstation & Card System
Full-page expansion of Key Takeaways — detailed context, anatomy, and benefits for both strategic opportunities.
Opportunity
Phase 04
Direction
Strategic opportunities: workstation paradigm and card-centric data system concepts
1 "A table to write on" — Creating a Consistent Workstation

Currently, workflows are embedded within table constructs. Sometimes the instructions are clear, but often actions are obfuscated behind a button or interaction.

Consider leveraging an overlapping Panel System (Drawer, side-modal). Any time there is a user task, provide a consistent platform/paradigm (think panel/drawer) for the user to accomplish the task at hand.

"Sidebar: this was inspired by the rear-hatch of my Jeep — I could use the rear trunk as a workspace, but why not have a consistent fold-out table that attaches to the rear hatch? That way the junk in my trunk (data) can sit happily as it wants while I use my fold-out workstation with merriment and ease."

WORKFLOW ISSUES

  • Table data + performing actions intermixed in HTML table structures
  • Tasks/User Actions not always intuitive; sequencing obfuscated
  • No help/utility (tooltips) or instructional context

KEY BENEFITS

  • Simplified tables optimized for viewing
  • Separated READ ONLY data display
  • Layered modal/drawer for focused task work
  • Tooltips + nested panels for context
  • Room for optimization and feature development
2 "If it's in the cards!" — Consider a Card System

Consider how we approach and deliver data through a card system. We could identify key data sets based on user behaviors — think: daily workflows/tasks.

Using that, we might create components around those focused data sets that we call into a card-centric UI paradigm.

Consider how we might NEST cards within Tables. Of course, we might have an HTML table within our card — that's nested within a table (as shown), but this isn't a perfect example.
Card formats can support a variety of viewing scenarios: focused, detailed, compact — optimized per data type.

DATA DISPLAY ISSUES

  • All data displayed in tables engineered for all viewing + utility needs
  • Logical paths created by product developers may not align with user expectations

KEY BENEFITS

  • Focused information backed by UX + engineering logic
  • Reimagined filtering: data as components
  • Future-ready: tablets, phones, clouds
Results: Lessen cognitive overload vs table-centric UX. We can still print or save out as tables.
09 · Features
Features to Consider
Two key UX paradigms explored as potential solutions: Panels as a consistent workspace, and Conversational UX / Naturalization of UI.
Exploration
Phase 04
Direction
Feature exploration: panels as workspace, conversational UX naturalization patterns
Panels, as a Place to Work

Consider a consistent paradigm/protocol for any workflows. So, if the user has a form to fill, or action to be notified of, or item requiring their attention and approval, all those actions come from a consistent place.

For instance, this side-panel offers a vertical format which is ideal for walking users through a workflow/protocol. Listing out fields, prompts, etc in a desired order.

With nesting, we can provide additional help/resources/guidance/etc without disrupting the workflow or creating visual noise.

...and or reference information, via the scrim area on the left. Can refactor current action buttons.

SCRIM / REF
WORKFLOW
HELP

SCHEDULE A PAYMENT

Payment amount details

Panels vs. Tiered cards? Maybe nested cards, if there's a need. Tiered cards?

Conversational UX (& Naturalization of UI)

Reference examples of conversational UX patterns that progressively guide users through complex flows — feeling like a conversation rather than a form.

Long-form financial overview
Step-based goal capture with progress indicators
"It's all coming together"
Friendly milestone-based status with plain-language labels
"Hello, Zachery"
Conversational address + single-focus form entry
Long-form vs Focused
Long-form contextual vs. focused/isolated step pattern
10 · Research
Account Opening — Whiteboard Session
Multi-panel whiteboard capture covering client onboarding, let's get started, add account detail, and direct-to-managed account scenarios.
Whiteboard
Phase 03
Discovery
Whiteboard session — account opening scenarios, D2M/G2M decision gates, KYC/EDT flow
② Client Onboarding
Tax transition — 1st page?

③ Let's Get Started
Prefilling w/ existing clients
Best way to transfer between client names?
④ Add Account Detail
→ 70–80% of time
→ Currently: FA decides D2C or Unmanaged. Why can't they select this earlier? ASK JACKIE
→ ASK FOR CLARITY: B TRAIN
D2M + G2M
Opening Managed Acct =
Account Opening | Direct to Managed
What Data/Info can be pre-populated?
What can be referred from — just Name, Address; not even SS# is needed

Integrated w/ Atribute
Min. amount of data
Short Form → Optimize form flow & UI
Digital Portal "collaborative use" → Custodian Agnostic
+ KYC/EDT ↓
First Step: Who is this for? Capturer.
11 · Stakeholder
Ralph Would Like to See
Stakeholder brief from Ralph defining deliverable expectations and key focus areas for the UX engagement.
Stakeholder
Phase 04
Direction
Stakeholder brief from Ralph — deliverable scope, impact areas, and household flow focus
Stakeholder alignment: These deliverables were defined in direct collaboration with client and agency leadership — spanning all levels from Program Director to VP Experience and VP Technology. NNG-guided UX ethos was the shared framework used to align priorities and scope.
High-Level User Flow / Journeys

Expand in more detail what Surabhi has put together already.

Focus on specific taskflows to convey UX/UI thinking/intent
Think about holistic / system-wide Flows
Comprehensive List of What CAN and CANNOT Change
  • Common Pain Points?
  • Known Issues?
  • New Unknowns?
Identify Key Areas of Impact

Tactically: there are a few particular scenarios that Bryan would appreciate seeing solutioning for.

For instance, Duplicating data/Copying Accounts
OR HOUSEHOLD FLOW
Deliverables
End-to-end User Flows / Workflows
Complete journey maps from entry point to completion for each key use case
Leverage styles from Library for any visual mockups
Use existing Figma component library; maintain system coherence
12 · Concept
Lift Diagrams
Cognitive effort curves comparing manual entry vs preloaded data flows. Shows where "lift" (user effort) peaks and how preloading reduces friction.
Concept
Phase 04
Direction
Lift curve concept — manual entry vs preload cognitive effort; core argument for preloading
11Manual entry steps
4Preload confirm steps
~64%Effort reduction
Manual entry
User supplies all data from scratch at each step
Entrystart
Client IDlookup
KYCverify
Agreementgate
EDTdata
Doc Reviewwait
MA Detailsform
Proposalbranch
Attributes9 fields
Nameinput
Submitend
Preload flow
System pre-populates; user confirms or edits deliberately
Preloadsystem
Who for?confirm
Gatebranch
Short Formconfirm
Gatecheck
MA Attrsconfirm
Submitend
Overlay comparison
Normalized effort across the full workflow — the shaded gap represents total lift reduction
Manual entry
Preload flow
Manual entry — high sustained liftUser bears full cognitive load at task start and throughout. Input burden is continuous — 11 active entry points, multiple decision gates, no data inheritance between steps. Aggregate lift remains elevated through completion.
Preload — low aggregate liftSystem performs the heavy lifting upfront. User effort appears only at deliberate confirm or edit moments — 4 light-touch interactions vs. 11 data entry tasks. Aggregate load drops ~64%.
13 · Audit
Current Flow Inventory
Screenshot inventory of the existing account opening flow alongside a legacy inventory flowchart. Basis for redesign proposals.
Audit
Phase 03
Discovery
Current flow inventory — screenshot audit of live system prior to any redesign work
Current Flow (Screenshots)

Captured from live system — represents the as-built state prior to any redesign.

{[...Array(12)].map((_, i) => `
Screen ${i+1}
`).join('')}
Pain point noted Confusing action Missing context Decision gate Branching logic
Current Flow (Inventory — OLD)

Legacy flowchart representing the original documented flow architecture before screenshot audit.

Start
Acct Type?
Client Info
Docs
MA Form
Investment
Review
Submit
Confirm
Legacy flow: high branch count, multiple decision diamonds, pink nodes indicate known friction points from prior audit.
14 · Proposal
Current vs Proposed Account Opening Flow
Side-by-side comparison of the existing flow architecture against the new proposed redesign. Includes lift curve concept.
Proposal
Phase 05
Deliverables
Current vs proposed account opening flow — the core redesign proposal with lift curve evidence
Current Account Opening Flow
Use case 1: Pershing Acct, Managed, Existing Client
Entry
Client ID
Agreement
Fail
KYC
EDT
Doc Review
MA Details
Attributes
Submit
Current: high cognitive load, multiple branches, no preload capability
NEW Proposed Account Opening Flow
Use case: Opening Acct, Managed. Ability to open multiple Acct types at once.
Preload Client
Who is this for?
Short Form
MA Attributes
Submit
Proposed: preloaded data, conversational entry, fewer decision points, multi-account capable
IA specialty in action: Zack's approach to information architecture meant both current-state documentation and newly proposed flows were produced — giving stakeholders a complete before/after view at the system level, from highest architecture down to individual interaction states.
Lift Curve Comparison (Recap)

Manual entry

User supplies all data from scratch at each step

Entrystart
Client IDlookup
KYCverify
Agreementgate
EDTdata
Doc Reviewwait
MA Detailsform
Proposalbranch
Attributes9 fields
Nameinput
Submitend

Preload flow

System pre-populates; user confirms or edits deliberately

Preloadsystem
Who for?confirm
Gatebranch
Short Formconfirm
Gatecheck
MA Attrsconfirm
Submitend

Overlay comparison

Normalized effort across the full workflow — the shaded gap represents total lift reduction

Manual entry
Preload flow
Manual entry — high sustained liftUser bears full cognitive load at task start and throughout. Input burden is continuous — 11 active entry points, multiple decision gates, no data inheritance between steps.
Preload — low aggregate liftSystem performs the heavy lifting upfront. User effort appears only at deliberate confirm or edit moments — 4 light-touch interactions vs. 11 data entry tasks. Aggregate load drops ~64%.
15 · Features
Features: Panels, Conversational UX, Alerts
Three feature paradigms explored in detail: Panel workspace, Conversational UX entry, Interstitial Feedback / User Status, and Tooltips & Alerts.
Features
Phase 05
Deliverables
Feature specs: panels, conversational UX, interstitial feedback, tooltips and alerts
Panels, as a Place to Work
MAIN
DETAILS
HELP
SCHEDULE A PAYMENT

This side-panel offers a vertical format ideal for walking users through a workflow/protocol — listing out fields, prompts, etc. in a desired order. With nesting, we can provide additional help/resources/guidance without disrupting the workflow or creating visual noise.

Consider a consistent paradigm/protocol for any workflows — all task actions surface from one consistent place.
Long-form vs. Focused — the panel enforces focused mode.
Conversational UX — Long-form vs. Focused
Financial Overview
Step-by-step goal capture with icon grid
"It's all coming together"
Budget, Bills, Credit — friendly status
"Hello, Zachery!"
Single-question focus, one step at a time
Long-form vs Focused
Parallel design showing both paradigms side by side
Interstitial Feedback / User Status

Loading/processing states that communicate system activity to the user without abandoning context.

Loading all work...
Tooltips & Alerts

Three tooltip variants: bare context, condensed with navigation surfaced, and workspace/drawer form.

Tooltip — Regular Content
Hover state: shows contextual help without leaving the page
Tooltip Expanded
Content condensed; L2 navigation surfaced; contextual actions available
Workspace (Drawer)
Focuses user. It's an overlay with easy exits, while maintaining context. Space/width may vary per utility/purpose.
16 · Navigation
Left Rail Navigation Instances
Evergreen left rail containing Dashboard Home + Global Navigation Menu. Annotation-heavy spec showing how nav expands, masthead positioning, and tooltip/drawer behavior.
Navigation
Phase 05
Deliverables
Left rail navigation — evergreen rail, account masthead, tooltip panel, drawer workspace
Evergreen Left Rail — 72px min-width
Ideally, we could populate the left rail with brand entity logos as primary pathways into those products.
Interior Navigation Panels can Account for L1 Navigation Items + Additional Utility.
✕
CLIENT SERVICES
≡
👤
📊
Welcome back, Zack
This is what I'm meaning by a naturalized UI
— not just breaking things out of dropdowns
What are we doing today?
A
B
C
✕
CLIENT SERVICES
≡ Create New Account
◈ Planning
📁 Portfolio Solutions
📄 Proposals
📈 Trading & Rebalancing
📊 Reporting
📒 Contacts
BOOK OF BUSINESS
📊 Advisor Metrics
$ Amounts
👥 Clients & Prospects
Left: icon-only collapsed rail — showing nav can expand while abiding by horizontal ethos. Right: expanded rail with categorized nav items.
Account Masthead (not to be confused as navigation masthead)
Horizontal masthead presents on INTERIOR PAGES. Invisible (bespoke) column structure provides a place and space for INTERIOR NAVIGATION L2, L3, etc.
Navigation Panels tuck under ACCOUNT MASTHEAD.
Simply attempting to convey a separate space for User taskflows: separate from the 'content area' where the task was initiated.
Tooltip & Tooltip Panel — Condensed View at 1280px
TASK
CTX
LET'S START WITH A FEW BASIC DETAILS
What is the purpose for the proposal?
Workflow More like a Proposal?
Tooltip expanded: content condensed; L2 navigation surfaced; affects position of the content and displays when displayed.
Reason: to manage contextual references the user encounters throughout the workflow.
Workspace: focuses user. It's an overlay with easy exits, while maintaining context. Space (width) may vary per utility/purpose. (shown here at 768px width)
17 · Navigation
Navigation Expansion Concept
L1/L2/L3 navigation hierarchy tested at 1280px content focus area. Concept: navigation can expand to accommodate various leveling needs while abiding by the horizontal ethos.
Navigation
Phase 05
Deliverables
Navigation expansion concept — L1/L2/L3 hierarchy at 1280px, horizontal ethos
Concept
Showing how the navigation can expand to accommodate various leveling needs while abiding by the horizontal ethos.
Concept tested here: Can the navigation function appropriately while abiding by the horizontal ethos?
1280px Content Focus Area (Condenses from left/right edges)
←——————— 1280 Content Focus Area ———————→
Dashboard Home Global Menu (L1) Additional Panel (L2, L3, etc)
✕
≡
CLIENT SERVICES
≡ Create New Account
◈ Planning
📁 Portfolio Solutions
📄 Proposals
📈 Trading & Rebalancing
📊 Reporting
📒 Contacts
BOOK OF BUSINESS
📊 Advisor Metrics
$ Amounts
👥 Clients & Prospects
🏠 Households & Groups
📐 My Models
📋 Proposale
Welcome back, Zack
This is what I'm meaning by a naturalized UI — not just breaking things out of dropdowns, but using space to our advantage.
What are we doing today?
A
B
C
Most Recent Lorem Ipsum
Interactive List Item Line 1
Interactive List Item Line 2
Interactive List Item Line 3
Interactive List Item Line 4
Interactive List Item Line 5
72px CONTENT AREA (1085px)
Left Rail is EVERGREEN (72px min-width). Ideally, we could populate this with brand entity logos as primary pathways into those products.
Interior Navigation Panels can Account for L1 Navigation Items + Additional Utility.
18 · Flows
Account Opening + Direct Indexization
Two parallel workstreams: Client Services Account Opening flow map, and Direct Indexization (Indexing) feature breakdown — Landing, Customize S&P500, Intelligent Indexation, Bespoke Basket, Build Your Own.
Flows
Phase 05
Deliverables
Account opening + Direct Indexing flow maps — client services and indexization workstreams
Client Services | Account Opening

While the work was led by the housing product lead we can see how some of those were reviewed, iterated and organized into a more visual application.

Prospect Created
KYC
Account Type
MA Form
Attributes
Review
Submit
Orange nodes = system steps / automated. Black nodes = user input steps. Pink annotations = observed friction points.
Direct Indexization; Indexing

This was a formative experience to work with a colleague on resolving problem — is it 'Indexization' or is it 'Indexing'?

LANDING PAGE

Entry point + feature introduction

CUSTOMIZE S&P500

User filters/adjusts S&P500 holdings per constraints

INTELLIGENT INDEXATION

AI-assisted optimization recommendations — presents suggested exclusions and weights

BESPOKE BASKET

BUILD YOUR OWN

+
Securities Preview
SecurityWeight %SectorAction
AAPL7.2%TechnologyInclude
MSFT6.8%TechnologyInclude
AMZN3.5%ConsumerExclude
TSLA1.9%Auto/EnergyReview
F1 · Figma Frame 619
Bespoke + Blacklist/Whitelist User Flow
Concept scope diagram and 3-phase Bespoke Basket creation flow: Create Bespoke Basket → Filter Securities → Portfolio Optimization. Blacklist/whitelist decision tree for security filtering.
Flow Diagram
Phase 05
Shipped — Direct Indexing
Bespoke + BL/WL flow — designed and delivered via Publicis Sapient engagement
Concept Scope — Entry Points
Concept Scope Log in + Terms of Service Select Direct Indexing Landing Page Customize S&P Basket Intelligent Indexation Set Portfolio Tax Sensitive Apply Options
3-Phase Flow: Create Bespoke Basket → Filter Securities → Portfolio Optimization
Create Bespoke Basket Entry Point Customize S&P Basket w/ Intelligent Index Create Bespoke Basket 2. Filter Securities Set Parameters Set Blacklist Set Whitelist Set Cutoff Keep Top or Bottom Show List CTA: Continue to Filtering 3. Portfolio Optimization Set Weights Set Cap Weight Set Minimum Position Weight Set Maximum Position Weight CTA: Continue to Tax Optimization BL/WL Decision Tree — Filter Securities Step Do you have a .XML or .CSV? — or — Use a Curated List? Yes Yes Yes Upload File Search/Add Tickers Add from List
F2 · Figma Frame 619
Panel with Stepper
Multi-step panel UI for Direct Indexing Bespoke Basket creation. Purple stepper header, left-rail section nav, main content area with form fields and action buttons.
UI Pattern
Phase 05
Shipped — Direct Indexing
Panel with Stepper — purple stepper architecture for multi-step basket creation
Layout Architecture
✕ Direct Indexation Customization View Bespoke Basket › 1 Customize S&P 2 Int. Indexing 3 Bespoke Basket 4 Portfolio Opt. 5 Review CUSTOMIZE S&P500 Customize with S&P Intelligent Index Bespoke Basket SECTION LAYOUT CURRENT LIST 3 CURRENT LIST EXPANDED CURRENT LIST CURRENT LIST CURRENT LIST Direct Indexation Customization Select a Curated Whitelist Choose a pre-built whitelist or expand to review individual tickers. CURRENT LIST ACTIVE CURRENT LIST EXPANDED ACTIVE TICKER COMPANY WT BL/WL AAPL Apple Inc. 7.2% WL MSFT Microsoft 6.8% BL AMZN Amazon 3.5% WL · · · additional rows · · · Privacy Policy · Terms of Use · Cookie Policy Continue →
Step Sequence
Step 1 — Customize S&P500
Select a Curated Whitelist. Choose from preset lists. Activate/deactivate individual securities. BL/WL assignment per ticker.
Step 2 — Portfolio Optimization
Frequency of rebalancing, shelter long puts toggle, minimum percent weight constraints.
Step 3 — Tax Optimizations
Start/end dates for plan period. Shelter Long Puts. Additional tax election options.
Step 4 — Backtract Options
Create a Bespoke Basket confirmation. Date range calendar picker.
Step 5 — Review
Summary and final confirmation before submission.
What about multi-select? Too tedious? Is it additive? How do we deal with duplicate tickers potentially?
F3 · Figma Frame 619
Panel Paradigm Solution
Two-row solution: wireframe concept flow (top) and hi-fi purple panel execution (bottom). Shows the transition from flat table → side panel opens for task work → data entry → analytics result.
UX Pattern
Phase 05
Shipped — Direct Indexing
Panel Paradigm — wireframe to hi-fi proof-of-concept; flat table → panel → analytics
Row 1 — Wireframe Concept Flow (5 screens)
Landing / List Table / List View Set Details SCRIM Continue → Filter Securities Continue → Review Submit ✓ Analytics / Backtesting Performance + Comparison
Row 2 — High Fidelity: Purple Panel Paradigm
Direct Indexation My Baskets / Portfolio Name Status Type S&P 500 Custom Active Tech Basket Live + Create New Basket Direct Indexation Customization 1 2 3 4 5 CUSTOMIZE S&P500 ✓ Int. Index Bespoke Select Curated Whitelist Continue → 1 2 3 4 5 Filter Securities Set your blacklist / whitelist Set Blacklist Set Whitelist Set Cutoff Keep Top or Bottom Continue → Backtesting Results Performance Overview RETURN +38% VS S&P +4% SHARPE 1.42 ✓ Apply to Portfolio →
F4 · Figma Frames 620–621
Direct Indexing — Landing Page
My Baskets landing page. Existing baskets table with status, type, and actions. Five entry points to model paths: Customize S&P500, Intelligent Indexing, Bespoke Basket, Bespoke Model, Uploaded Model.
Landing
Phase 05
Shipped — Direct Indexing
Direct Indexing landing — My Baskets table and 5 model entry paths
My Baskets — Full Landing Page
✕ Direct Indexation Direct Indexation › My Baskets Direct Indexing Manage your customized index baskets and portfolios + Create Basket 🔍 Search baskets... All Active Pending Completed BASKET NAME TYPE MODEL STATUS UPDATED SECURITIES ACTIONS S&P 500 Custom — Conservative Bespoke Basket Standard Active Dec 14, 2022 487 Edit › Tech Heavy — Blacklist Applied Bespoke Model Behavior-driven Live Jan 12, 2023 312 Edit › ESG Screening — Intelligent Index Intelligent Indexing Smart Basket Pending Feb 21, 2023 498 Edit › Value Tilt — Uploaded CSV Uploaded Model Custom Upload Draft Mar 08, 2023 — Edit › Start a New Basket Choose a model type to begin Customize S&P500 Filter the full S&P500 index universe Select → Intelligent Indexing AI-powered optimization and recommendations Select → Bespoke Basket Build from scratch with full BL/WL controls Select → Bespoke Model Behavior-driven or template-based selection Select → Uploaded Model Import via .XML, .CSV or pre-built list Select →
F5 · Figma Frames 620–621
Customize S&P500
Filter controls + securities table. Left: sector exclusions, market cap floor, weight methodology, max position weight slider, keep-top-N. Right: full securities list with BL/WL assignment per ticker.
Design Screen
Phase 05
Shipped — Direct Indexing
Customize S&P500 — filter controls and per-ticker BL/WL assignment; Review V1 complete
Customize S&P500 — Filter + Securities Table
✕ Direct Indexation Customization › My Bespoke Basket Review V1 Complete ✓ Customize S&P500 2 Filter Securities 3 Portfolio Opt. 4 Tax Opt. 5 Backtract 6 Review Customize with S&P500 Refine the S&P 500 holdings by applying filters, exclusions, and weight adjustments. FILTER OPTIONS Sector Exclusions Select sectors to exclude... ▾ Market Cap Floor ($M) 1,000 Weight Methodology Cap Weighted ▾ Max Single Position Weight 2.8% Keep Top N Securities 200 Apply Filters TICKER NAME SECTOR WEIGHT STATUS BL/WL AAPL Apple Inc. Technology 7.18% Include WL MSFT Microsoft Corp. Technology 6.84% Include WL META Meta Platforms Technology 2.21% Exclude BL AMZN Amazon.com Inc. Consumer 3.48% Include WL NVDA NVIDIA Corp. Technology 4.90% Include WL · · · 495 additional securities · · · Showing 500 of 500 · 12 excluded · 488 included Continue to Filter →
F6 · Figma Frame 620
Intelligent Indexing
AI-powered index optimization. Long-form questionnaire with salmon annotation overlay. Investment objectives, ESG preferences, risk tolerance, rebalancing, and tracking error settings.
Design Screen
Phase 05
Shipped — Direct Indexing
Intelligent Indexing — AI-powered optimization questionnaire; stakeholder walkthrough pending
Intelligent Indexing — Form View
✕ Intelligent Indexing Intelligent Indexing Define your investment criteria — our model will optimize accordingly Investment Objectives Primary Goal Growth ▾ Time Horizon Long-term (10+ yrs) ▾ ESG Preferences Apply ESG Scoring ESG Minimum Score 60 / 100 Exclude Industries Tobacco ✕ Weapons ✕ Fossil Fuels ✕ + Add more Risk Parameters Volatility Target Moderate (≤15% ann.) Max Drawdown -20% ▾ Optimization Settings Rebalancing Frequency Quarterly ▾ Tax-Loss Harvesting Tracking Error Tolerance 1.5% ⚠ Needs walkthrough This needs to be written — need to ask a stakeholder what should be written here. Confirm AI recommendation flow. Generate Recommendations →
Design Status
Review V1 — needs walkthrough. Stakeholder input required on AI recommendation output format and content.
  • Investment Objectives — complete
  • ESG Preferences: toggle + exclusion chips
  • Risk Parameters — volatility + drawdown
  • Optimization — rebalancing + TLH toggle
  • AI recommendation output — TBD
  • Tracking error range — confirm with stakeholder
Open Questions
How does the AI recommendation surface after form submit? Inline panel or new screen?
Does this path merge with Bespoke Basket at the filter step, or stay separate through review?
Tax-loss harvesting — FPO or functional in V1?
F7 · Figma Frames 620–621
Bespoke Basket — 6-Screen Sequence
Full creation flow: Strategy Exclusions → Basket Settings → Constraint Options (purple panel) → Select Curated Whitelist (full-bleed purple) → Securities Table → Review & Submit.
Screen Sequence
Phase 05
Shipped — Direct Indexing
Bespoke Basket — complete 6-screen creation sequence from strategy to review
Screens 1–3
My Bespoke Basket 1 2 3 4 5 Strategy Exclusion Options Next Step → Screen 1 of 6 1 2 3 4 5 Basket Settings Basket Name S&P 500 Custom — Conservative Description (optional) Describe your strategy... Strategy Type Select strategy type ▾ Next Step → Screen 2 of 6 1 2 3 4 5 SECTIONS Strategy Basket Opt. Portfolio Opt. Tax Opt. Constraint Options Next Step → Screen 3 of 6
Screens 4–6
✓ ✓ ✓ 4 5 Select a Curated Whitelist Choose your security filter list CURRENT LIST 3 CURRENT LIST EXPANDED CURRENT LIST CURRENT LIST Continue → Screen 4 of 6 ✓ ✓ ✓ ✓ 5 Select Securities TICKER NAME WT BL/WL AAPLApple Inc.7.2% WL MSFTMicrosoft6.8% BL AMZNAmazon3.5% WL · · · more rows · · · Continue to Review → Screen 5 of 6 ✓ ✓ ✓ ✓ 6 Review & Submit Basket Name:S&P 500 Custom Model Type:Bespoke Basket Securities:488 included, 12 excluded Whitelist:CURRENT LIST (3) Blacklist:MSFT + 1 other Rebalancing:Quarterly ✓ Submit Basket Screen 6 of 6
F8 · Figma Frame 619
Backtesting & Analytics Flow
Post-creation analytics. Flow diagram linking basket creation to backtesting pipeline. Cumulative return chart vs S&P benchmark, key stat comparison table, and apply-to-portfolio CTA.
Analytics
Phase 05
Shipped — Direct Indexing
Backtesting & Analytics — post-creation performance view; cumulative return vs benchmark
Backtesting Flow
Basket Submitted Run? Yes Processing Running backtest... Results Ready Chart + stats Apply to Portfolio Live on Portfolio No Skip backtesting → direct to portfolio
Backtesting Results Screen
✕ Backtesting Results › S&P 500 Custom — Jan 2018–Dec 2022 Backtesting Results TOTAL RETURN +38.4% VS S&P 500 +4.2% VOLATILITY 12.8% SHARPE RATIO 1.42 MAX DRAWDOWN -18.3% COUNT 488 Cumulative Return +50% +25% 0% -25% 2018 2019 2020 2021 2022 Custom Basket S&P 500 Detailed Statistics METRIC BASKET S&P 500 Annual Return +7.7% +6.7% Volatility 12.8% 14.1% Sharpe Ratio 1.42 1.18 Max Drawdown -18.3% -23.9% Tracking Error 1.5% — Securities Active 488 500 Blacklisted 12 — Whitelisted 3 — Alpha (ann.) +1.0% — ✓ Apply to Portfolio →