RESEARCH RECAP
Screener has strong potential to meet users' investing needs, but its usability challenges are preventing users from fully benefiting from it.
From survey and usability testing results, we found a huge opportunity to improve the Screener by reducing cognitive load and clarifying key interactions, aiming to unlock the full value of the feature.
90%
of users said 'Find potential stocks to invest in.' is the main goal of using an investing tool, showing that Screener could be a valuable feature.
3out of 6
active users feel lost when choosing and setting up filters during the free exploration Screener task.
57.2%
of users feel difficult to use the Screener feature.
Over 50%
of users use the Screener feature infrequently.
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.
INSIGHT 1
SOLUTION 1
V1 to 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 to V3
Enhance UI for clearer category grouping
Applied background color to grouping titles to visually reinforce category distinctions.
SOLUTION 2
V1
Added investment-context labels
Added labels to ranges for users to know the meaning behind the value ranges.
V1 to 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.
TECHNICAL CHALLENGE
During implementation, I learned that because each filter has a different valid range, adding labels to the slider wasn’t feasible, as the labels couldn’t be displayed evenly.
V3 (Release Version)
V2 to V3
Use labeled select options for new investors
To avoid the complexity of slider labels and make filter setup more approachable for new investors, I decided to use labeled select options for quick selection.
Use neutral colors to accommodate all metrics
Since not all metrics have positive or negative meanings, I used neutral colors instead of semantic colors to maintain consistency.
Keep slider design for existing users
Considering existing user habits, we decided to keep the slider for custom range selection.
SOLUTION 3
Learned from competitors
Bring Sample Screener to lower the barrier to build a screener
Screenshot of Robinhood's sample screener page
V1
V2
V3 (Release Version)
Interaction friction in filter controls
Filter editing is click-heavy and disrupted by unnecessary scrolling.
From usability testing, I observed that users must repeatedly click the 'Filter' button to view and select filters, and when adjusting ranges, their workflow is disrupted by having to scroll to locate the filter they just added.
Applied filters are shown as plain text, making users difficult to scan and understand.
Mobile usability concerns
Touch target size is too small for tap accuracy.
The target size for applying each filter (16px*16px) is far below recommended target size on mobile screen (40*40 ~ 44*44 px).
Navigating between filters requires repetitive taps.
I observed that on mobile version, users need to tap repeatedly on the left and the right arrow to navigate between filters to edit ranges.
DESIGN SOLUTION
01
Every time users want to add/remove filters, they need to click ‘Filter’ button. After adding filter, users need to scroll and find it in the list and adjust the range.
02
Applied filters are laid out in plain text, making it hard to understand which filters are active.
Before
01
Keeping the filter list always visible is to reduce the need for extra clicks. Moreover, as filtering is the primary task in Screener, keeping filter list in view encourage users to focus on the main task.
02
Because filters determine how results are generated, users need clear visibility into applied filters to interpret outcomes and take next actions.
V1 to V2
Mode switching may confuse users current status
I tried using Edit button to switch between modes. However, mode switching may confuse users about whether editing is available. Also, clicking on “Edit” and “Done” still adds extra steps.
V2, V3, V4
Explore different options to show filter options
I tried using 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 for V3 design.
V5 (Release Version)
Final Design
How I led to this version?
Balance between content density and user experience
With both labeled select options and a custom slider, placing all elements within a single dropdown could overwhelm users and bring additional implementation complexity. I decided to replace the filter list with the option panel when editing the filter range.
'Show Applied' toggle + dot indicator + applied labels
Dot indicators and sub-labels displaying applied values allow users to quickly scan which filters are active while scrolling. Given the length of the filter list, I added a toggle to show only applied filters.
Use modals for focused interactions with accessible touch targets
Due to limited spaces on mobile screen, I decided to use modal components for the main filter list, enabling users to focus on the primary actions while ensuring the touch sizes are accessible.
Balancing user experience in limited space
Although the filter list is placed in a modal, users can scroll to view applied filters and tap any filter tag to quickly adjust values.
Poor scannability and limited customization in screener table
Users feel hard to scan information, making it hard to select stocks efficiently.
"I don't see anything on this page that would help me be like I should pay attention to this stock."
Users find it difficult to flexibly adjust the columns as they want.
"I have to uncheck these (metrics) between to make these two (metrics) stay together."
SOLUTION 1
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.
Add company logo
We added company logos to help users identify companies at a glance without reading text.
