1 of 16

Transforming the Filter Modal Experience

�

Renee Romero

2 of 16

My role:

Senior UX Designer, Renee Romero

Project overview

Responsibilities:

User research, information architecture, content strategy, visual design, design system, and validation.

3 of 16

The product’s feature:

This complex filter modal is used by Schedulers to coordinate meetings between Officers and Asylum Seekers.

Project overview

Project duration:

The timeline for this project was 12 weeks spanning from August 2024 – October 2024.

4 of 16

The problem:

Filters are not prioritized and misaligned causing confusion. There is no feedback validation nor a results page to support the users’ experience.

Project overview

The goal:

Reorganize the modal layout to reflect logical groupings and include a way for users to receive visual validation and include a results page to refine filtered selections.

5 of 16

Understanding

the user

  • User research
  • Personas
  • Problem statements
  • User journey maps

6 of 16

User research: pain points

Pain point

Most users want a consistent way to view and select filters.

Pain point

Users cannot recall, let alone view selected filters.

Pain point

Users want a way to edit applied filters from results page.

1

2

3

7 of 16

User research and inspiration

In addition to user input, other input came from stakeholder and product owners. I also reviewed filtering best practices from Nielsen Norman Group and other articles, and design influencers such as Vitaly Friedman.

​

The insights discovered were to focus on readability, consistency and ease of use.

8 of 16

  • Paper wireframes
  • Digital wireframes
  • Low-fidelity prototype
  • Usability studies

Starting

the design

9 of 16

Initial Paper Sketches

Paper wireframes

​

  • Sketched 15 quick ideas to explore layout options
  • Collaborated with developer to discuss feasibility
  • Considered 'mad-libs' approach before pivoting to a streamlined version

10 of 16

Design Iteration in Figma

Digital wireframes

​

  • Used Auto Layout for responsive, maintainable design
  • Incorporated Product Manager’s direction
  • Mockups refined structure and behavior of filter modal

11 of 16

Organizing the Modal

Image of paper wireframes including five different versions of the same screen and one image of the new, refined version

Mapping and grouping

​

  • Mapped component relationships using color-coded lines
  • Reorganized filters into: Users, Locations, Time, Display
  • Supported logic-driven user flow

12 of 16

Updated Filter Modal

Design callouts

​

  • 4-column layout: Time & Offices, Users, Schedules, Display
  • Toggle switches used instead of checkboxes
  • Preset list and grouped Apply/Clear buttons

13 of 16

Results Page and Filter Pills

Showing selected filters

​

  • Small pills appear above data showing selected filters
  • Single selections = removable pill
  • Multiple selections = dropdown with a counter and options

14 of 16

Usability Fix - Tooltips

Distinguishing data

​

  • Hover reveals filter category for duplicate labels
  • Clarifies similar filter names like 'Alternative Work Schedule'

15 of 16

  • Streamlined interface reduces friction for users
  • Visual feedback increases confidence and efficiency
  • Filter options are now clearer and easier to manage

Impact

16 of 16

Let’s connect!

If you're interested in further discussions or collaboration, I'm Renee Romero and I warmly welcome the opportunity to connect. Thank you for exploring LatinX!

​

Email: reneeromero326@gmail.com

LinkedIn: https://www.linkedin.com/in/renee-romero/

Portfolio: https://www.muralderomero.com/

