Background

Setting the Stage for the Redesign

Modernizing the Investments experience was a critical initiative aimed at improving both business retention and user trust. As part of our Wealth DC product suite, this page played a key role in helping participants manage and evaluate their retirement investments. However, outdated design patterns, fragmented navigation, and unclear data presentation were limiting its effectiveness. This project set out to redesign the experience to better reflect the needs of financial users while aligning with current design standards and business expectations.

About the Product

The “Investments” page served Wealth DC clients—employers offering Wealth Management and Defined Contribution (DC) plans—by giving their participants visibility into their personal portfolios and fund performance. Within the Portfolio section, users could view their investment strategy through visual graphs and tables, along with an activity summary. The Fund Performance section allowed users to view a broader list of all available funds, compare rate of returns, explore performance charts, and access detailed Fund Fact Sheets.

Why This Work Mattered Now

The original design was built on a legacy system, and both the visual and technical foundations were becoming increasingly misaligned with the rest of the platform. Product stakeholders identified key areas for improvement—including navigation, content structure, and resource accessibility—and saw this redesign as an opportunity to bring the experience up to current standards while addressing usability gaps.

Drivers for Redesign

The urgency behind this project was driven by both business and user needs. Most notably, the redesign was essential to help retain a $50 million client contract, making it a high-stakes initiative. Internally, there was also pressure to evolve the interface from one that resembled a health benefits experience to something that felt more like a modern financial product, capable of conveying investment data with clarity, trust, and professionalism.

Problem

Defining What Wasn't Working

While the Investments experience offered a range of valuable data, the way it was structured and presented made it difficult for users to engage with confidently. The interface had not kept pace with evolving design standards, and critical investment insights were buried behind confusing navigation and inconsistent layouts. As a result, both internal stakeholders and end users expressed frustration with how the information was surfaced, leading to low engagement with key features.

Key Usability Issues

The experience suffered from a fragmented structure and outdated UI patterns. Key portfolio and fund data was buried deep within subpages, requiring multiple clicks to access. The toggle between Portfolio and Fund Performance lacked clarity, and once on the Fund Performance page, the layout didn’t support side-by-side fund comparisons. Data visualizations were minimal or unclear, and the limited use of interactive or accessible components made it hard for users to digest or act on the information presented.

What We Saw in the Evidence

Internal product teams had received repeated feedback that users could not easily locate or interpret their investment information. Stakeholders also noted that page analytics showed low engagement with deeper tools like Fund Fact Sheets and performance comparisons. The lack of a clear entry point to this content from the homepage was further limiting visibility into the product’s value.

What Users Were Struggling With

Users lacked compelling visual tools to interpret fund data and were often met with dense, table-heavy layouts that made comparisons difficult. Fund details were presented in isolation, offering little guidance on how one fund’s performance stacked up against others. The interface did not encourage exploration or comparison, ultimately preventing users from making informed financial decisions based on their rate of return or asset strategy.

Scope

What We Aimed to Solve—And What We Had to Work Around

This project aimed to redesign and restructure the Investments experience to better support user comprehension, promote fund comparison, and modernize the overall interface to meet client expectations. The scope included: updating the Investments Landing Page, decoupling and redesigning the Fund Performance page, and introducing homepage data cards that could scale across different product areas. While the work introduced new components and workflows, it had to remain within performance and system constraints—balancing innovation with platform feasibility.

User Goals

Users needed to quickly understand how their portfolio was performing, easily compare fund options, and navigate between high-level overviews and detailed data views. The experience also needed to surface key investment insights directly from the homepage to encourage engagement with the broader toolset, all while supporting confident decision-making through clear visuals and structured layouts.

Business Goals

The redesign was driven by the need to retain a high-value client and preserve a $50M contract. Product stakeholders sought to reframe the interface to feel more like a professional financial tool rather than a healthcare platform, while also increasing visibility and usage of the Investments and Fund Performance features. Additionally, the design needed to align with a broader modernization effort across Wealth products for a more consistent user experience.

Design principles guiding decisions

Decisions were grouned in usability best practices including:

• Clarity through hierarchy
• Progressive disclosure to reduce cognitive load
• Visual affordances to support comparison
• Scalable structures for reuse across product lines

Technical Limitations

