AI-Augmented Exploration & Testing: Financial Advisors Redesign
AI-Augmented Exploration & Testing: Financial Advisors Redesign
AI-Augmented Exploration & Testing: Financial Advisors Redesign
Tools Used
Tools Used
Figma, UserTesting.com, Storybook
Figma, UserTesting.com, Storybook
My Role
My Role
UX/UI Designer & Researcher
UX/UI Designer & Researcher
Length
Length
3 Months
3 Months
Status
Status
Launched
Launched
Background
The Financial Advisors product for the Money vertical had not been redesigned in a long time and it was underperforming well below its potential. The business model for this product is based on partnerships with multiple financial advisor tools (Datalign, Zoe and SmartAsset) and funneling users into these tools, at which point U.S. News gets paid. However, U.S. News was also in the process of moving away from these partners and consolidating with a single new partner (AdvisorFinder). This new partnership also changed where U.S. News got its data from.
The work shown here was part of a phased plan for improving the entire experience, however, work is still ongoing for the redesign of the profile pages.
Results
The initial launch of the updated Financial Advisor Profile Cards have seen a meaningful increase in these key metrics.
The Lender Detail Cards will undergo usability testing soon to determine the best design to develop, but initial feedback from stakeholders including product and design leadership have been overwhelmingly positive.
Background
The Financial Advisors product for the Money vertical had not been redesigned in a long time and it was underperforming well below its potential. The business model for this product is based on partnerships with multiple financial advisor tools (Datalign, Zoe and SmartAsset) and funneling users into these tools, at which point U.S. News gets paid. However, U.S. News was also in the process of moving away from these partners and consolidating with a single new partner (AdvisorFinder). This new partnership also changed where U.S. News got its data from.
The work shown here was part of a phased plan for improving the entire experience, however, work is still ongoing for the redesign of the profile pages.
Results
The initial launch of the updated Financial Advisor Profile Cards have seen a meaningful increase in these key metrics.
The Lender Detail Cards will undergo usability testing soon to determine the best design to develop, but initial feedback from stakeholders including product and design leadership have been overwhelmingly positive.
Background
The Financial Advisors product for the Money vertical had not been redesigned in a long time and it was underperforming well below its potential. The business model for this product is based on partnerships with multiple financial advisor tools (Datalign, Zoe and SmartAsset) and funneling users into these tools, at which point U.S. News gets paid. However, U.S. News was also in the process of moving away from these partners and consolidating with a single new partner (AdvisorFinder). This new partnership also changed where U.S. News got its data from.
The work shown here was part of a phased plan for improving the entire experience, however, work is still ongoing for the redesign of the profile pages.
Results
The initial launch of the updated Financial Advisor Profile Cards have seen a meaningful increase in these key metrics.
The Lender Detail Cards will undergo usability testing soon to determine the best design to develop, but initial feedback from stakeholders including product and design leadership have been overwhelmingly positive.
2
New Global Components Created
New Global Components Created
8%
Click-Through-Rate Increase
Click-Through-Rate Increase
3%
Conversion Rate Increase
Conversion Rate Increase
Problem
Problem
How can we improve the Financial Advisor product to serve both user trust and business conversion— in a space where the underlying data Is regulatory and many advisors haven't opted into the experience.
How can we improve the Financial Advisor product to serve both user trust and business conversion— in a space where the underlying data Is regulatory and many advisors haven't opted into the experience.
Evaluating the Financial Advisor Search Pages with User Testing
Evaluating the Financial Advisor Search Pages with User Testing
User Quotes
User Quotes
User Quotes
"So far this website, I don't really like it. It doesn't really tell me the information that I want to know."
"I know it's US News, but it feels kind of sketchy."
"The sidebar is great, it would be really valuable to me."
"So far this website, I don't really like it. It doesn't really tell me the information that I want to know."
"I know it's US News, but it feels kind of sketchy."
"The sidebar is great, it would be really valuable to me."
"So far this website, I don't really like it. It doesn't really tell me the information that I want to know."
"I know it's US News, but it feels kind of sketchy."
"The sidebar is great, it would be really valuable to me."
Key Highlights
Key Highlights
Key Highlights
User relies on trusted sources while looking for financial advisor.
User relies on trusted sources while looking for financial advisor.
User also mentioned that this tool is not useful for them in searching for advisor and isn't suitable for the end goal.
User also mentioned that this tool is not useful for them in searching for advisor and isn't suitable for the end goal.
User doesn't feel that this website is a reliable source of information on searching for financial advisors
User doesn't feel that this website is a reliable source of information on searching for financial advisors
User mentioned that they would like to see links to financial advisor businesses or bureaus as well as honest testimonials.
User mentioned that they would like to see links to financial advisor businesses or bureaus as well as honest testimonials.
Bugs: During filter search, it doesn't work with Zip code, only city/state
Bugs: During filter search, it doesn't work with Zip code, only city/state
Summary
Summary
Summary
Users expressed dissatisfaction with the tool's current functionality, particularly its limitations in filtering by zip code and its lack of reliable information sources. They emphasized the need for trustworthy information, such as links to advisor businesses and honest testimonial, to aid in their search for a financial advisor.
Users expressed dissatisfaction with the tool's current functionality, particularly its limitations in filtering by zip code and its lack of reliable information sources. They emphasized the need for trustworthy information, such as links to advisor businesses and honest testimonial, to aid in their search for a financial advisor.
Users expressed dissatisfaction with the tool's current functionality, particularly its limitations in filtering by zip code and its lack of reliable information sources. They emphasized the need for trustworthy information, such as links to advisor businesses and honest testimonial, to aid in their search for a financial advisor.
Validating Assumptions and Qualitative Data with Qualitative Data
Validating Assumptions and Qualitative Data with Qualitative Data
We ran heatmaps on the search and profile pages for mobile and desktop, and although I unfortunately don't have any specific data or images to show for them, I am able to provide a high-level overview of the results. These results weren't that surprising, but did help us confirm the highest priority issues.
We ran heatmaps on the search and profile pages for mobile and desktop, and although I unfortunately don't have any specific data or images to show for them, I am able to provide a high-level overview of the results. These results weren't that surprising, but did help us confirm the highest priority issues.
Confusion and Frustration: There were a lot of random clicking and rage clicking all over the place on the profile cards.
Confusion and Frustration: There were a lot of random clicking and rage clicking all over the place on the profile cards.
Visibility: Particularly for the profile page, which is very long and dense with information and ads, users aren't scrolling very far and hence not seeing and clicking on the "Edit Profile" button.
Visibility: Particularly for the profile page, which is very long and dense with information and ads, users aren't scrolling very far and hence not seeing and clicking on the "Edit Profile" button.
Filter Usage: Overall clicks on the filters were quite low compared to clicks on the cards. Users seemed most interested in the "Specialties / Services" filter.
Filter Usage: Overall clicks on the filters were quite low compared to clicks on the cards. Users seemed most interested in the "Specialties / Services" filter.
Planning for an Improved Financial Advisor Experience
Planning for an Improved Financial Advisor Experience
Step One - Improve Top of Funnel: Redesign the Profile Cards on the Search Results pages so more visually appealing, builds trust, and increases the number of users navigating to financial advisor profile pages.
Step One - Improve Top of Funnel: Redesign the Profile Cards on the Search Results pages so more visually appealing, builds trust, and increases the number of users navigating to financial advisor profile pages.
Step Two - Make the Onboarding Process Easier for Advisors : Redesign the Onboarding / Claim Profile experience for advisors so more profiles will show a real person's face and have the "Verified Advisor" banner (key trust signals).
Step Two - Make the Onboarding Process Easier for Advisors : Redesign the Onboarding / Claim Profile experience for advisors so more profiles will show a real person's face and have the "Verified Advisor" banner (key trust signals).
Step Three - Improve Bottom of Funnel: Redesign the Profile Pages themselves so they match the visual aesthetic and goals of the rest of the redesigned experience. Make it easier for advisors to find the "Edit Profile" and claim their profile.
Step Three - Improve Bottom of Funnel: Redesign the Profile Pages themselves so they match the visual aesthetic and goals of the rest of the redesigned experience. Make it easier for advisors to find the "Edit Profile" and claim their profile.
Exploring a New Way to Start the Design Process Using AI
Exploring a New Way to Start the Design Process Using AI
v0 Mockups - Profile Cards
v0 Mockups - Profile Cards
v0 Mockups - Profile Cards
First, I uploaded screenshots to the AI chat prompt of the profile cards from the old live financial advisors search results webpage.
I then told v0 to create three redesign variations of these cards focusing on key criteria such as "modern" and "usability".
I included additional context, requirements and goals for this project including increasing conversion rate.
First, I uploaded screenshots to the AI chat prompt of the profile cards from the old live financial advisors search results webpage.
I then told v0 to create three redesign variations of these cards focusing on key criteria such as "modern" and "usability".
I included additional context, requirements and goals for this project including increasing conversion rate.
Utilizing AI Mockups to Inform the Design of New Profile Cards
Utilizing AI Mockups to Inform the Design of New Profile Cards
I used the general visual styles and layouts of the AI mockups as a reference to help me design the mockups in Figma. However, there were many small details that needed to be re-thought and changed based on requirements, context, etc.
Not only did the AI mockups have mistakes that didn't make sense, but there were considerations from an interaction design point of view that I wanted to test.
One example of this is the use of drop shadows, which has been used inconsistently throughout the entire website and had become a point of discussion within the design team. I've spent time looking at different high-end products and websites to see how they handle drop shadows, and it's interesting yet confusing to see how so many different products use them.
I decided to use drop shadows differently for each of the three mockups to help me see first-hand which one would perform better in user testing or to find if it didn't really matter that much.
Obviously, there are many other factors that come into play here with how different the cards look, but it was something I was curious about.
I used the general visual styles and layouts of the AI mockups as a reference to help me design the mockups in Figma. However, there were many small details that needed to be re-thought and changed based on requirements, context, etc.
Not only did the AI mockups have mistakes that didn't make sense, but there were considerations from an interaction design point of view that I wanted to test.
One example of this is the use of drop shadows, which has been used inconsistently throughout the entire website and had become a point of discussion within the design team. I've spent time looking at different high-end products and websites to see how they handle drop shadows, and it's interesting yet confusing to see how so many different products use them.
I decided to use drop shadows differently for each of the three mockups to help me see first-hand which one would perform better in user testing or to find if it didn't really matter that much.
Obviously, there are many other factors that come into play here with how different the cards look, but it was something I was curious about.
Finding the Winner with User Testing
Finding the Winner with User Testing
The card shown here was the winner of user testing. Overall users felt this card was the most clean, straight-forward and easy card to view and find the information they wanted.
This card also performed best in terms of usability and task completion. The bigger and flashier visuals of the other cards seemed to create visual clutter and complexity that made it more difficult to figure out or decide what to click on.
The card shown here was the winner of user testing. Overall users felt this card was the most clean, straight-forward and easy card to view and find the information they wanted.
This card also performed best in terms of usability and task completion. The bigger and flashier visuals of the other cards seemed to create visual clutter and complexity that made it more difficult to figure out or decide what to click on.
Redesigning the Advisor Onboarding Flow
Redesigning the Advisor Onboarding Flow
I didn't feel the need to use AI to help create the onboarding flow, since it wasn't as unique or complex overall as the profile cards. However, the Stepper component did offer quite a bit of a challenge because the stepper/progress components that came with the new MUI component library weren't useful or flexible, so I made some changes and updated the component.
I didn't feel the need to use AI to help create the onboarding flow, since it wasn't as unique or complex overall as the profile cards. However, the Stepper component did offer quite a bit of a challenge because the stepper/progress components that came with the new MUI component library weren't useful or flexible, so I made some changes and updated the component.
Outcome
Outcome
Both of these designs were successfully launched and there has already been an increase in key metrics. It will take more time to see the results of the new advisor profile onboarding flow. Upper leadership were very happy and excited with the new design and direction that the Financial Advisors product is going.
Both of these designs were successfully launched and there has already been an increase in key metrics. It will take more time to see the results of the new advisor profile onboarding flow. Upper leadership were very happy and excited with the new design and direction that the Financial Advisors product is going.
Before
After
