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

1 Month

1 Month

Status

Status

Launched

Launched

Challenge

In a 2 week sprint, create three prototype variants of a brokerage account quiz with different visual designs and logic.

Results

This would have required stitching together hundreds of screens, therefore, I learned how to use Figma's (under-baked) variable and logic tools to create the prototypes with much fewer screens.


Challenge

In a 2 week sprint, create three prototype variants of a brokerage account quiz with different visual designs and logic.

Results

This would have required stitching together hundreds of screens, therefore, I learned how to use Figma's (under-baked) variable and logic tools to create the prototypes with much fewer screens.


Challenge

In a 2 week sprint, create three prototype variants of a brokerage account quiz with different visual designs and logic.

Results

This would have required stitching together hundreds of screens, therefore, I learned how to use Figma's (under-baked) variable and logic tools to create the prototypes with much fewer screens.

2

New Global Components Created

New Global Components Created

TBD

User Acquisition Increase

User Acquisition Increase

TBD

Affiliate Revenue Increase

Affiliate Revenue Increase

Research Overview

Research Overview

Within the Money vertical, the sub-vertical of Investing is by far the lowest revenue generating of all sub-verticals. This was mainly because Investing is relatively new compared to other sub-verticals, the demographics and behavior of those who invest and have brokerage accounts, and the lack of useful tools to bring and keep users on the website.

Based on information the product team gathered overtime from various user tests, surveys, competitor research, and web analytics— there were several opportunities identified for creating more value for users.

Within the Money vertical, the sub-vertical of Investing is by far the lowest revenue generating of all sub-verticals. This was mainly because Investing is relatively new compared to other sub-verticals, the demographics and behavior of those who invest and have brokerage accounts, and the lack of useful tools to bring and keep users on the website.

Based on information the product team gathered overtime from various user tests, surveys, competitor research, and web analytics— there were several opportunities identified for creating more value for users.

Product Ideation

Product Ideation

I collaborated directly with the product managers on the Money team to brainstorm ideas for the 2025 Product Roadmap, which ultimately included a lot of new tools and other improvements for the Investing sub-vertical based on information we had gathered from research. Some of these ideas came later in 2025 as we continued to conduct more research. Below are some of the ideas.

I collaborated directly with the product managers on the Money team to brainstorm ideas for the 2025 Product Roadmap, which ultimately included a lot of new tools and other improvements for the Investing sub-vertical based on information we had gathered from research. Some of these ideas came later in 2025 as we continued to conduct more research. Below are some of the ideas.

  • Cryptocurrency Rankings: In 2024, I suggested to product team that we create a cryptocurrency rankings product. The product team excitedly picked this ideas up and put it in the 2025 product roadmap. However, due to the sudden and massive negative impact from AI on the companies revenue, priorities changed and this product has yet to begin design.

  • Cryptocurrency Rankings: In 2024, I suggested to product team that we create a cryptocurrency rankings product. The product team excitedly picked this ideas up and put it in the 2025 product roadmap. However, due to the sudden and massive negative impact from AI on the companies revenue, priorities changed and this product has yet to begin design.

  • Calculators: We had several ideas for new calculators and improvements to existing calculators such as compact versions to put on Investing article pages.

  • Calculators: We had several ideas for new calculators and improvements to existing calculators such as compact versions to put on Investing article pages.

  • Brokerage Finder Quiz: A quiz to help users find a brokerage account best for them.

  • Brokerage Finder Quiz: A quiz to help users find a brokerage account best for them.

Designing a Brokerage Quiz to Help Users Find the Best Brokerage Account

Designing a Brokerage Quiz to Help Users Find the Best Brokerage Account

We decided to run a experiment with three prototype versions. We wanted to see if users preferred buttons with longer or shorter descriptions. We also wanted to test these two similar concepts against a very different concept, which would break each possible selection down into individual yes/no questions.

I used Gemini to help me decide on a visual style for the icons that would encourage trust, feel friendly, communicate clearly, yet not be too distracting.

