The Challenge
Build a credible, advisor-facing private-banking desktop — the full relationship-manager workflow from client 360 to a client-ready proposal — fast enough to validate with stakeholders, with no backend and no long build. The constraint was the point: could an AI-augmented process compress the path from a blank page to a clickable, demonstrable product?
How AI Assisted This Build
AI was a force multiplier across the whole design process, not a shortcut around judgment. Four stages:
1 · Research & Competitive Synthesis
I used AI to compress competitive teardowns of a dozen private-banking desktops (UBS, Pictet, LGT, J.P. Morgan) into the feature domains that actually matter to an advisor.
2 · Realistic Data, Generated
AI produced coherent client personas, portfolios, and product catalogs, so the prototype behaves like a real book of business instead of placeholder text.
3 · Design System, Drafted
AI sketched the token set — color, type, spacing — from brand signals; I refined it by hand into the quiet, confident palette the prototype uses.
4 · Prototype, Scaffolded
AI scaffolded the vanilla-JS components and state layer; I extended them and wired the interaction design. The strategy, information architecture, and the provenance-thread concept stayed human.
The Prototype — Live
The result is a connected, interactive prototype. The embeds below are the live build — choose a persona and explore it inside this page. Use the "Click to interact" button on any embed to interact; scroll with your mouse wheel anywhere else on the page.
RM Dashboard — The Daily Landing Screen
A single pipeline view replaces scattered inboxes. Tasks, alerts, and next-best-actions surface in priority order, with quick portfolio snapshots so the advisor starts the day in context.
Client 360 — Single Source of Truth
One screen for the whole relationship: household structure, risk profile, currency exposure, allocation, performance, and activity. It also carries the suitability view — product-by-product risk matching that keeps every recommendation on-risk. Density is high but legible; the information architecture does the heavy lifting.
Recommendation Builder — AI with a Provenance Thread
The signature moment. AI suggestion cards are each connected by a bronze provenance thread to the data sources that produced them — performance gaps, risk limits, household goals. It turns a black box into something an advisor can defend to a client and a compliance officer.
Product Discovery — Suitability at a Glance
A filterable catalog with client-specific suitability flags, so an advisor never recommends something off-risk. Compare view and research notes sit next to the product, not in another system.
Proposal Builder — Client-Ready Export
Accepted suggestions assemble into a proposal the advisor can review and export as a print-ready, client-facing document. The workflow closes the loop from insight to action.
Audit Log — Built for Governance
Every state change is captured in a filterable, exportable audit trail. It is the quiet feature that signals bank-grade thinking: oversight and accountability are designed in, not bolted on.
A Reusable Design System, From Prototype to Platform
Here's what a senior designer hands your bank: not a pile of screens, but the system that keeps producing them. design.md is that system — one source of truth your teams and coding agents build from, so every market and product line stays on-brand, and an AI can extend it without collapsing into generic output. You get speed, consistency, and control in one file. That's the difference between a prototype that demos well and a platform your private bank can actually run on.
Color palette
Spacing scale
design.md
# Color --color-brand-blue: #2B5797 --color-bronze: #A88958 --color-ink: #1B2A4A # Spacing --space-4: 16px --space-8: 64px
What This Demonstrates
As a prototype, the value is fidelity and speed-to-validation, not live KPIs:
In eight weeks, an AI-augmented process took the build from a blank page to a clickable, stakeholder-ready private-banking desktop — covering the core advisor workflow end to end, with suitability, audit, and role-switching already built in. Metrics reflect prototype scope; validate with stakeholders before citing externally.
Beyond the Prototype — Roadmap
The architecture supports a full-featured platform. On the roadmap: risk & stress testing, order management, rebalancing, performance attribution, client reporting, fee management, market monitor, onboarding & KYC, meeting prep, and team collaboration — showing the prototype is a foundation, not a one-off.