Segment Builder Design

Campaign Monitor February 2014

The segment builder provides a simple yet powerful way for email marketers to send campaigns to specific groups of people who match certain rules and criteria.

subscriber notification email
segments user interface

The challenge

Wouldn’t it be great if you could send more meaningful and targeted emails to certain groups of people, rather than sending a generic email to your entire subscriber list? Even though we already had a simple segment builder, it was clear that it wasn’t meeting user’s needs. The main aim of this new segment builder was to provide a more powerful way for users to segment their subscribers based on rules that they could define.

segments information architecture

Information architecture

Over the years we’ve been collecting feedback from customers regarding how they’d like to be able to organise their subscribers into segments. We sorted through customer feedback to figure out the requirements for the new segment builder. There were a lot of different feature requests and it would take forever to get them all built, so we listed out the main features, prioritised them and concentrated on the ones that would make the most impact.

During this requirements-gathering phase we also looked at competitor products and realised that our differentiator would be to concentrate on simplicity of use, cutting back on unnecessary features and complexity.

The key ingredient to creating segments is defining the rules that govern them. If we wanted to create a segment of people who work as designers and developers in Sydney, we would need a way to define a set of rules that captured those people. After much deliberation we decided that “OR” and “AND” logical operators would give us the complexity we needed to create such rules (above). Each rule could be based on the name, email address, date subscribed, location or custom field of the person.

segment rule builder wireframe sketch
segment builder page sketch

Wireframes and sketches

Once we had planned out what we were going to build, the development team was able to start rebuilding the back-end for speed and stability. I started on the interface design in parallel with them to save time, and quickly sketched out some ideas on how this page would function. My focus was on creating maximal power with minimal UI. The page (above right) would basically consist of a rule builder at the top followed by a results table of the people in the segment.

After exploring a bunch of ideas for the rule builder (above left), I ended up stripping it back to a simple list of rules. Rules connected by an “OR” operator were grouped together and these “OR” groups could be connected with an “AND” operator. I tried to structure rules so that they maintained a simple sentence structure, avoiding the use of cryptic “robot talk”.

visual design of rule builder

Visual design

The visuals were pretty simple as most of the hard work had been done to create the wireframes. I designed a few new elements and reused existing form and table styles to create the segment builder page. Each rule was displayed on a single line and “OR” rules were grouped inside simple grey boxes as seen above.

Light blue buttons were used to help them stand out on the page, and select boxes were styled using the Uniform.js library. Avatar images were added to the results table of subscribers to give users a better idea of the people behind the email addresses. Once the front-end styles were applied, we tested out the feature on some staff that weren’t part of the project to pick up any major usability issues.

geo location user interface

Targeting people in a certain location

Designing the location rules was especially challenging as we wanted users to be able to target people in or near a certain geographical region. We thought that the most intuitive way to achieve this was to use an auto-suggest search box paired with a Google map as shown above. As the user types their location, regions are suggested as a drop-down list. Once a region is selected, it’s plotted on a map and a range can also be defined using a drag handle on the map.

Exclude subscribers user interface

Excluding subscribers from campaigns

Since the segment builder rules don’t contain a “NOT” operator, we thought it would make more sense to allow users to exclude certain lists or segments from their email campaigns instead. I redesigned the recipients list to make it cleaner and more intuitive. I also added the ability for users to exclude certain lists from their campaigns via a small button as seen in the screenshot above. This small change paired with the new segment builder empowers users to send much more targeted email campaigns.