Brand
Identity

Role & Responsibility

PRODUCT DESIGN

Product direction, hands-on contribution & team management

CROSS-COLLABORATION

Stakeholder & collaborator communication, content/product/research collaboration, design system contribution

PRODUCT STRATEGY

Strategy roadmap & design effort pipeline

Collaborators

2 Product Design team · Product · Design System · Content Strategy · Research · Engineering · Business · Accessibility · Legal

TIAA is a Fortune 100 financial services organization and a leading retirement provider for professionals across academic, research, medical, and cultural sectors. Despite over a century of market leadership and more than $1.3T in assets under management, TIAA has faced increasing pressure from a new wave of digital-first competitors.

In response, the company initiated a large-scale effort to modernize its legacy platform, focusing on both foundational improvements and new product development. I joined TIAA as a Staff Product Designer to support this transformation.

Context

I was asked by the leadership team to evaluate an existing proof-of-concept created by a third-party agency and evolve it into an MVP for a transition planner. This tool helps users understand how their current income, savings, and investments translate into retirement income.

After conducting a design audit, it became clear that the prototype no longer aligned with current user expectations or product direction.

Screenshot of the POC prototype.

Proposal & Strategy

I partnered with the research team to validate these concerns through a targeted survey, while also aligning with engineering to confirm that a reset in design approach would not introduce delivery risk. I synthesized these findings into a clear recommendation, presented a revised strategy to leadership, and secured alignment to move forward.

From there, I worked with product management to define a delivery approach. I initiated foundational research to better understand gaps in existing planning tools, conducting interviews with both TIAA clients and financial advisors to capture a range of perspectives.

I partnered with the research team to validate these concerns through a targeted survey, while also aligning with engineering to confirm that a reset in design approach would not introduce delivery risk. I synthesized these findings into a clear recommendation, presented a revised strategy to leadership, and secured alignment to move forward.

From there, I worked with product management to define a delivery approach. I initiated foundational research to better understand gaps in existing planning tools, conducting interviews with both TIAA clients and financial advisors to capture a range of perspectives.

Research finding excerpts.

Problem Identified

The research surfaced three consistent issues across leading competitors:

1. Charts are perceived as complex and intimidating
68% of participants reported being unlikely to rely on charts for confident decision-making.

2. Charts lack key features aligned with user expectations
Participants struggled with limited interactivity and unclear affordances, reducing engagement.

3. The tools fail to address the core user question
Users consistently asked “Do I have enough?”, yet 78% felt existing tools did not provide a clear answer.

These insights led to a guiding question for the team:
"How might we reduce cognitive load in retirement planning tools so users can easily understand complex financial information and make confident decisions?"

Exploration

Before moving into wireframing, I led working sessions using pen and paper to break down the structure of a transition planner. This helped the team align on core components, feature sets, and information hierarchy.

We then explored multiple wireframe directions, focusing on how to present critical information clearly while balancing input complexity and interactivity.

Before moving into wireframing, I led working sessions using pen and paper to break down the structure of a transition planner. This helped the team align on core components, feature sets, and information hierarchy.

We then explored multiple wireframe directions, focusing on how to present critical information clearly while balancing input complexity and interactivity.

Hand sketches to understand the anatomy of transition planner.

Early low-fidelity wireframe concepts.

A key focus was improving how users interpret financial data. One direction removed charts entirely in favor of a simplified, summary-driven dashboard. Another retained charts but paired them with clear, plain-language explanations.

The second approach tested significantly better, both internally and with users, and became the foundation for the product direction.

A key focus was improving how users interpret financial data. One direction removed charts entirely in favor of a simplified, summary-driven dashboard. Another retained charts but paired them with clear, plain-language explanations.

The second approach tested significantly better, both internally and with users, and became the foundation for the product direction.

Two different approaches.

Dataviz Standards

This project was one of the first to launch on TIAA’s new design system and the first to introduce data visualization patterns. I worked closely with the design system team to define standards for accessible, scalable data visualization.

