Streamlining Data: Simplifying Table Filters for Enhanced Information Access
Context
Finance
7 months and on going
Tools Used
Figma
Jira Service Management
My Contribution
Design System
Competitor Research
Hi-fi Design
Prototyping
Team
Renee Yu, UX Designer
Salvator Migliorisi, Product Manager
Rick Miller, Developer
Business Background
PGIM, a global investment management firm, aimed to enhance the functionality of their digital presence by improving table filter capabilities on their main PGIM Investment site. As part of ongoing efforts to provide more efficient tools for users, the goal was to streamline data navigation for investment professionals and clients, making it easier to sift through complex financial data and insights.
The Challenge
The primary challenge was redesigning and optimizing the table filter system to handle large sets of investment data while maintaining a seamless user experience. This involved developing flexible filter components that could adapt to the various investment products and categories PGIM offers. The filters needed to provide users with intuitive options to sort and access relevant information quickly and accurately, enhancing usability without overwhelming users with complexity.
Product Goals
Design goals:
- Simplify the table filter experience for users interacting with large data sets
- Develop flexible and scalable filter components that enhance data accessibility
Business goals:
- Improve PGIM’s investment site usability and data discovery
- Increase user engagement with a more streamlined filter system
My success metrics:
- Improve user interaction with table filter, faster access to relevant data
- Improve client sales process for investment funds
The Outcome
A more powerful and user-friendly table filter system was created, significantly improving the investment site’s data navigation capabilities. As a result, users experienced a smoother and faster way to access key investment data, leading to a 25% increase in data engagement. The client was extremely pleased with the result, as the redesign played a crucial role in the sales process, helping potential clients quickly access and analyze relevant investment information.
The Approach
Research
As the AEM migration progresses, one of the main focuses of my redesign efforts is improving the fund investment filtering system. This feature is essential for enhancing how users interact with and access investment data, ensuring a more seamless and efficient experience.
In the initial phase of the redesign, I conducted a comprehensive audit of the application, documenting each identified issue. To further refine the approach, I categories type of filters used and also interviewed the client, gaining a deeper understanding of their needs and expectations to inform the design process.
Findings
Through the audit, we discovered a lack of consistent filtering across the site. Most pages were treated as “one-off” experiences, which had a significant negative impact on both the user experience and the client’s sales process.
Pain points:
Inconsistent Filter Use: The same type of filter is used in many different ways, creating confusion for users.
Odd Organization: Filters are poorly organized—some are inside a filter component, while others are not, leading to inconsistency.
Excessive Real Estate Usage: The filter occupies a large portion of the screen, requiring users to scroll to access the actual data.
Lack of Device Responsiveness: The filter capability is not responsive across devices, causing users to encounter different filter options depending on the device size.
Design
Component Creation
Based on the research above, I identified patterns across 8 filter pages on the site. This led to the development of a universal filter component for consistent use across all pages.
The new design includes:
Usage guideline
Flexibility to add/edit filters
Device-responsive across all screen sizes.
Result - New vs. Old Design
Now that the component I created is in place, it’s time to see how it performs across pages.
Mutual Funds Performance Page:
New
No excessive scrolling for data
Filters are fully visible upfront
Improved use of spacing and white space
Old
Excessive scrolling for data
Some filters are hidden
Accessibility issue with font colors
Buffer Performance Page:
New
Search and filter capability added
Faster access to data
Old
No filtering capability - user can only sort
UCITS Performance Page:
New
Consistent with all other filter capabilities
Simple layout leads to better readability
Faster access to data
Filters are fully visible upfront
Old
Inconsistent with all other filter pages
Accessibility issue
Excessive scrolling for data
Certain hidden filters
The Impact
A more efficient, user-friendly table filter system was created, improving data navigation on the investment site. This led to a 25% increase in data engagement. The client was pleased with the redesign, as it played a key role in the sales process by helping potential clients quickly access and analyze investment data.