I chose a soft blue background, again, to encourage calmness, confidence and trust.

To avoid creating any new components, I used the components we already had in our new MUI design system for the stepper. For the purpose of accesssibility, I used both visuals and text for displaying the steps.

We decided to run a experiment with three prototype versions. We wanted to see if users preferred buttons with longer or shorter descriptions. We also wanted to test these two similar concepts against a very different concept, which would break each possible selection down into individual yes/no questions.

I used Gemini to help me decide on a visual style for the icons that would encourage trust, feel friendly, communicate clearly, yet not be too distracting.

I chose a soft blue background, again, to encourage calmness, confidence and trust.

To avoid creating any new components, I used the components we already had in our new MUI design system for the stepper. For the purpose of accesssibility, I used both visuals and text for displaying the steps.

Component Creation and Interaction States

Component Creation and Interaction States

Our design system did not have the buttons I needed, therefore, I broke existing button components and edited them and turned them into new local components.

For our new design system, our team collaborated with developers to figure out a strategy in which, if need be we built new local components compiled of existing MUI components and styles. If there was high demand from other product verticals for any of these new local components then we would build it into Storybook and Figma for everyone to use.

Our design system did not have the buttons I needed, therefore, I broke existing button components and edited them and turned them into new local components.

For our new design system, our team collaborated with developers to figure out a strategy in which, if need be we built new local components compiled of existing MUI components and styles. If there was high demand from other product verticals for any of these new local components then we would build it into Storybook and Figma for everyone to use.

Using Variables and Interaction Logic to Greatly Reduce the Number of Screens Needed for Prototype

Using Variables and Interaction Logic to Greatly Reduce the Number of Screens Needed for Prototype

Nobody else in our organization had any experience with this kind of advanced prototyping in Figma. Therefore, I tried to using Google Gemini to help figure out how to setup the variables and interaction logic and it wasn't actually able to give me anything that worked. A brand new update for Figma released a few days or weeks before starting this project that made changes variables and logic, which I believe is why Gemini was unable to figure this out no matter how detailed my prompts were. I know AI has continued to advance rapidly, but in this case it really did more harm than good because I lost valuable time.

I figured out the most important parts of the logic for these prototypes, which was only allowing users to select a certain number of buttons for certain questions. I wasn't able to get the in-active/active logic for the "Continue Button" working by the end of the sprint, however, this was not part of the requirements and was more of a "nice-to-have". Not shown here is the logic for the tab buttons on the final brokerage match screen.

Nobody else in our organization had any experience with this kind of advanced prototyping in Figma. Therefore, I tried to using Google Gemini to help figure out how to setup the variables and interaction logic and it wasn't actually able to give me anything that worked. A brand new update for Figma released a few days or weeks before starting this project that made changes variables and logic, which I believe is why Gemini was unable to figure this out no matter how detailed my prompts were. I know AI has continued to advance rapidly, but in this case it really did more harm than good because I lost valuable time.

I figured out the most important parts of the logic for these prototypes, which was only allowing users to select a certain number of buttons for certain questions. I wasn't able to get the in-active/active logic for the "Continue Button" working by the end of the sprint, however, this was not part of the requirements and was more of a "nice-to-have". Not shown here is the logic for the tab buttons on the final brokerage match screen.

Final Mockup Flows

Final Mockup Flows

For question 3 and 4 I did use traditional prototyping methods because these were single select questions with only 3 buttons so it was just as easy if not easier than setting up the logic for every button.

For question 3 and 4 I did use traditional prototyping methods because these were single select questions with only 3 buttons so it was just as easy if not easier than setting up the logic for every button.

A Sample of How Many Screens There Would Need to Be Without Using Variables and Logic

A Sample of How Many Screens There Would Need to Be Without Using Variables and Logic

Later after the sprint was finished, I took some time to create variations of every screen state for question 1 so that I could show the business the value of me taking the time to learn advanced prototyping logic in Figma.

