Audience Builder
Improve User Interface
Increase Builder Capabilities
Simplify Overall Task
The Audience Builder project aimed to improve the integrated Optimost audience builder by improving usability and expanding capabilities. The audience builder allows users to create targeted audiences in a simple and easy to understand manner. Audience conditions can be combined into groups to easily create complex target audiences that reflect the real world.
Design Tasks
Background
Optimost is a web optimization platform that gives users tools to improve their website content. The Optimost Audience Builder allows users to create target audiences based on a variety of factors including age, gender, location, device, browser, and more. Users can also group individual conditions to create more complex target audiences that better reflect their demographics.
In testing, the audience builder contained several areas where it fell short of target usability metrics. Building out certain conditions was described as tedious and arranging those condition sets into groups was considerably more difficult than it needed to be.
User Personas
Rachel – Campaign Manager
“If only these campaigns would run themselves…”
- Organizes campaigns and events
- Enjoys creative and innovative ideas
- Desire for timely and clear communication
- Strong communicator
Key Areas
Grouping
One of the main areas that needed improvement was the grouping interaction. Fundamental interaction patterns, including selecting items, and then enabling a group were completely broken. The UI did not drive users towards this action. One of the key tenets of this project was to improve user awareness of the existing grouping capability and to make it easier for users to create ever more complex condition sets.
Condition Building
Building out conditions was often scored a bit better, though there was room for improvement. Because of the two column panel layout, the condition builder is limited to an artificially narrow panel. This handicaps the condition builder interactions for building certain conditions. In addition, some basic quality of life features, like type-ahead fields, were missing.
Prototypes and Mockups
Audience Details
Upon creating a new condition, users are given a panel to provide some basic details about their audience including a name, description, and a portfolio where they would like the audience to be saved. As they define their conditions, the condition expression is displayed.
Condition Definition
As users add new conditions, a condition panel is displayed below and the viewport automatically scrolls to the new condition. The condition panel provides the user with simple selection options to create a condtion definition. The user can select the type of condition, then further define the condition according to their needs. Once the user has defined their condition, they can save the condition to the audience.
Users can create multiple condition definitions for any audience, giving them a wide amount of flexibility in creating audiences. Users can also select between matching ANY or ALL of the condition definitions in the audience. Each condition can be collapsed to aid the user in navigating through complex audience definitions with multiple conditions.
Drag and Drop Grouping
For complex condition definitions, it may require a user to combine multiple condition definitions into a group. As one of the primary areas of need, the action of grouping conditions needed to be intuitive and straightforward.
Due to its modern prevalence, the drag and drop action was determined to be the preferred method to allow users to create grouped conditions. Users can drag any condition onto another to create a grouped condition definition. To help users navigate through their audience definitions, the condition being dragged will collapse itself and scrolling can be aided by proximity to the top or bottom of the viewport. Grouped conditions can also have independent ANY or ALL matching from the audience setting.
In order to comply with modern accessibility requirements, users are able to create grouped conditions without using drag and drop by selecting to add a grouped condition to an existing condition definition.
Drag and Drop Un-Grouping
With any action that can be performed, a user may want to undo that action. And so with un-grouping a condition definition, users may also drag conditions away from a condition definition to create an independent condition definition.
As with grouping, compliance with modern accessibility requirements was taken into consideration. Users can un-group their conditions by clicking an un-group button.
Reception
The Audience Builder project helped modernize the audience UI within Optimost. Existing users, when polled, found that the new method was intuitive. Many were glad to find the “new” grouping feature that would allow them to create more complex conditions (further evidence that the previous grouping interactions were being used). Users found the new focused approach to condition definitions was helpful in allowing them to efficiently create their audiences. Users also enjoyed the quality of life improvements to existing conditions including type-ahead fields. In testing sessions, user satisfaction with the audience builder was increased substantially over the previous UI.
Special Thank You
No project is completed alone. A very special thank you to all of my teammates who helped turn this project from an idea to a reality. Their hard work and dedication to improving the product is what makes projects like this possible.