How the Lytics front-end team rebuilt the Segment Builder.
Lytics customers know that the Segment Builder is a key feature of the Lytics Customer Data Platform. It lets you identify and define audiences with data from web, email, mobile, and pretty much any other channel. Taking on a redesign of a frequently used feature such as this brings a particular set of challenges and opportunities. We wanted to improve the experience and add new features, while meeting existing expectations and remaining familiar to veteran users.
The Segment Builder has been part of Lytics since the beginning of the product. That means it has proven to be a useful, well-loved feature, but it also means that its design and implementation have collected some dust.
Our lead front-end engineer, Michael Lange, tackled the thorny problem of re-engineering the segmenting engine. This opened the door to redesigning the interface and experience of the entire Segment Builder.
Based on what we knew about how customers were using the current Segment Builder, the redesign had three main goals:
Based on what we knew we wanted to get out of a redesign, we set out to find some individual improvements we could make. Each change needed to be isolated, enabling our developers to take them on one at a time. We ended up with four significant changes:
One of the ways to streamline an interface is to reduce the number of clicks it takes to perform a task. The old Segment Builder needed you to open a slideout several times to define a single rule. It was a bit unwieldy, and it obscured most of the workspace. So we moved the contents of the slideout inline with the rest of the interface, eliminating needless clicks. This went a long way toward creating a lightweight, quick interaction.
The old workflow:
The new workflow:
Progressive disclosure is a user experience concept that says you should hide certain features until they are relevant to the user. The Segment Builder is a great candidate for this because it has all kinds of buttons and toggles, many of which are not useful from the outset of building a segment. Hiding these extraneous options until they can be acted on declutters the interface, and makes it easier for people to jump in to building a segment.
A segment with one rule:
With two rules:
And with three rules, and two rule sets. As a segment gets more complex, the UI responds by revealing more options:
Being able to identify users that like content related to particular topics is one of the most powerful features in Lytics. While it was possible to create segments with content affinity data in the old Segment Builder, it was far from intuitive. Creating an interface specifically for this type of segmentation made it much easier to access this key feature.
The old way to create a segment with content affinity:
The new interface makes content affinity segments way easier:
It’s a fine thing to be able to dust off an old design and give it a new look. Since we were making some fairly significant interaction changes, we took the opportunity to bring the look and feel inline with the rest of Lytics.
All the thought in the world can go into designing an interface, but it can never be a substitute for actual testing.
The Segment Builder went through two stages of testing. The first stage used a simple prototype that we tested with our in-house power users (the Customer Success team) as well as external testers that had never used Lytics, but fit the persona of our users.
For the second stage, our engineers implemented the changes and released them as a beta. Our customer success and sales team were able to demo the new Segment Builder with new and existing customers to gather feedback.
Testing can reveal egregious problems with even the most promising designs, but the initial changes made it through each stage relatively unscathed. We proved that the redesign represented a notable improvement on the old Segment Builder.
All that brings us to today: the release of the re-designed Segment Builder. It’s been a ton of fun diving into such an important feature of Lytics and finding ways to make it work better for our customers. Sign in to your Lytics account and let us know what you think!