I explored multiple concepts, incorporating both internal proposals and external best practices, then validated them through a town hall session with TIAA users before finalizing the approach.

This project was one of the first to launch on TIAA’s new design system and the first to introduce data visualization patterns. I worked closely with the design system team to define standards for accessible, scalable data visualization.

I explored multiple concepts, incorporating both internal proposals and external best practices, then validated them through a town hall session with TIAA users before finalizing the approach.

Rejected designs for data visualization variations.

Content Strategy

Providing an explanation of the chart meant working closely with the content team to define what information can actually be provided, and finding the most optimal way to present them. At times, I had daily working sessions with the content team to map out all possible scenarios and edge cases, and plotting appropriate contents for them.

Content matrix for different scenarios. This particular version was ultimately scrapped and replaced with a whole new matrix.

We explored a carousel-based insight model, which performed well in prompting action but fell short in supporting comprehension. We also considered a GPT-based conversational interface, but this was scoped out for MVP due to technical and timeline constraints. It remains a planned area for future exploration.

Rejected designs for insights variations.

Final Design

Transition Planner's new landing page.

The transition planner was designed to lower the barrier to financial planning by making complex data easier to understand and act on.

Landing Page animated.

The experience establishes a clear visual hierarchy that guides users through their financial story, creating a structured and easy-to-follow flow.

Eye movement path.

Data visualizations are paired with plain-language insights and contextual prompts. Users first receive a high-level summary, followed by a more detailed breakdown and suggested next steps, helping them move from understanding to action.

Insights breakdown.

I focused on making charts easier to interpret, not just supplementing them with explanations. The solution breaks the experience into three charts:

The first focuses on total income to directly answer “Do I have enough?”

The second and third provide deeper views into income and expenses, with expense breakdowns optionally available for users who want more control.

Charts are interactive, allowing users to explore specific data points. Any interaction dynamically updates the accompanying insights to reflect the current state, ensuring explanations stay relevant.

I focused on making charts easier to interpret, not just supplementing them with explanations. The solution breaks the experience into three charts:

The first focuses on total income to directly answer “Do I have enough?”

The second and third provide deeper views into income and expenses, with expense breakdowns optionally available for users who want more control.

Charts are interactive, allowing users to explore specific data points. Any interaction dynamically updates the accompanying insights to reflect the current state, ensuring explanations stay relevant.

Different chart states and insights.

For income inputs, the requirement was to integrate an existing flow from another tool. I partnered with the owning team to adapt and refine that flow for the planner.

This required reworking the interaction model into a modal overlay, which conflicted with existing design system guidelines. I collaborated with the design system team to define a new modal pattern specifically for structured data input.

For income inputs, the requirement was to integrate an existing flow from another tool. I partnered with the owning team to adapt and refine that flow for the planner.

This required reworking the interaction model into a modal overlay, which conflicted with existing design system guidelines. I collaborated with the design system team to define a new modal pattern specifically for structured data input.

Income breakdown modal overlays.

Expense inputs needed to be newly designed. I proposed a bulk editing experience to reduce friction when entering large amounts of data. Due to scope constraints, this was deferred to post-MVP. For launch, we aligned with the updated income input pattern.

Accepted MVP screens for adding expense.

Rejected WIP prototype for adding expense flow.

Based on user feedback, I introduced support for multiple scenarios, allowing users to compare different financial paths while preserving their progress.

I also introduced a “Questions to Consider” section, giving users access to commonly asked questions without leaving the experience. While the initial goal was to connect these directly to chart data, technical constraints limited this for MVP. Instead, I worked with content strategy to curate relevant resources from TIAA’s education library, with plans to expand this further.

Based on user feedback, I introduced support for multiple scenarios, allowing users to compare different financial paths while preserving their progress.

I also introduced a “Questions to Consider” section, giving users access to commonly asked questions without leaving the experience. While the initial goal was to connect these directly to chart data, technical constraints limited this for MVP. Instead, I worked with content strategy to curate relevant resources from TIAA’s education library, with plans to expand this further.

