Redesigning the Stock Screener: Crafting an Intuitive Stock Discovery Experience for Evolving Investors
About Project
I redesigned the Screener feature for a FinTech SaaS investment platform, driving the process from usability interviews through design iterations to design handoff.
My Role
Conduct survey & usability interview
Prioritize design decisions using Impact-Feasibility Matrix
Deliver wireframes & high-fidelity prototypes
Document screen flows and component libraries
Achievements
Reduced stock discovery steps by 25%.
TEAM
1 CEO / Back-end Developer
1 Front-end Developer
1 Financial Analyst
1 Product Designer (Me)
COMPANY
ValueGlance
DURATION
2 months
TOOLS
Figma
Defining Problem
Defining Problem
Over half of users use the Screener feature infrequently.
57.2% of users feel difficult to use the Screener feature.
From Problem Discovery to Insight Prioritization
From Problem Discovery to Insight Prioritization
Usability Testing X User Interview : Spotting Usability Problems and Deeper Pain Points
To evaluate how well the product supports target users’ goals and uncover potential usability issues, I combined user interviews with task-based usability testing.
Synthesize Insights via Affinity Diagram
First Level - Categorized by feature
Second Level - Bottom-up high-level insights
Prioritized Redesign Focus with Impact-Feasibility Matrix
Decided on redesign priorities using Impact-Feasibility Matrix, facilitating team discussions to reach consensus on project focus.
Who are our Users?
Who are our Users?
Michael is a retired teacher and long-term investor who is transitioning from mutual funds and external advice to building his own strategy. He’s seeking a simple, trustworthy approach to make better use of his money.
Michael
Age
60
Gender
Male
Occupation
Teacher
“I was looking for something to get rid of the noise and give me something a little bit more baseline. I want to better use my money.”
“If not mutual funds, what should I buy? When should I sell?”
Background Story
Michael is a retired school teacher who has been investing for eight years. He used to follow various online clubs and primarily invested in mutual funds and the S&P 500. Now, he’s ready for a change. He increasingly doubts external opinions, he wants to take control and make better use of the money he’s worked hard to earn throughout his life.
Overall Goal
He wants to develop a new investment strategy that he can trust on, and make a better use of his money.
Investing Habits
Used to follow on-line personalities, on-line clubs, friends, and family.
Used to invest in mutual funds. Want to start developing his own strategy.
Do long-term investment.
After reading ‘Stock Checking the Price’, came to ValueGlance to implement the strategy.
Pain Points
Skeptical about the people he’s been listening to for investment advice.
No formal financial background. Feels overwhelmed by the complex tools, excessive noise and conflicting opinions in the market.
Usability Study Insights
Usability Study Insights
During usability testing, we discovered that while screening stocks, users struggled to choose the right filters, set meaningful ranges, and understand how each metric aligned with their investment goals. Once they received the results, many found it difficult to evaluate and compare stocks effectively.
From User Insights to Design Iterations
01
How might we guide users in understanding how each metric impacts their screening results?
Users struggle to select the right screener metrics because they don’t understand how each one relates to their investment goals.
DESIGN SOLUTION
Categorize Metrics by Investment Insights
Before
V1
V2 (Release Version)
Avoided red & green to reduce misleading signals
Using green and red in investment applications can create unintended positive or negative perceptions for users. Therefore, for V3, decided to use theme colors.
02
Managing filters requires multiple clicks, creating unnecessary friction.
How might we streamline the filter-management flow to reduce unnecessary clicks and friction?
01
Users struggle to select the right screener metrics because they don’t understand how each one relates to their investment goals.
How might we guide users in understanding how each metric impacts their screening results?
Integrated Investment Insights within Slider to Enhance Intuitiveness
V3 - Release Version
Before
Users feel hard to set up the range since they don't understand what meaning behind the numbers.
V1
Add labels to ranges to convey meaning behind the numbers
Multiple options for quick selection
V2
Use color coding to convey positive and negative investment meanings, such as green for Excellent Quality, yellow for Fair Quality, and red for Poor Quality, helping users intuitively setting up filter range.
Collaborated with Analysts to Apply to Real Ranges and Labels
Balance between UX and Development Cost
After discussion with engineers, we decided to pause developing the multiple-option feature, leaving slider for this release to speed up development process.
Introduce Preset Screeners to Ease Filter Setting Process for Beginner Investors
V1
Access preset screeners through a start page
Page tab design to switch between screeners
V2
Considering that users may not need to open a lot of screener pages at the same time, we decided to get rid of the switch-page feature to lower development complexity.
V3
Simplify the page by combining two sections, and use different style to differentiate ‘Start with Blank’ and Preset Screeners.
V3 - Release Version
Due to limited development resources, we decided to exclude the ‘Start Screen’ from the release version, by using a dropdown instead of building an additional page for now. I archived the start screen design once more screeners are developed in the future.
Redesign User Interactions with Filters
V3 - Release Version
V1 - Edit Mode
Initially I think of this way to avoid hiding filters and keep the whole filter-edit process in one place. However, mode switching may confuse users about whether editing is available. Also, clicking on “Edit” and “Done” still adds extra steps.
V2 - Expand & Collapse
V3 - Dropdown
Use dropdown to remove extra steps and enable direct filter editing. Considering the length of the list and to avoid visual clutter with other filters, I decided to use a side dropdown for the release version.
Before
Every time users want to add/remove filters, they need to click ‘Filter’ button.
After adding filter, users need to find it in the list and adjust the range.
03
Users struggle to identify relevant information in the table, making it difficult to evaluate and select stocks effectively.
How might we present table information more clearly to help users evaluate and select stocks effectively?
04
Users need their customized screener settings to be saved and persist after refreshing, switching pages, or logging out.
How might we design a more intuitive and flexible way to customize table operations?
Leverage Colored Labels and Chart Preview to Quickly Spot Stock Insights
Release Version
Before
From usability testing, we found that many users felt hard to use this table to identify helpful information, but quickly moved to the Data Visualization page.
Users mentioned that it’s important to evaluate company quality with trends, not just the latest data.
I decided to add a chart preview to add more value to the table. During iterative process, I made different design options for discussions with developers, confirming the feasibility. (consider data loading time)
Leverage Colored Labels to Convey Investment Insights
Use color-coded labels, allowing beginner investors to quickly grasp stock performance insights behind the numbers.
Map out Scenarios for Autosaving User Progress
DESIGN SOLUTION
Integrated Investment Insights within Slider to Enhance Intuitiveness
Before
V1
Added investment-context labels to ranges and quick-select options
V2
Visualized investment insights through color coding
Use color coding to convey positive and negative investment meanings, such as green for Excellent Quality, yellow for Fair Quality, and red for Poor Quality, helping users intuitively setting up filter range.
V3 (Release Version)
Collaborated cross-functionally with financial analysts & developers to finalize design for real ranges
To balance UX and development cost, we decided to pause developing the multiple-option feature, leaving slider for this release to speed up development process.
DESIGN SOLUTION
Introduce Preset Screeners to Ease Filter Setting Process for Beginner Investors
V1
Users begin by selecting a preset or creating a new screener from the Start Screen. Each new screener opens in a separate tab. Users can switch between multiple screeners.
V2
Considering that users may not need to open a lot of screener pages at the same time, we decided to get rid of the switch-page feature to lower development complexity.
V3
Simplify the page by combining two sections, and use different style to differentiate ‘Start with Blank’ and Preset Screeners.
V4 (Release Version)
Due to limited development resources, we decided not to include the ‘Start Screen’ in the release version, requiring to build a separate page.
Since there are only a few preset screeners for now. Users can use dropdown menu to switch between them.
From User Insights to Design Iterations
From User Insights to Design Iterations
02
How might we streamline the filter-management flow to reduce unnecessary clicks and friction?
Managing filters requires multiple clicks, creating unnecessary friction.
DESIGN SOLUTION
Redesign User Interactions with Filters
Before
Every time users want to add/remove filters, they need to click ‘Filter’ button.
After adding filter, users need to find it in the list and adjust the range.
V1
Edit Mode
V2,3
Expand & Collapse
Dropdown
Mode switching may cause confusion
Initially I think of this way to avoid hiding filters and keep the whole filter-edit process in one place. However, mode switching may confuse users about whether editing is available. Also, clicking on “Edit” and “Done” still adds extra steps.
Side dropdown design to reduce extra steps and avoid visual clutter
Use dropdown to remove extra steps and enable direct filter editing. Considering the length of the list and to avoid vertical visual clutter with other filters, I decided to use a side dropdown.
03
How might we present table more clearly to help users evaluate and select stocks effectively?
Users struggle to identify relevant information in the table, making it difficult to evaluate and select stocks effectively.
DESIGN SOLUTION
Leverage Colored Labels and Chart Preview to Quickly Spot Stock Insights
Before
From usability testing, we found that many users felt hard to use this table to identify helpful information, but quickly moved to the Data Visualization page.
Quick Chart Preview Showing 5-year Trends
Users mentioned that it’s important to evaluate company quality with trends, not just the latest data.
I decided to add a chart preview to add more value to the table. During iterative process, I made different design options for discussions with developers, confirming the feasibility. (consider data loading time)
One of the versions I made during iteration
Release Version
Leverage colored labels to convey investment insights
Use color-coded labels, allowing beginner investors to quickly grasp stock performance insights behind the numbers.
04
How might we enable users to save and persist their customized screener settings?
Users need their customized screener settings to be saved and persist after refreshing, switching pages, or logging out.
DESIGN SOLUTION
Map out Scenarios for Autosaving User Progress
Building New Components with Existing Design Tokens
I built new components by first expanding the existing design tokens, then creating atom-level and molecule-level components, and finally assembling them into organism-level components.
I built new components by first expanding the existing design tokens, then creating atom-level and molecule-level components, and finally assembling them into organism-level components.
ATOMS
MOLECULES
ORGANISM
TOKENS
Poor
Fair
Excellent
Labels
Slider
Slider control
Hovering
TOKENS
Existing tokens from design system
Red 500
Red 300
Red 100
Green 500
Green 300
Green 100
Yellow 500
Yellow 300
Yellow 100
Slider style
Colors
Defined new design tokens based on the existing palette for new components.
ATOMS
MOLECULES
ORGANISM
Existing tokens from design system
Red 500
Red 300
Red 100
Green 500
Green 300
Green 100
Yellow 500
Yellow 300
Yellow 100
Slider style
Colors
Defined new design tokens based on the existing palette for new components.
My Learning
Reflections on User Research
Advantages of Internal Usability Testing
Gather diverse cross-functional perspectives from on research protocol (e.g. financial analysts providing insights on task design for better alignment with real scenarios).
Uncover potential follow-up questions for formal interviews.
Identify and resolve minor, easily fixable issues with internal team before external testing.
Create post-interview summaries helps align the team to prioritize high-impact issues.
Balance UX and Development Costs
Involving developers early in redesign planning meetings help prioritize design focus effectively.
Prioritize designs that maximize user experience while maintaining low implementation complexity.
Rapidly Iterate on High-Complexity Designs While Avoiding Rework
Always start with creating lo (mid) -fi designs, and brainstorm multiple possible design options to facilitate team discussion.
Once reaching a consensus on main design direction, gradually refine the details.
My Learning
Reflections on User Research
Advantages of Internal Usability Testing
Gather diverse cross-functional perspectives from on research protocol (e.g. financial analysts providing insights on task design for better alignment with real scenarios).
Uncover potential follow-up questions for formal interviews.
Identify and resolve minor, easily fixable issues with internal team before external testing.
Create post-interview summaries helps align the team to prioritize high-impact issues.
Balance UX and Development Costs
Involving developers early in redesign planning meetings help prioritize design focus effectively.
Prioritize designs that maximize user experience while maintaining low implementation complexity.
Rapidly Iterate on High-Complexity Designs While Avoiding Rework
Always start with creating lo (mid) -fi designs, and brainstorm multiple possible design options to facilitate team discussion.
Once reaching a consensus on main design direction, gradually refine the details.
Explore more projects
Explore more projects
Explore more projects
Explore more projects
Redesigning the Stock Screener: Crafting an Intuitive Stock Discovery Experience for Evolving Investors
I redesigned the Screener feature for a FinTech SaaS investment platform, driving the process from usability interviews through design iterations to design handoff.
My Role
Conduct survey & usability interview
Prioritize design decisions using Impact-Feasibility Matrix
Deliver wireframes & high-fidelity prototypes
Document screen flows and component libraries
Achievements
Reduced stock discovery steps by 25%.
TEAM
1 Product Designer (Me)
1 CEO / Back-end Developer
1 Front-end Developer
1 Financial Analyst
COMPANY
ValueGlance
DURATION
2 months
TOOLS
Figma