By Ben Patterson on Sep 1, 2016

A Closer Look at Designing the New Segment Builder

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.

BRINGING THE SEGMENT BUILDER UP TO SPEED

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:

  • Provide a streamlined experience. Building segments can get complicated. Showing and hiding buttons, and reducing the number of clicks would make the experience easier and faster.
  • Make custom rules easier to define. Lytics is capable of interpreting a huge variation of data types, much of it custom for each customer. It should be easy to segment on any kind of data.
  • Improve content affinity segmentation. Creating audiences based on what content they like is one of our most powerful features, so we wanted to make it more front-and-center and easy to use.

STEP-BY-STEP IMPROVEMENTS

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:

Remove the Slideout

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: Segment Builder Workflow Before Re-Design

The new workflow: Segment Builder Workflow After Re-Design

Implement the Concept of Progressive Disclosure

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: Segment example with one rule

With two rules: Segment example with two rules

And with three rules, and two rule sets. As a segment gets more complex, the UI responds by revealing more options: Segment example with three rules

A New Design for Content Affinity

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: Segmenting with content affinity before

The new interface makes content affinity segments way easier: Segmenting with content affinity after

A Fresh Coat of Paint

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.

TESTING AND GATHERING FEEDBACK

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.

GO CHECK IT OUT!

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!


By Ben Patterson UI/UX Designer

Ben designs the Lytics interface and makes sure it provides a great user experience. He believes in designing a product that responds to the needs of our customers. Outside of UI/UX design, he spends his time exploring the Oregon wilderness (especially Mt. Hood) and riding his bike.