Vanguard Investors
Vanguard is an investment firm that offers a vast selection of investments, advice, and retirement services.
We aim to optimize user experience on the mutual funds and ETFs pages, so users feel empowered to make educated financial decisions and achieve their investment goals.
Problem
Learning how to invest and opening an account can be daunting to users.
Solution
ROLE
Product Designer
TEAM
1 strategist, 1 analyst,
3 developers
DELIVERABLES
Experience map, user testing, stakeholder interviews, infographics, wireframes, prototypes
DURATION
Jan - Mar 2023 (3 months)
Redesign Mutual funds and ETFs pages to educate users and encourage them to open an account at Vanguard.
The process
Once we synthesized our findings from the experience map, we performed page audits and briefly looked into our competitors. We sketched the page layout to break down and structure content on the page. Later, we created variations of the page, and iterated several times based on stakeholder feedback.
Experience map research
The purpose of our experience map was to capture how users navigate through Vanguard's self-directed journey and identify moments where we can improve the experience. We want to uncover major pain points, identify unmet information needs, and learn how they find and understand different types of content. We learned what types of information people find helpful and explored ways to present that content in useful ways, at the right moment in their journey. We used a multi-pronged approach, using internal and external resources and methods to conduct our study
Our approach:
-
11 Interviews with key internal stakeholders (30 min)
-
9 Unmoderated prospect interviews
-
Language and Content Study
-
​Exit Intent Surveys
-
2022 data recap
-
SEO recommendations for 2023
-
Page audit and research summary
Our figjam research board
Challenges & considerations
These are the challenges that we learned from our experience map research. We formulated ways to address them during our ideation.
#1: HMW provide more detailed information to help users make informed decisions?
As we get closer to the end of the sales funnel, there is an opportunity to provide more detailed information. Content on secondary pages need to be more specific and speak to all kinds of investors. Stakeholder interviews, language study, and SEO asked us to reexamine language and make the content more inviting, relatable, and digestible.
"The top-level pages are too “fluffy” and try to speak to everyone, but really speak to no one (too much marketing speak)" - Stakeholder #5
Considerations:
-
Off-ramps to 101 type content
-
Avoid jargon and marketing copy. Lean into plain speak and making a human connection.
Site IA
#2: HMW vary experience by content level?
Our audience vary between savvy and novice investors. They want to dictate how much or how little guidance they want along their journey. Stakeholder interviews, user testing, and analytics allowed us to dig into behavioral patterns, information needs, and expectations of users. For instance, users navigated directly to the funds list and want to “play around” before acting.
Considerations:
-
Create content that address 2 paths: direct and exploratory
-
Run page level experimentation to serve up different content based off comprehension level.
-
Work with analytics to learn more about our users, and how we define the novice to savvy spectrum
-
Lead with personalized experiences and targeted content by showing people what they are looking for
#3: HMW create a consistent and timely experience?
Users often admit to using outside resources to do their research before coming to our site to purchase. To reduce abandonment rates, we need create a cohesive educational experience. Stakeholders and SEO suggest presenting fresh data and using smarter shopping data that Vanguard owns to serve up unique information and additional context.
​
“The more information you can provide - the more legitimate your site is. The ones that are shady are the ones that give you as little as possible.” - User #5
Considerations:
-
Email and social campaigns should be consistent and unique to our brand
-
Stay on top of market trends and make sure data is relevant and up to date
-
Leverage data sets unique to Vanguard that users cannot source elsewhere
#4: HMW re-position our advice offering?
Self-directed users take a lot of pride in taking ownership of their investment journey. Both the language study and page analytics support the idea that users who prefer the self-directed path have a general mistrust with advisors. They dislike claims that we know their portfolio or care much as about their money as they do. They desire professionalism and competency more than friendliness.
Considerations:
-
Guide people in the direction of an experience that is more relevant to their needs
-
Support is different from advice
#5: HMW differentiate goals based on prospects vs. clients?
Prospects and clients should have unique journeys. Currently, there is no difference in how these 2 groups are addressed on the site. Exit intent surveys reveal that some visitors want to see how their account is doing, and others want to know what Vanguard is bringing to the table. Differentiating the experience based on account type, activity, or intent would create a much more engaging experience. We want to support users to take action and remove any barriers to achieving their goals.
​
"How do we address the difference between prospects and clients? Need to address clients who are sitting on opportunities but need more education" - Stakeholder #9
Considerations for clients:
-
Drive engagement to look into new accounts and products
-
Shift focus from OOA to purchase new products
-
Address retail vs. retirement clients
Considerations for prospects:
-
Focus on “why Vanguard” to build trust and brand recognition
-
Apply OOA and “how to get started” content
Mutual funds exit intent survey results
ETFs exit intent survey results
#6: HMW point users in the right direction and empower them to draw their own conclusions?Showing people instead of telling them is important in building trust and helping people do it on their own. Based on user testing and exit intent surveys, we learned that the ability to compare information with content types through charts or graphs are highly desirable.
​
“If you’re gonna catch the eye of someone who doesn’t want to sit and study it, the simpler the better.” - User #4
Considerations:
-
Interactive tools and dynamic content can address people who want to explore and “play”
-
At-a-glance data, tables, charts, and graphs can be helpful resources
-
“Cheat sheet” for investing
Cracking the mutual funds page
Iterations of the mutual funds page. From left to right: original to final design.
After several rounds of feedback, we were able to settle on the final design. In contrast to the original page, we re-organized and re-structured the information based on our findings from the experience map research. Along the way, we solved for several obstacles.
-min.png)
4
Grouping our products based on what investors value or want to achieve.
Featured FAQs for additional resources and SEO targets.
Modernized page by taking advantage of new carousel and card components.
1
Prioritizing "Open an account"OKRs.
2
Providing transparency to our users by disclosing information about our fees and commissions.
3
Differentiating prospect from client experiences with "Open an account" CTAs. Client's version is replaced with "Buy a mutual fund" CTAs.
5
Adding a ETF vs. mutual funds comparison table to balance educational and shop content
Final mutual funds page: prospect version (omitted disclosure and footer at the bottom)
#1 Keeping users engaged and allowing room for exploration
We learned that many users exited our mutual funds page before having the chance to explore and scroll further down the page. Based on our analytics, 75% of users would arrive at our page and click on the funds list CTA in our hero spot. To counter this, we looked back at our OKRs and prioritized “Open an account” or “Buy a mutual fund” CTAs. In case users still want to look at our funds list, we included it in both the hyperlink and the navigation menu.
​
Aiming to modernize the page, we strayed away from plain text blocks and took advantage of new interactive components in our design system. We incorporated new card styles with hover states and carousels to keep users engaged as they continue to scroll down the page.
​
#2 Providing transparency and earning trust
As a financial institution, we want to earn people’s trust and put their mind at ease. We strive for transparency by adding information about our fees and commissions at the top of the page. We also added a reminder of why people choose Vanguard and what makes us different from other companies.
#3 Differentiating prospect from client experiences
Prospects and clients have different goals, barriers, and user flows. For prospects, the goal is to learn about Vanguard and our products, and to ultimately open an account. For clients, the goal on our retail site is to purchase a new product. Taking these objectives into consideration, we built a retargeted experience and created 2 different versions of the page. Prospects, who are not logged in, will see an “Open an account” CTA. Clients, who are logged in, will see a “Buy a mutual fund” CTA. This is our first attempt in addressing the prospect vs. client experience. We’re hoping it will reduce frustration for clients, who were continually prompted to open an account.
​
#4 Grouping our product offerings based on users’ goals
We offer different fund strategies or approaches, based on what investors value or want to achieve. The product offerings on the original page was incredibly spread out. While target retirement funds were initially isolated on the page, we grouped it with the rest of the strategies after confirmation from the business side. We also featured non-Vanguard funds within the same area to communicate to users that they’re not limited to Vanguard funds in their brokerage accounts.
​
#5 Striking a balance between educational and shop content
Since our investors vary in experience and knowledge, we wanted to give users enough information to make decisions and avoid any marketing “fluff.” We provided a foundational understanding of the product as an introduction. In the middle of the page, we showcased our product offerings. Additional educational content and resources were displayed further down the page for users who wanted to dive deeper. These resources feature a new comparison table of ETFs vs. mutual funds, a rendition of a “cheat sheet” that users have requested. The table includes tooltips to elaborate on complex financial terms, making it clear for novice investors. Other notable resources are article links and FAQs, suggested by SEO.
Solving for the ETF page
Iterations of the ETF page. From left to right: original to final design.
The ETF page shares a lot of overlapping content with the mutual funds page. Since the products are similar, we wanted to create a similar mental model for users. Instead of making them navigate through entirely new content, we wanted to meet the expectations that they already have about our system.
Retargeting with client vs. prospect experience with different CTAs.
-min.png)
1
Answering "what, why, how" to reduce anxiety in investing in ETFs.
3
Featuring tools that users can interact with to emulate a true shopping experience.
Keeping similar card style as mutual funds to correspond to mental model.
2
Storytelling with data visualization to make complex financial topics more digestable.
Final ETF page: prospect version (omitted disclosure and footer at the bottom)
#1: Simplifying content for users
Ordering the sections on the page was a deliberate process. We didn’t want users to walk into our page, and immediately say to them, “Here, buy our funds.” We also didn’t want to overwhelm the users with overly complex topics, like taxes and expense ratios, mentioned in our infographics. To welcome our users, we needed an introduction and a nice progression into our products. As a solution, we brought back the very basics. We moved some of our FAQs to the top of the page to answer “what, why, and how.” The addition of this educational content helps visitors obtain a basic understanding of ETFs, and can reduce their anxiety to start investing in them.
#2: Storytelling with data visualization
As part of our data visualization initiative, we created infographics to help users better understand complex financial topics. We’re showing, instead of telling, how Vanguard products are better than our competitors. The combination of illustrations and statistics adds a human approach, rather than using straight numbers.
​
#3: Adding tools and opportunities to interact
We took advantage of relevant tools that we have spread out across our site, and promoted them on our ETF page. The comparison tool allows users to compare up to 5 mutual funds or ETFs. The online screener gets users a list of mutual funds and ETFs that match their criteria. Lastly, the investor questionnaire helps users get started by finding their asset allocation. Like a true retail experience, these tools encourage users to do their own research, and allow them to “play around” or “try” our products out before committing to them and purchasing.
The impact
We tracked page metrics to gauge user engagement and interaction on the new mutual funds page design. In 6 weeks, there was a 31% relative lift on educational CTA click rate, and a 19% lift on open account start rate. The analytics indicate that the page was successful in educating users about mutual funds and prompting them to open an account.
What's next?
In our next step, we will perform another experience map on another set of secondary pages. We hope to take what we learned from the mutual funds and ETFs pages and apply it to other pages. We would also like to look into how we can bridge the gap between the retail site and secure site to provide a more seamless experience for users.
Learnings
It was an exciting challenge transitioning from smaller projects, like the infographics, to taking on larger projects, like full page redesigns. Throughout the project, I learned how to be flexible and how to reason with stakeholders for certain design decisions. Since some design components needed more time to be developed, we had to leverage ones that were readily available without compromising on the design. We also changed our approval process to incorporate feedback earlier on, and partner with external teams.
👋 Hope to hear from you soon!