New Segment Builder

My Role: UX designer

Project Type: Product design

TLDR: The old segment builder did not show order of calculations well, causing confusion. Also, we added in additional capabilities, to improve segmentation ability.

Before/After

After

BEFORE

A picture of a pop-up builder that is not very usable or very pretty

Problem Statement

One major theme of customer feedback was that they wished they had the ability to create better segments, and that the data for those segments would be more accurate.

Research

Interview

Looking over customer feedback data, it was clear that there was a strong desire for better segmentation. I interviewed 10 companies who had asked for increased segmentation capabilities to discover the specifics about what segments they wanted to create, and why they needed those segments.

Secondary Research

The product manager and I spent a week digging into segmentation software. We tried to go through the entire flow for several specific segments that we did not yet have as well as ones we did have, to see how they handled the user experience. We also discussed constraints we would have with engineering.

MOderated user testing

Once we had a decent prototype based off the research, I went back to the 10 companies I had previously interviewed and had them walk through the prototype and give feedback.

Key takeaways from research

1

There were some segments that were standard across all brands. As a best practice it would be good to have those pre-built for everyone.

2

They all wanted more ability to segment off of customer behavior. The more nuance to this, the better.

3

They wanted to see how many people were in a segment as they made changes.  

4

We needed a better segment engine. It would need to be rebuilt, so it would be powerful enough to do what we needed it to do.

Step 1

Improve heirarchy

We debated and tested many options till we found the right UI to help convey how they data was being calculated.

We also had too many options, and needed to categorize them to make them easier to find. This had the added benefit of making the data load on the backend smaller.

A very boring pop-up, no images, just overall boring

Old Heirarchy

Did not box in what happened where, it was hard to know how ORs were going to be calculated.

A very cute pop-up! Clean and simple design that fits the brand well

New Heirarchy

More clearly shows the correct order of calculations. Show's clearly what is an Or and what is an And.

Step 2

Add in more overall segmentation options

We made a list of all the segmentation options we were lacking in comparison to our competitors, as well as a couple additional ones that came up during user interviews. We added that list to what we already had, and then separated them into categories.
I made a design and basic flow prototype for every single option.

A marginally better pop-up builder where at least the design options are all together and make sense

Step 3

Cross functional work on tagging

We worked with the messaging team on tagging based on customer behavior/interests as part of conversational journeys. Once those properties are attached through messaging, pop-ups (future), or landing pages (future), we will already have the ability to segment off of those.

An image of all the simple components

Conclusion

The new segment builder is live for all customers. It has been our smoothest rollout to date. It has been well received by all our customers. It also has been built in a way to be able to be improved upon and added to as we finish out additional tagging capabilities, through adding Shopify tags, to additional properties and tagging being available through pop-ups and landing pages.

Back to Projects