Landing page structure

Designed to bridge messaging from the advertising campaign and provide quick navigation within the page. The hero panel leads with a question aimed at Financial Advisors and the challenges they face in a volatile market “Can I create resilient portfolios amid uncertainty?” The action button auto-scrolls the user down to the solution card that provides CG’s answer to that specific scenario. The sub-navigation bar is a sticky menu so the user can jump link to specific content sections.

Product cards - Investment Fund Family

We designed a new accordion component here to facilitate browsing and learning of the full Fixed Income investment product line which spans 40 funds. The section has its own sub-navigation bar which covers 4 categories of product families. At the top level, each card displays the fund name and key stats. When expanded, a summary and more detailed view of top-line data sets is presented along with 2 action buttons which link the user to the fund’s full detail page as well as a comparison tool.

Solution cards - Client scenarios

This section features 2 new component cards, starting with short-form scenarios reflecting real-world situations that advisor’s clients come to them to help solve. Capital Group has a distinct approach based on 4-roles of fixed income which is visualized as relative proportions to frame investment objectives. Clicking on ‘Fund Ideas’ opens a modal presenting a set of investment funds and their attributes which align with the aforementioned client scenario.

Solution Cards - Advisor challenges

These cards lead with questions from the perspective of the advisor, following with recommended solutions as well as funds to consider. The primary action leads the advisor to request a consult with the CG portfolio construction team. Clicking on the featured products auto-scrolls the user up to the product section and animates that specific product card into its expanded detail state. The intention is to seamlessly guide the viewer to relevant products and services while keeping the user ‘in the room’ so they can easily browse and learn more.

Article cards - Fixed income insights

We introduced this new component first in an A/B test to evaluate user engagement with the interactive accordion card. The benefit to the short-on-time financial advisor is a quick view displaying the key takeaways of each article. The old card format only displayed an image and title, then deep linked the user out to a full article which they were reluctant to read and didn’t want to go through the effort of scanning and finding the key points. So this new card gives them an easy way to browse and scan insights and decide if they want to read more.

User Flow Map

The goal from the start was to minimize the ‘digital distance’ of information destinations for users. We organized the page content sections to be easily accessible and present short-form content with curated relevance for the targeted customer. The map shows how the sub-navigation menu links the user to specific sections, while the cards in each section offer simplified information with interactive actions to satisfy the financial advisors’ need for meaningful data and summarized explanations of how Capital Group’s investment products can work for their wealth management practice and their clients’ objectives.

Thoughts and Ideation

These are some of the first notes and sketches on how to begin solving for the product brief. Initial wireframes are also shown exploring content structure, user journey, and interactive component designs. The design development took many rounds of trial and error, user testing, analysis and refinement in collaboration with the product team and business leadership.