Lead Product Designer · Design Engineer · Financial Finesse · 2026

One AI financial coach, designed and built to feel native everywhere — the Hub, client sites, and Microsoft Teams

Aimee is Financial Finesse's AI financial coach. I designed and built its front end end-to-end — visual language, interaction model, a full component library, and coded prototypes — then made it deploy to three surfaces from one codebase.

3 surfaces
Hub · client sites · Teams — one codebase
1 system
Design system + locked component library
Design → build
Front end owned end-to-end
Aimee — the AI coach in action
At a glance

Aimee is Financial Finesse's AI financial coach. I owned the front-end design and design engineering end-to-end — a documented design system, a locked component library, and coded interactive prototypes — so one coaching experience deploys natively across the Hub, embeddable client-site widgets, and Microsoft Teams, all provisioned through UberAdmin.

Role
Lead Product Designer / Design Engineer
Scope
Front-end design · Design system · Prototyping · Handoff
Surfaces
Hub · Client sites · MS Teams
Stack
Next.js · Tailwind · Recharts · A2UI
My Role

Front-end design and design engineering, end to end

Visual & Interaction

Defined Aimee's visual language and interaction model — how she talks, streams, surfaces content, and hands off to a human coach.

Design System

Authored DESIGN-SYSTEM.md as the single source of truth: tokens, typography, every chat and card component, chart rules, accessibility hard-rules, and a running anti-patterns list.

Component Library

Built a locked, approved library — a component "API" of reusable in-chat blocks — that engineering could implement 1:1.

Prototypes

Designed and coded high-fidelity interactive prototypes — real HTML/CSS/JS with live streaming, animation, and state — to test flows before a line of production code.

Multi-surface

Designed the embeddable SDK widget for client sites and adapted the same system to Microsoft Teams — all hostable through UberAdmin.

Handoff

Wrote the engineering spec (Next.js + Tailwind + A2UI) so the prototypes translated to production without redesign.

The Problem

One coach, three very different homes

Aimee had to live in three contexts — the logged-in Hub, embedded on client benefits sites, and inside surfaces like Microsoft Teams — each with different screen real estate, brand, and entry point.
The coaching experience itself had to be identical and recognizable everywhere. Three separate front ends would fracture the brand and triple maintenance.
A trust problem specific to finance: people need to know they're talking to AI, but "virtual assistant" reads as fake — the wrong first impression when someone's asking about their retirement.
The Solution

One system, not three front ends

Rather than build three front ends, I built one: a documented design system, a locked component library that Aimee "speaks" in, coded prototypes to test with, and a single configurable host. Every response is assembled from typed blocks — never free-form bubbles.

01

A documented design systemDESIGN-SYSTEM.md as the source of truth: tokens, typography, accessibility hard-rules, and a running anti-patterns list

02

A locked component "API" — chat primitives, a typed card system, data-viz blocks, and follow-up chips, each built to a documented anatomy and CSS contract

03

Coded interactive prototypes — real HTML/CSS/JS with live streaming and state, so flows could be felt and tested, not just reviewed

04

One configurable host — provisioned through UberAdmin so the Hub, client sites, and Teams all deploy from a single system

Aimee's home screen — one system across the Hub: greeting, composer, and a picked-for-you list, with a live coach available
Aimee on mobile — the wellness-milestones card Aimee on mobile — a financial snapshot response with charts Aimee on mobile — handing off to a live coach
Experience · 01

Honest AI, premium humans

Aimee is labeled an "AI coach," not "virtual" — hiding the AI only breaks trust later. Certified human coaches are framed as a one-click premium upgrade, so Aimee feels capable and humans feel credentialed. A gold-railed handoff card makes the escalation feel like an upgrade, not a fallback.

Aimee handing off to a live certified coach — a green LIVE banner as Cyrus Purnell, CFP, joins the conversation to continue the plan
Experience · 02

A vocabulary, not free-form bubbles

Every response is assembled from typed blocks — the "vocabulary" Aimee speaks in. A base card with a colored left rail signals its type at a glance.

Navy rail — analysis
Teal rail — recommendation
Gold rail — human-coach handoff
Coral reserved for the single most-urgent item — restraint as a rule
See the components live ↗
The typed card system — an analysis card (navy rail), a recommendation card (teal rail), and a coach card (gold rail), each signaling its type at a glance
Experience · 03

The user's words never shrink

A rule I enforced across the system: the user's message and Aimee's reply always render at the exact same size (16px mobile / 17px desktop) — never shrink the user's words beneath the AI's. It keeps the conversation feeling like a dialogue between equals. It sits alongside accessibility hard-rules — never yellow text on white, one hover treatment at a time — codified so they can't drift.

A coaching response where the user's question and Aimee's reply render at the same text size — a snapshot with cards and an assets-vs-debt chart below
Experience · 04

The same coach, every surface

The same coaching experience holds up whether it's woven into our platform, floating on a client's marketing site, or wrapped in a completely different host UI.

Hub — a full-screen coach inside Hub V3, integrated with the user's plan, benefits, and wellness score
SDK widget — a floating button that opens a chat popup over a client's own site (prototyped over a mock provider, "Meridian Benefits"), with an article reader that insets inside the same window
Microsoft Teams — the same coach adapted to live inside Teams' chrome
Aimee as an SDK widget floating over a client site (Meridian)
Process

Designed and coded, end to end

I didn't hand off static mockups — I coded the prototypes. Real HTML/CSS/JS with live streaming and state became the source of truth, the design system became the spec, and the component library was locked so engineering could implement it 1:1 in Next.js + Tailwind, with an A2UI model that maps Aimee's structured JSON responses to my components. Design and build in one loop — so the same system drives every surface.

Static mockups Coded, interactive prototypes
A design doc no one reads DESIGN-SYSTEM.md as the build spec
Free-form design handoff A locked component API, implemented 1:1
Redesign at production time Prototypes that shipped without redesign

"Open the prototype to see the streaming effect — it's the kind of detail that doesn't translate in a screenshot."

Impact

One coherent coach, everywhere it needs to be

3 surfaces

Hub, embeddable client widgets, and Teams — from one component library

1 source of truth

Documented design system + a locked, approved component library

Prototype → production

Next.js · Tailwind · Recharts · A2UI, built 1:1 with the spec

Meta NFL JPMorgan Chase CVS Health Federal Reserve Patagonia McKinsey Nestlé Comcast General Mills
Final Takeaway

Aimee runs as one coherent AI coach across the Hub, embeddable client widgets, and Teams — one design system, one component library, one source of truth. Designed and built by one person — proof that a design engineer can own the whole thing, from token to production.