• Wireframing
  • User Experience
  • User Interface
  • User Testing

Who’s afraid of a little set theory?

Segmenting audiences gets complicated quick, and our existing segment builder wasn’t making the process any simpler. So, when our engineers refactored the back end, it was time to take another look at the user interface and experience.

Don’t reinvent the wheel

An effective solution needed to improve on an existing design without reinventing anything. Any changes would need to be broken down into individual tasks for the engineering team. We decided two make three major changes.

First, we wanted to condense the UI, both visually and interactively. Visually, we would remove some modals and incorporate them into the page. Interactively, that meant reducing the number of clicks.

The old segment builder UI:

side-by-side: old segment builder and new segment builder

The new segment builder UI:

side-by-side: old segment builder and new segment builder

Next, we changed the UI to progressively disclose UI components during the segment building process. There are quite a few operations you can do to a segment, enough to be overwhelming. Because some operations aren’t useful at certain steps of the process, we opt to hide them from the UI until they can be acted on.

animated screenshot of UI elements becoming available as segment state changes
Here, the and/or and include/exclude UI components are hidden because that logic doesn't make sense with only one condition.

The final change was the reorganize how the conditions were displayed in the segment builder. Previously we had relied on creating a sentence-like structure with the each user field.

screen shot of individual condition

In the updated version, we dropped the sentence structure. The UI is now organized around the concept of choosing a data field and then filtering that data field.

screen shot of new individual condition

In the end, only ease-of-use really matters

This project was a successful improvement on an existing feature. I worked with the engineering team to identify three individual changes, and then used interactive prototypes and user testing to verify our decisions. From there, I implementated the CSS and fine tuned the look and feel of the final product.