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, FigJam (Whiteboard tool)
Business Challenges
Business Challenges
Low monthly active users
Low sign-up & free-to-paid conversion
Research
Research
From problem discovery, customer journey mapping, to redesign prioritization
From problem discovery, customer journey mapping, to redesign prioritization
01
Customer Survey
Collect user profile, feature feedback, and recruit participants through customer survey. Sent through email marketing.
02
Usability Testing
Under time and budget limit, I combined user interviews with task-based usability testing.
03
Affinity Diagram & Customer Journey Mapping
Synthesize Insights via Affinity Diagram & Customer Journey Mapping
04
Redesign Prioritization
Decided on redesign priorities using Impact-Feasibility Matrix, facilitating cross-team discussions with the founder, PM, and engineers to reach consensus on project focus.
What we learned from survey?
What we learned from survey?
Over half of users use the Screener feature infrequently.
57.2% of users feel difficult to use the Screener feature.
Desktop and mobile are the two primary ways users access the website.
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
V3 (Release Version)
V1 - V2
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.
V2 - V3
Enhance UI for clearer category grouping
Applied background color to grouping titles to visually reinforce category distinctions.
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)
Finalized value ranges for all metrics
To lower development cost, we decided to push back the multiple-option feature since the slider label already fulfilled user needs.
Micro-interactions
Used low opacity for inactive values and full opacity for included values to provide clear visual feedback.
From User Insights to Design Iterations
From User Insights to Design Iterations
02
How might we reduce unnecessary clicks for filter-editing for desktop and mobile screens?
Managing filters is click-heavy, and users need to find it in the list to adjust the value, interrupting the experience.
Specifically on the mobile screen, the touch points are too small that could cause tapping mistakes.
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 - V2
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.
V1
Edit Mode
V2,3
Expand & Collapse
Dropdown
Keep the filter list always visible
My goal is to keep the filter list always visible, eliminating the need for extra clicks.
Moreover, since filtering is the primary task in Screener, keeping filters in view encourage users to focus on the main task.
V3 (Release Version)
V3 - Final
Desktop - 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.
Mobile - Adjust filters within a modal
Users click on a button to adjust filters within a modal. Instead of switching left and right to adjust filter ranges, users can simply scroll to access different filters, removing additional clicks.
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 identify helpful information, but quickly moved to the Data Visualization page.
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.
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