B2B / FINTECH
B2B / FINTECH
Synaptic - Data Filtering
Synaptic - Data Filtering
Re-envisioning how analysts at Venture Capital firms can efficiently discover companies of interest on Synaptic's web app.
Re-envisioning how analysts at Venture Capital firms can efficiently discover companies of interest on Synaptic's web app.
OVERVIEW
Top of Page
Top of Page
Top of Page
PROCESS
Top of Page
Top of Page
Top of Page
TEAM
Harsha (product manager), Nikhilesh, Sameer, Vaibhav (back-end engineers), Rupak (product designer), Jahnavi (product designer intern)
TOOLS
Figma, Notion, Fullstory
ROLE
Competitor analysis, ideation and prototyping, contributed to design system, cross functional collaboration with engineering and product.
TIMELINE
3 months internship
TEAM
Product Manager, Back-end Engineers (3), Product Designer
TIMELINE
3 months internship
TOOLS
Figma, Notion, Fullstory
ROLE
Product Desinger
TEAM
Harsha (product manager), Nikhilesh, Sameer, Vaibhav (back-end engineers), Rupak (product designer), Jahnavi (product designer intern)
TIMELINE
3 months internship
TOOLS
Figma, Notion, Fullstory
ROLE
Competitor analysis, ideation and prototyping, contributed to design system, cross functional collaboration with engineering and product.
PROBLEM AND CONTEXT
What does Synaptic do?
Synaptic offers user traffic data, news sentiment data etc. (aka Alternative Data) of companies to Venture Capital firms. The VC firms use this data to make investment decisions.
What is Screener?
Screener is a no-code web platform analysts filter through company data based on their desired criteria such as - company location or funding amount.
User Problem
Our users are analysts at venture capital firms who want to filter companies based on complex criteria, but research showed that too many dropdowns and a cumbersome 2-step process increased filtering time and flexibility.
An example of what analysts want:
“Companies in United States but not in Atlanta,
with Total Funding Amount > $10M and Glassdoor overall rating MOM > 50%.”
This user problem led VC firms and analysts to adopt the following workarounds.
PROBLEM SPACE
What does Synaptic do?
Synaptic offers user traffic data, news sentiment data etc. (aka Alternative Data) of companies to Venture Capital firms. The VC firms use this data to make investment decisions.
What is Screener?
Screener is a no-code web platform analysts filter through company data based on their desired criteria such as - company location or funding amount.
User Problem
Our users are analysts at venture capital firms who want to filter companies based on complex criteria, but research showed that too many dropdowns and a cumbersome 2-step process increased filtering time and flexibility.
An example of what analysts want:
“Companies in United States but not in Atlanta,
with Total Funding Amount > $10M and Glassdoor overall rating MOM > 50%.”
This user problem led VC firms and analysts to adopt the following workarounds.
SOLUTION OVERVIEW
A single dropdown replacing multiple ones across the screen, enhancing searchability and decreasing time to filter.
A single dropdown replacing multiple ones across the screen, enhancing searchability and decreasing time to filter.
A simplified single filter replacing the unnecessary two-step process.
A simplified single filter replacing the unnecessary two-step process.
Added logical conditions to filters increasing flexibility and complexity, aligning with analysts' needs.
Added logical conditions to filters increasing flexibility and complexity, aligning with analysts' needs.
IMPACT
The redesigned screener is more time efficient and flexible to analysts, with the workarounds and old interface taking much longer to filter, and lower utility than the redesigned solution.
Through my work , not only was I able to make the product more useful to users of the Screener, but also Synaptic as a business, laying the foundations for a more efficient data filtering mechanism in the product.
IMPACT
The redesigned screener is more time efficient and flexible to analysts, with the workarounds and old interface taking much longer to filter, and lower utility than the redesigned solution.
Increase in Flexibility
Decrease in Time Taken
Through my work , not only was I able to make the product more useful to users of the Screener, but also Synaptic as a business, laying the foundations for a more efficient data filtering mechanism in the product.
HERE'S HOW WE GOT THERE
RESEARCH
My primary methods of research were Competitive Analysis and a Cognitive Walkthrough. I was also proactive in asking questions to our founders, designers and product managers, as they hand accumulated subject matter over time, and had previous interactions with users.
01 Competitive Analysis
I analyzed products such as Mixpanel, Fullstory, Crunchbase and Notion. These products involve large databases similar to Synaptic and do not use simple dropdowns to filter through their data.
Key Takeaway 2: General Filter Structure
While a trivial observation, I noticed that the filter structure itself follows a general pattern of field + operator + value. The fields also had several user facing data types: like numbers, words, and dates.
Key Takeaway 1: The Common Dropdown
To filter down to a particular dataset, the user needs to choose a condition or field to filter by. To make adding conditions more intuitive and repeatable, several of these platforms encase every filtering criterion in one large drop down. This eliminates the struggle for ‘searching’ for a criterion on the interface and allows easy access to all fields in one place.
Key Takeaway 3: Operators Matched Datatypes
the operators matched the data types/fields they were operating on. Numbers could be compared with operators like ‘less than’, or ‘between’. This allowed for more complexity in the filters.
02 Cognitive Walkthroughs
Consulted with cofounders and the head of design to compile a list of criteria based on their deep understanding of analyst needs. Our team then conducted cognitive walkthroughs to uncover UX challenges.
Key Takeaways
Too many dropdowns leading to searchability issues —17 were present across the screen.
Each dropdown contains numerous options, requiring extensive scrolling.
Even after using the dropdowns, users must filter the column for specific values, creating an unnecessary two-step process.
Lack of flexibility, binary checkboxes limit the complexity of company filters analysts require.
Key Takeaways (Summary)
Searchability Difficulties
- Too many (17) dropdowns present across the screen
- Tedious dropdown designUnnecessary Two-Step Filtering Process
Lack of Flexibility
- Checkboxes are binary in nature
RESEARCH
My primary methods of research were Competitive Analysis and a Cognitive Walkthrough. I was also proactive in asking questions to our founders, designers and product managers, as they hand accumulated subject matter over time, and had previous interactions with users.
01 Competitive Analysis
I analyzed products such as Mixpanel, Fullstory, Crunchbase and Notion. These products involve large databases similar to Synaptic and do not use simple dropdowns to filter through their data.
Key Takeaway 1: The Common Dropdown
To filter down to a particular dataset, the user needs to choose a condition or field to filter by. To make adding conditions more intuitive and repeatable, several of these platforms encase every filtering criterion in one large drop down. This eliminates the struggle for ‘searching’ for a criterion on the interface and allows easy access to all fields in one place.
While a trivial observation, I noticed that the filter structure itself follows a general pattern of field + operator + value. The fields also had several user facing data types: like numbers, words, and dates.
Key Takeaway 2: General Filter Structure
Key Takeaway 3: Operators Matched Datatypes
the operators matched the data types/fields they were operating on. Numbers could be compared with operators like ‘less than’, or ‘between’. This allowed for more complexity in the filters.
02 Cognitive Walkthroughs
Consulted with cofounders and the head of design to compile a list of criteria based on their deep understanding of analyst needs. Our team then conducted cognitive walkthroughs to uncover UX challenges.
Key Takeaways
Too many dropdowns leading to searchability issues —17 were present across the screen.
Each dropdown contains numerous options, requiring extensive scrolling.
Even after using the dropdowns, users must filter the column for specific values, creating an unnecessary two-step process.
Lack of flexibility, binary checkboxes limit the complexity of company filters analysts require.
Key Takeaways (Summary)
Searchability Difficulties
- Too many (17) dropdowns present across the screen
- Tedious dropdown designUnnecessary Two-Step Filtering Process
Lack of Flexibility
- Checkboxes are binary in nature
DESIGN
Ideation
Diverged and many explored options a few include: separate filters tab, an grouped filters map, and a smart query search.
1 - Filters on a separate tab
2 -Grouped filters map
2 -Grouped filters map
3-Smart Query Search
Explored expanding all the filters into a separate tab. Pros - shows all information at one. Cons - does not relate back to the data table, does not solve searchability difficulties.
Each node can be filled to add a filter, expanding horizontally to add more criteria and filtering by value vertically. Pros & cons - its a new idea and has not been tested, can be simple / confusing.
Asking questions in natural language instead of filters.
Refinement
During team discussions, we realized using only AND logic was too restrictive for the type of company data analysts want.
While AND logic shows companies matching all criteria, analysts may also want to explore companies that match any condition—requiring OR logic. Following is an illustration of AND vs OR logic.
I iterated to design an interactive AND/OR tag, enabling this flexibility from a functional perspective.
Here is how it looks in the final UI.
Evolution of filter dropdown design through the iterations
The filter evolved through iterations, starting with a brute force approach, progressing to functional testing, and incorporating icons to represent data types.
We ultimately chose a lighter inner share with a strong background to embody the futuristic feel of the new design system.
Out of the many we opted for horizontal filters, a proven design in similar products, ensuring both user needs and near-term buildability.
Here are the initial iterations of the horizontal filters. We used a brute force approach to mock up how the filters might align with analysts' company data needs.
Taking the Paved Path
DESIGN
Ideation
Diverged and many explored options a few include: separate filters tab, an grouped filters map, and a smart query search.
1 - Filters on a separate tab
Explored expanding all the filters into a separate tab. Pros - shows all information at one. Cons - does not relate back to the data table, does not solve searchability difficulties.
2 -Grouped filters map
Each node can be filled to add a filter, expanding horizontally to add more criteria and filtering by value vertically. Pros & cons - its a new idea and has not been tested, can be simple / confusing.
3-Smart Query Search
Asking questions in natural language instead of filters.
Out of the many we opted for horizontal filters, a proven design in similar products, ensuring both user needs and near-term buildability.
Refinement
During team discussions, we realized using only AND logic was too restrictive for the type of company data analysts want.
While AND logic shows companies matching all criteria, analysts may also want to explore companies that match any condition—requiring OR logic. Following is an illustration of AND vs OR logic.
I iterated to design an interactive AND/OR tag, enabling this flexibility from a functional perspective.
Here is how it looks in the final UI.
The filter evolved through iterations, starting with a brute force approach, progressing to functional testing, and incorporating icons to represent data types.
We ultimately chose a lighter inner share with a strong background to embody the futuristic feel of the new design system.
Evolution of filter dropdown design through the iterations
REFLECTION
1
This was my first product design internship. I learned that interfaces often carry inherent complexity, and it’s my role as a designer to identify opportunities for simplification.
2
I learnt that collaboration and stakeholder alignment are key. Because it ensures buildability and the robustness of the product being built.
3
I learned to not hesitate in asking questions and exploring new ideas. Although we couldn't proceed with many ideas initially, it sparked valuable discussions and future possibilities.
REFLECTION
1
This was my first product design internship. I learned that interfaces often carry inherent complexity, and it’s my role as a designer to identify opportunities for simplification.
2
I learnt that collaboration and stakeholder alignment are key. Because it ensures buildability and the robustness of the product being built.
3
I learned to not hesitate in asking questions and exploring new ideas. Although we couldn't proceed with many ideas initially, it sparked valuable discussions and future possibilities.
Designed with care, coffee and countless all-nighters.
Designed with care, coffee and countless all-nighters.
JAHNAVI KOLAKALURI © 2024
Built with Framer.
JAHNAVI KOLAKALURI © 2024
Built with Framer.