The design had to work within the constraints of the existing backend infrastructure and shared front-end architecture. Because the homepage hosted modules from multiple products, performance was a critical concern—particularly with the introduction of dynamic UI components. The original concept for data cards, which included tabbed navigation and nested interactions, had to be scaled back to preserve load speed and avoid interfering with other modules on the page.

Timeline Constraints

Due to the urgency of the client renewal, the project operated on an accelerated timeline. Testing, iteration, and design documentation had to be executed concurrently, with minimal room for delay. Despite the scope covering three interconnected deliverables, final designs were delivered on time and in full alignment with development schedules.

Out-of-Scope Areas

To keep the project focused and achievable within the defined constraints, several areas were intentionally left out of scope. The redesign did not involve any changes to the backend data architecture, meaning the UI had to work within existing data structures and feeds. Plan-specific logic or eligibility rules were excluded, as those varied by client and were being addressed in a separate initiative. Personalized investment guidance or advisory tools were also not part of this effort, though the design did aim to better surface educational content. Lastly, while the experience was designed to be responsive for web, mobile app parity was not prioritized in this phase. These boundaries allowed the team to concentrate on performance, usability, and design system integration while setting the foundation for future enhancements..

Approach

Designing for Transparency, Performance, and Scalability

Our approach began with a three-day design workshop that brought together product owners from the Wealth portfolio to align on goals, pain points, and success criteria. From these sessions, we identified the need to restructure the Investments experience into three distinct components: a homepage entry point with data cards, a streamlined Investments Landing Page, and a newly decoupled Fund Performance Page. Each surface required its own structure while maintaining a cohesive visual and interaction model across the flow.

For the homepage, I designed modular data cards that surfaced previously buried wealth insights. The first iteration featured a dynamic card format using horizontal and nested left navigation to display multiple categories of data. However, performance testing revealed this design would negatively impact the shared homepage. We pivoted to a more scalable solution—individual cards built from a unified structure—which allowed users to select up to six cards to personalize their view while keeping the experience performant and consistent with our design system.

For both the Investments and Fund Performance pages, I prioritized clarity through content hierarchy and introduced improved data visualization to support fund comparison. I began with low- to mid-fidelity wireframes to confirm layout and structure, then progressed into high-fidelity designs informed by stakeholder feedback and multiple rounds of testing. I also collaborated with our accessibility team to ensure all data visualizations had table equivalents and met accessibility standards.

Throughout the project, I maintained a dedicated handoff file in Figma with updated flows, page states, and documentation. Separate prototypes were created for usability testing and client demos to ensure clarity, confidentiality, and alignment across audiences. Despite the evolving scope, I managed changes through proactive communication and maintained momentum to deliver all assets on time.

Results

What Improved After the Redesign

The final experience delivered a cohesive, scalable solution that improved data visibility, enhanced fund comparison, and aligned with performance and accessibility standards. Through iterative testing, thoughtful restructuring, and collaboration with product and engineering teams, we successfully met the goals of the redesign while supporting long-term product scalability.

We conducted three rounds of usability testing to validate the full user journey—from homepage data cards to the Investments and Fund Performance pages. Insights from testing led to key refinements, including simplifying the card structure, enhancing content hierarchy, and improving comparison tools for rate of return data. These changes directly addressed user struggles with interpretation and navigation.

The data card framework was transformed from a complex, dynamic component into a set of modular, responsive cards that could be personalized by users and reused across other product lines. I contributed a template version to the design system, enabling future expansion while maintaining consistent sizing, content flexibility, and visual alignment.

Both landing pages featured accessible data visualizations paired with table formats, as well as toggle options on the Fund Performance page to give users control over how data was viewed. Despite mid-project scope increases and performance pivots, I delivered all finalized designs, redlines, and prototypes on time—ensuring a smooth development handoff and supporting the successful renewal of a high-stakes client contract.

Reflection

Lessons in Communication, Alignment, and Design Logic

This project challenged me to think strategically about how to modernize an existing experience without disrupting platform stability or extending the scope. I had to constantly advocate for design logic while aligning with different stakeholder priorities—from business expectations and technical feasibility to long-term design system implications. Navigating a high-stakes redesign with evolving requirements pushed me to make faster, smarter decisions and stay grounded in what would truly move the user experience forward.

• What Worked
• What I'd Do Differently
• Skills Strengthened