DESIGN
SYSTEM

DESIGN
SYSTEM

DESIGN
SYSTEM

Advancing Ripple’s design system with a reusable filter pattern

Overview

Overview

Overview

Organization: Ripple

  • Role: Product Designer, Design Systems Intern

  • Timeline: 12 weeks

  • Contributions:

    • Designed a scalable filter system for data tables

    • Reduced time on task for designers by 66%

    • Piloted usability testing for the design systems team

    • Increased design consistency in the design system library

Organization: Ripple

  • Role: Product Designer, Design Systems Intern

  • Timeline: 12 weeks

  • Contributions:

    • Designed a scalable filter system for data tables

    • Reduced time on task for designers by 66%

    • Piloted usability testing for the design systems team

    • Increased design consistency in the design system library

Problem

Problem

Problem

Ripple’s existing filter design wasn’t built for scale. As more filters were added, the layout pushed data down the screen, slowed designers, and lacked a way to save commonly used filter sets.


How might we create a filter experience that is scalable, consistent, and efficient across B2B products?

Ripple’s existing filter design wasn’t built for scale. As more filters were added, the layout pushed data down the screen, slowed designers, and lacked a way to save commonly used filter sets.


How might we create a filter experience that is scalable, consistent, and efficient across B2B products?

Process

Process

Process

I analyzed existing patterns across fintech and SaaS tools:

  • Mint: Chips + popover → good for quick removal of active filters.

  • Charles Schwab: Grouped modal filters → strong personalization but obscured critical table data.

  • Salesforce: Side panel filters with “Save sets” → preserved data visibility and added reusability.


This analysis shaped my approach toward a side panel solution with chip-style visibility.

Solution

Solution

Solution

I explored different layouts and landed on a sliding side panel that matched the table height.

Key design decisions:

  • Surface most-used filters upfront

  • Collapse additional filters under “+ More Filters”

  • Add “Save and Apply” alongside quick “Apply”

Testing

Testing

Testing

Since usability testing wasn’t standard for the Design Systems team, I piloted a lightweight test plan.

Findings:

  • Users could easily locate filters, though some confused filter vs sort

  • Icon-only “Save” wasn’t intuitive → replaced with labeled button

  • Side panel was intuitive and preferred over modals

Impact

Impact

Impact

Reduced projected time on task for designers by 66%

  • Delivered a reusable filter component to Ripple’s design system

  • Introduced usability testing practices into the design systems workflow

  • Improved product scalability and user experience across B2B tools

Reflection

Reflection

Reflection

This project was an important milestone in my growth as a systems thinker:

  • I learned how to balance scalability vs simplicity — ensuring the component works across multiple contexts without overwhelming the user.

  • Piloting usability testing in a design systems context showed me the value of bringing evidence into foundational design decisions, not just product features.

  • If I could push further, I would explore cross-product adoption: how filters could be standardized not just within one table type but across multiple tools in Ripple’s ecosystem.

LET'S CONNECT

LET'S CONNECT

LET'S CONNECT