Project Overview

Better List Filters

Recipients list filtering interface
COMPANY
Bananatag (Staffbase Email)
TEAM
1 designer, 1 PM, 4 engs
TIMELINE
2020

As more Bananatag customers started using in-app email sending, the team focused on improving the basic creation of recipients lists.

Problem

  • For list creators, filtering the employee directory was time consuming, manual, limited in logic and data type.
  • For Bananatag, it was hard to sell the product with superficial functionality. Besides, there was a risk of churn for accounts already using the web app.

Goal

To empower users to share and unshare recipients lists.

My Role

I worked with customer success to map pain points, and did an competitor audit to understand standard logic filters. I explored multiple interface options, and then tested variations, getting the most effective one ready for developement with comprehensive documentation.

What Shipped

The initial feature release covered inclusion and exclusion of groups, date and numerical filters, and selection of multiple attributes. I also designed logic controls to be built next.

Results

  • 405% increase of lists created in the first year after improvements were shipped, excluding any internal tests.
  • 34% of all filters started result in new lists being saved.

Favorite Learning

The complexity of logic filters, and how much fun it can be to design for this type of interaction.

Original filter creation flow.
Original filter creation flow.
Action plan for filters work.
Action plan for filters work.
Original filter creation flow.
Original filter creation flow.
Wireframes and explorations for filter controls.
Wireframes and explorations for filter controls.
Detail of the original interface.
Detail of the original interface.
Detail of a multigroups UI exploration.
Detail of a multigroups UI exploration.
Detail of a multigroups UI exploration.
Detail of a multigroups UI exploration.
Tests with the original VS the conversational interface.
Tests with the original VS the conversational interface.
New filter interface.
New filter interface.
Different states for the attribute selector.
Different states for the attribute selector.

Need more details?

Email me for a full case study walkthrough: