- 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:
The new segment builder UI:
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.
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.
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.
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.