Fintech · Archive

Edelman Financial Engines: Selected Work

During the merger of Financial Engines and Edelman Financial Services, I helped bring four separate products under one brand and one design system. The biggest wins were a planning tool that let advisors compare retirement scenarios side by side, and the company's first shared design system. This is also where I moved from visual design into product design.

50%+

of planners chose the new Financial Planning Tool, the most-used of the company's three planning tools for new plans

20%

more likely to turn a prospect into a client when planners used it

2,200

plans created in the new tool

1,700

unique users a month on the new client portal, which shipped on time for January 1, 2020

SF Design Week Award

2020

The shipped scenario comparison: several retirement scenarios side by side, with editable contributions and a success score for each.

Context

The problem

Money scattered everywhere. In testing, one participant tracked his retirement on an envelope listing 11 different 401(k) accounts. He called it "the beast." Our products weren't helping people see it in one place.
Four silos. Financial Engines and Edelman Financial Services were becoming one company, but enrollment, workplace, financial planning and mobile each had their own teams, systems and look.
A brand color that failed. Our teal was unique in the industry but didn't pass accessibility contrast checks, so every designer adjusted it a little differently.

A close-up photo of a hand holding a worn, torn envelope covered in handwritten account names and balances — a list of eleven retirement accounts scattered across brokerages. — A participant's handwritten envelope, nicknamed "the beast," became a rallying point for the whole team.

A comparison table across 2018, 2019, and 2020 for Financial Engines and Edelman Financial Services, showing client portal, prospect portal, mobile, CRM, model management, financial planning tool, and planner dashboard, most rows an X or a mismatched vendor until 2020 when everything consolidates under one Edelman Financial Engines column. — Before the merger, the two companies ran separate systems for everything. 2020 was the first year they came together.

What made it hard

An older audience. People aged 40 to 65, many new to working with a digital advisor, so the design had to be readable for our oldest clients.
Four projects at once, during a merger, across retail, workplace and mobile.
Rising expectations. Fidelity, Betterment, Merrill Edge and Charles Schwab were investing in smooth digital experiences that build trust.

Four columns labeled Enrollment, Workplace, Financial Planning Tool, and Mobile, each showing screenshots of the corresponding pre-merger product surface that needed to be brought under one unified experience. — Four channels (enrollment, workplace, the planning tool and mobile) that needed one brand and one shared system.

Decisions

Key decisions

1. Let planners compare scenarios side by side

Why: After interviewing about 50 planners, the core problem was clear: the old tool couldn't change plan details and show the impact for more than two scenarios at once. The idea came from our own team's Trello board. Cards worked for projects, so they could work for scenarios, which planners could add, compare and reorder by priority. I prototyped it and tested it with planners before anything was built, then worked with product, research and engineering through implementation, creating detailed specs and mockups for engineering handoff.

A step-by-step onboarding screen confirming income, age, Social Security, and account information, next to a mobile optimized-strategy screen showing a $60,000 per year retirement paycheck and a growth-versus-income portfolio pie chart. — The planning flow confirmed a client's information, then showed an optimized strategy, with the portfolio split on mobile.

2. Build an accessible color palette first

Why: The palette had to stand out in the industry and be truly readable for our oldest clients. I marked AA and AAA contrast pass or fail right on each swatch, so no one had to guess or tweak colors on their own again. Fixing the teal didn't weaken the brand; it made it usable for the people we were designing for.

3. One component library for every channel

Why: Four teams were producing four different-looking experiences. After months of testing and refinement, I led the design of a shared component library for retail, workplace and mobile, built together with designers and engineers. It became the system for every product in the company.

A four-column comparison of Enrollment, Workplace, Financial Planning Tool, and Mobile screens rebuilt using the shared component library, including a Social Security benefits comparison chart and a retirement goal confidence gauge on mobile. — The same component library across enrollment, workplace, the planning tool and mobile.

A Figma symbols panel showing organized layer groups for Cursors, Avatars, and Navigation, with variants for desktop, mobile, authenticated, and portal navigation states, plus page-header components with different illustration options. — Navigation, avatars and page headers organized into reusable variants, so every team worked from one source.

4. Bring everything into one client portal

Why: Clients were moving between a scattered mix of account, trading and planning tools. I led the visual design and UI direction for a single portal with an agency partner and our in-house UX team, prototyping quickly alongside participant interviews and working closely with development to hit the January 1, 2020 launch. It was also our chance to build the company's first real design system, which I did with a UX designer.

A homepage overview screen with a Good Morning greeting, total managed balance, and an accounts chart, layered with a retirement spending plan flow showing an 80% of scenarios card recommending $56,900 per year and sliders for retirement age and Social Security claiming. — Balances, account activity and retirement spending planning in one consistent design.

5. Design onboarding around the client's journey

Why: Onboarding had to work on web and mobile for retail and workplace clients at every level of service. I gathered requirements from product, business, interaction design and engineering, built a journey map, and led the visual design toward four goals: welcome people with personalization and education, let them try a plan before committing, show progress in easy-to-understand terms, and give small next steps. A weekly review with product owners and research kept everyone aligned, and one-on-one testing with retail clients confirmed the direction.

A cross-functional journey map spanning Awareness, Decision-making, Set-up, Validation and pre-retirement, and Retirement, with parallel Workplace and Retail tracks, sentiment waves, life-moment markers, and numbered participant pins along each stage. — A shared journey map lined up retail and workplace onboarding around the moments that mattered most.

A whiteboard wall covered in printed wireframes annotated with sticky notes, next to a second whiteboard clustering sticky-note themes like Expertise, Life Planning, and Tech + Human, and a photo of the team gathered around a table sorting index cards. — Wireframes covered in feedback, and a workshop that sorted themes and priorities.

Outcomes

What happened

Financial Planning Tool: more than 50% of planners chose it, making it the most-used of the company's three planning tools for new plans. Planners who used it were 20% more likely to turn a prospect into a client, and 2,200 plans were created in it.
Design system: one shared component library for every product in the company, including mobile, replacing four separate visual styles.
Client portal: the dashboard shipped on schedule for January 1, 2020. The prospect portal reached 1,700 unique users a month, and the document vault held 5,400 uploaded documents.
Onboarding: one-on-one testing with retail clients confirmed the design direction before a fuller build.
An SF Design Week Award in 2020 for the work.

Reflection

What I learned

One real story beats a statistic. "The beast" did more for stakeholder buy-in than any aggregate number. A specific, human, slightly absurd artifact made everyone understand the problem right away.

This is where I became a product designer. I started as a visual designer, and these projects pulled me into research, interaction design and working side by side with engineers.

Slow down to capture decisions. Running four projects at once during a merger left little time to look back. Next time, I'd keep a running record of decisions and tradeoffs as I go, not just what shipped.