Add new scenario.

Questions to Consider.

Outcome

Within the first three months post-launch, the transition planner contributed meaningfully to exceeding departmental KPIs. It was also featured internally as a strong example of user-centered design and selected as an early candidate for AI integration as part of the "TIAA Next" initiative.

56k

Unique visits

$60M

Reallocation to TIAA’s products

$40M

Retained   earnings

Next Steps

TIAA continues to invest in the transition planner. Near-term priorities include redesigning onboarding in partnership with other product teams to create a more consistent entry experience across the ecosystem.

Future work includes further standardizing input patterns, expanding design system support, and introducing more advanced recommendations powered by generative AI.

TIAA continues to invest in the transition planner. Near-term priorities include redesigning onboarding in partnership with other product teams to create a more consistent entry experience across the ecosystem.

Future work includes further standardizing input patterns, expanding design system support, and introducing more advanced recommendations powered by generative AI.

Website by David · Email · LinkedIn

PRODUCT DESIGN

PRODUCT DESIGN

Product direction, hands-on contribution & team management

Product direction, hands-on contribution & team management

CROSS-COLLABORATION

CROSS-COLLABORATION

Stakeholder & collaborator communication, content/product/research collaboration, design system contribution

Stakeholder & collaborator communication, content/product/research collaboration, design system contribution

PRODUCT STRATEGY

PRODUCT STRATEGY

Strategy roadmap & design effort pipeline

Strategy roadmap & design effort pipeline

2 Product Design team · Product · Design System · Content Strategy · Research · Engineering · Business · Accessibility · Legal

2 Product Design team · Product · Design System · Content Strategy · Research · Engineering · Business · Accessibility · Legal

Screenshot of the POC prototype.

Screenshot of the POC prototype.

From there, I worked with product management to define a delivery approach. I initiated foundational research to better understand gaps in existing planning tools, conducting interviews with both TIAA clients and financial advisors to capture a range of perspectives.

From there, I worked with product management to define a delivery approach. I initiated foundational research to better understand gaps in existing planning tools, conducting interviews with both TIAA clients and financial advisors to capture a range of perspectives.

Research finding excerpts.

Research finding excerpts.

Before moving into wireframing, I led working sessions using pen and paper to break down the structure of a transition planner. This helped the team align on core components, feature sets, and information hierarchy.

We then explored multiple wireframe directions, focusing on how to present critical information clearly while balancing input complexity and interactivity.

Before moving into wireframing, I led working sessions using pen and paper to break down the structure of a transition planner. This helped the team align on core components, feature sets, and information hierarchy.

We then explored multiple wireframe directions, focusing on how to present critical information clearly while balancing input complexity and interactivity.

Hand sketches to understand the anatomy of transition planner.

Hand sketches to understand the anatomy of transition planner.

Early low-fidelity wireframe concepts.

Early low-fidelity wireframe concepts.

A key focus was improving how users interpret financial data. One direction removed charts entirely in favor of a simplified, summary-driven dashboard. Another retained charts but paired them with clear, plain-language explanations.

The second approach tested significantly better, both internally and with users, and became the foundation for the product direction.

A key focus was improving how users interpret financial data. One direction removed charts entirely in favor of a simplified, summary-driven dashboard. Another retained charts but paired them with clear, plain-language explanations.

The second approach tested significantly better, both internally and with users, and became the foundation for the product direction.

Two different approaches.

Two different approaches.

This project was one of the first to launch on TIAA’s new design system and the first to introduce data visualization patterns. I worked closely with the design system team to define standards for accessible, scalable data visualization.

I explored multiple concepts, incorporating both internal proposals and external best practices, then validated them through a town hall session with TIAA users before finalizing the approach.

This project was one of the first to launch on TIAA’s new design system and the first to introduce data visualization patterns. I worked closely with the design system team to define standards for accessible, scalable data visualization.

