New Filter View
Project Achievements
80% of customers gave positive feedback
Establishing a design system
Reduced time required to interact with filter inputs.
60% decrease in page drop-offs
25% decrease in Time on Task
My Role
Design Lead
Product Manager
User Researcher
Original Request
CloudBolt’s FinOps application offers various reporting sections for cloud costs tailored to specific contexts. However, each section had inconsistent filters, locations, and ordering.
The business required a cleanup of the application UI to address customer feedback regarding page inconsistencies and difficult-to-use filters.
Project Definition
Fix the inconsistencies in filters
Location, placement, order, styling, button, colors
Technology
Create a reusable comment that can be used across the app
Inspiration
Websites often do not display all filter options initially
Left-side filters with small scrollable boxes for many options
Show the applied filters in a visible spot that summarizes the user's view
Sketching for Layout
Adding a collapsible filter area will make the filter component more flexible for different pages. Users can expand or collapse the filters as needed.
Iterating
Validated the new filter’s location with the customers.
In this exercise, I concentrated on the app's most complex, heavily filtered, and frequently used page. I collaborated with several clients and sales engineers to gain insights into filter placement priorities and simplification.
Filter Improvements
Old Filters
New Filters
Client feedback led us to simplify the filters menu into collapsible sections. On the Cost Reports page, we combined all filters into one line, freeing up space. When closed, the filters still show relevant applied filter information.
Grouping Filters
This approach enabled users to open specific sections without being overwhelmed by all the filter options at once, while still displaying the applied filters in the chips.
Dashboard Filters
Old Filters
New Filters
The new filters on the dashboard freed up vertical space, allowing the filter capabilities to expand without pushing the content further down the page.
New Filters on Service Adviser
Old Filters
New Filters
We continued to free up vertical space on the Service Adviser page, creating room for future expansion of filter capabilities.
New Filters on Service Manager
Adjacent to the Cost Reports page, the Service Manager experienced the most noticeable visual enhancement with the new filters menu.
Project Achievements
80% of customers gave positive feedback
Establishing a design system
Reduced time required to interact with filter inputs.
60% decrease in page drop-offs
25% decrease in Time on Task