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

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

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

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

Let's connect and collaborate!

Let's connect and collaborate!

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