I explored multiple concepts, incorporating both internal proposals and external best practices, then validated them through a town hall session with TIAA users before finalizing the approach.

Rejected designs for data visualization variations.

Content matrix for different scenarios. This particular version was ultimately scrapped and replaced with a whole new matrix.

Content matrix for different scenarios. This particular version was ultimately scrapped and replaced with a whole new matrix.

Rejected designs for insights variations.

Rejected designs for insights variations.

Transition Planner's new landing page.

Transition Planner's new landing page.

The transition planner was designed to lower the barrier to financial planning by making complex data easier to understand and act on.

The transition planner was designed to lower the barrier to financial planning by making complex data easier to understand and act on.

Landing Page animated.

Landing Page animated.

The experience establishes a clear visual hierarchy that guides users through their financial story, creating a structured and easy-to-follow flow.

The experience establishes a clear visual hierarchy that guides users through their financial story, creating a structured and easy-to-follow flow.

Eye movement path.

Eye movement path.

Data visualizations are paired with plain-language insights and contextual prompts. Users first receive a high-level summary, followed by a more detailed breakdown and suggested next steps, helping them move from understanding to action.

Data visualizations are paired with plain-language insights and contextual prompts. Users first receive a high-level summary, followed by a more detailed breakdown and suggested next steps, helping them move from understanding to action.

Insights breakdown.

Insights breakdown.

I focused on making charts easier to interpret, not just supplementing them with explanations. The solution breaks the experience into three charts:

The first focuses on total income to directly answer “Do I have enough?”The second and third provide deeper views into income and expenses, with expense breakdowns optionally available for users who want more control.

Charts are interactive, allowing users to explore specific data points. Any interaction dynamically updates the accompanying insights to reflect the current state, ensuring explanations stay relevant.

I focused on making charts easier to interpret, not just supplementing them with explanations. The solution breaks the experience into three charts:

The first focuses on total income to directly answer “Do I have enough?”The second and third provide deeper views into income and expenses, with expense breakdowns optionally available for users who want more control.

Charts are interactive, allowing users to explore specific data points. Any interaction dynamically updates the accompanying insights to reflect the current state, ensuring explanations stay relevant.

Different chart states and insights.

Different chart states and insights.

For income inputs, the requirement was to integrate an existing flow from another tool. I partnered with the owning team to adapt and refine that flow for the planner.

This required reworking the interaction model into a modal overlay, which conflicted with existing design system guidelines. I collaborated with the design system team to define a new modal pattern specifically for structured data input.

For income inputs, the requirement was to integrate an existing flow from another tool. I partnered with the owning team to adapt and refine that flow for the planner.

This required reworking the interaction model into a modal overlay, which conflicted with existing design system guidelines. I collaborated with the design system team to define a new modal pattern specifically for structured data input.

Income breakdown modal overlays.

Income breakdown modal overlays.

Expense inputs needed to be newly designed. I proposed a bulk editing experience to reduce friction when entering large amounts of data. Due to scope constraints, this was deferred to post-MVP. For launch, we aligned with the updated income input pattern.

Expense inputs needed to be newly designed. I proposed a bulk editing experience to reduce friction when entering large amounts of data. Due to scope constraints, this was deferred to post-MVP. For launch, we aligned with the updated income input pattern.

Accepted MVP screens for adding expense.

Accepted MVP screens for adding expense.

Rejected WIP prototype for adding expense flow.

Rejected WIP prototype for adding expense flow.

Based on user feedback, I introduced support for multiple scenarios, allowing users to compare different financial paths while preserving their progress.

Based on user feedback, I introduced support for multiple scenarios, allowing users to compare different financial paths while preserving their progress.

Add new scenario.

The first focuses on total income to directly answer “Do I have enough?”

The second and third provide deeper views into income and expenses, with expense breakdowns optionally available for users who want more control.

The first focuses on total income to directly answer “Do I have enough?”

The second and third provide deeper views into income and expenses, with expense breakdowns optionally available for users who want more control.

Retained   earnings

Retained   earnings