This screenshot shows how many screen states there would need to be just for a single question. With the addition of the screen state without any buttons selected that is 39 screens in total just for this one question.

Some of the questions would only need a few variations, but all together there would likely be well over 100 screens, possibly close to or over 200.

Later after the sprint was finished, I took some time to create variations of every screen state for question 1 so that I could show the business the value of me taking the time to learn advanced prototyping logic in Figma.

This screenshot shows how many screen states there would need to be just for a single question. With the addition of the screen state without any buttons selected that is 39 screens in total just for this one question.

Some of the questions would only need a few variations, but all together there would likely be well over 100 screens, possibly close to or over 200.

Prototype Demo

Prototype Demo

User Testing Results

User Testing Results

Unfortunately, I don't have the specific user testing metrics. However, the majority of users preferred the design with the square tile buttons and short descriptions over the other designs. User also completed this version the fastest.

Users overall did not like the third variation with many yes/no questions. They felt belabored and sometimes annoyed.

Most users seemed to have a fairly good if not strong foundational understanding of investing and brokerage accounts, and they didn't need the extra descriptions, which seemed to only slow some users down.

User appreciated having three brokerage account recommendations to choose from at the end of the quiz, as well as the ability to redo the quiz if they wanted to.

Unfortunately, I don't have the specific user testing metrics. However, the majority of users preferred the design with the square tile buttons and short descriptions over the other designs. User also completed this version the fastest.

Users overall did not like the third variation with many yes/no questions. They felt belabored and sometimes annoyed.

Most users seemed to have a fairly good if not strong foundational understanding of investing and brokerage accounts, and they didn't need the extra descriptions, which seemed to only slow some users down.

User appreciated having three brokerage account recommendations to choose from at the end of the quiz, as well as the ability to redo the quiz if they wanted to.

Outcome and What I Learned

Outcome and What I Learned

Like so many other projects at U.S. News & World Report, there has been a big delay in getting this design into production mainly due to the 20% reduction in employees that occurred over the course of 2025. Other factors included the lack of a clear vision from leadership causing constant changes in priorities, as well as the migration to a new design system, MUI, which for many months caused a lot of issues and disruptions. However, this new quiz tool is expected to have a significant impact on improving revenue as well as the overall brand of company.

Like so many other projects at U.S. News & World Report, there has been a big delay in getting this design into production mainly due to the 20% reduction in employees that occurred over the course of 2025. Other factors included the lack of a clear vision from leadership causing constant changes in priorities, as well as the migration to a new design system, MUI, which for many months caused a lot of issues and disruptions. However, this new quiz tool is expected to have a significant impact on improving revenue as well as the overall brand of company.

This was a fantastic opportunity for me in which I was able to gain a much deeper understanding of advanced Figma tools. After this project, I was able to continue building on this knowledge and present what I learned to the rest of the design team so that they could begin using these methods within their product verticals.

I also gained more experience working with generative AI and prompt writing. Although mostly unsuccessful with getting Gemini as well as ChatGPT to give me a step-by-step process that actually worked, I learned a lot about the limitations of these tools, at least at that point. And I'm not a noob with generative AI either. I've been it for quite a while, in particular I've used Midjourney extensively since 2023 and from that I learned how to write more specific and detailed prompts in order to get the result you're looking for.

This was a fantastic opportunity for me in which I was able to gain a much deeper understanding of advanced Figma tools. After this project, I was able to continue building on this knowledge and present what I learned to the rest of the design team so that they could begin using these methods within their product verticals.

I also gained more experience working with generative AI and prompt writing. Although mostly unsuccessful with getting Gemini as well as ChatGPT to give me a step-by-step process that actually worked, I learned a lot about the limitations of these tools, at least at that point. And I'm not a noob with generative AI either. I've been it for quite a while, in particular I've used Midjourney extensively since 2023 and from that I learned how to write more specific and detailed prompts in order to get the result you're looking for.