Segment Filter Editor

Context

When marketers create a campaign, they need to define a group of people to send out the message. This group of people can be defined by demographic, behavior on the products, user attributes, or a mix of those.

As the lead designer in this project, my role was to create a better experience for marketers define and create segments in the platform. My goal in this project was to rethink about the workflow and the interaction of segment editor in campaign creation workflow.

Problem

In our current design, if a user creates more than two criteria, we only support AND logic, which means we select a group of people who needs fulfill both criteria A and B. If a user wants to use OR or more complex logic, they need to go to filter editor to write the logic directly. However, most of the marketers don't know how to write SQL script.

Without the flexibility to create a complex segment, it’s hard for marketers to target the right group of people. As a result, the campaign cannot speak to the right people and turn out to low engagement rate and eventually lost their customers.

Design Process

Current Flow

I work with Customer Success team to collect customer feedbacks. Below are the main issues in our current segment filter editor.

• Confusing Navigation

• Inconsistent Interaction

• Wrong usage of Colors

• Confusing Icon

Competitor Research

In order to understand what's the current filter editor's interaction in the industry, I did the quick research and analyze pros and cons.

Ideation

After researching and understanding the problem, I provide two different ideas and quickly create prototypes to get feedback from project managers and internal marketers.

As a result, the Variant #1 got more positive feedbacks. The reasons was:

Variant #1 is more intuitive. From the testing, users know a block means a group. It is easy to know you can add AND/OR logic for inside/outside of group.

Variant #2 solution is too complicated. There are too many options at beginning. Users get stuck and don't know how to start.

Iteration

After I get some ideas about our direction, the next coming up question is what if the segment filter editor get super complex? Is it still easy to understand?

When adding more logics, it becomes really hard to read. Besides, the horizontal line that separate the the logic is really hard to see

To fixed this, I work with project manager did several rounds of testing and iterations. The final solution was that we added a done button inside of the block. So, when the users completed a set of filters and hit done, then we collapsed it as plain english and used lines to draw the relationship between each criteria.

Interaction

The following images illustrate some of the micro interactions of the design that we found most impactful for the user.

Final Design