UI/UX, Interaction Design, Product Design
As a Lead UX Designer on the Contacts team for Salesforce Marketing Cloud, I had to tackle a large-scale unification project for our Expression Builder component across multiple product teams. Armed with some prior user testing before I stared the project, I had some data on Expression Builder usability issues I could work with. I partnered with a UX Researcher, UX Designer and our Product Manager to break down the problems and marketer's needs so let's start with introducing the problem for background and context...
Introducing the Problem
Contacts Expression Builder began as a tool that enabled marketers to create simple filter expressions. The user interface, equipped with drag and droppable attributes and configurable criteria, allowed marketers to segment their data and optimize their campaign audience for sending. It worked very well for basic filtering but as our Contact model began to evolve into a true marketing 1:1 model, the needs of our marketers began to evolve as well. They needed more sophisticated and specific audiences which would require a refresh of the current expression builder component. Take a look at Expression Builder Refresh for more on the problem breakdown and the marketer's evolving needs.
Example of the original Contacts Expression Builder for MobileConnect showing the Attribute Library expanded with an expression on the canvas containing multiple attributes and criteria configured for a fairly basic use case.
MULTIPLE VARIATIONS OF THE SAME COMPONENT
Many variations of expression builder existed across multiple teams with varying degrees of functionality and sophistication that we could take advantage of as we began to plan for more advanced features. One of the primary goals of this project was to identify all of these variations, dissect functional needs/ wants and get alignment and consistency across product teams.
Variations of Expression Builder within Mobile Connect, Email Studio, Content Builder and Journey Builder. There are styling, controls and functionality differences between each.
LIMITATIONS OF THE ATTRIBUTE LIBRARY
The current attribute library was essentially a flat list of attributes such as: First Name, Address, Mobile Number, Demographics etc. utilizing a folder structure for hierarchy. As we began to expand Expression Builder to include Contact Data Model attributes, marketers would have access to more categories of data within the Attribute Library such as: Event data, Measures, or Saved Data Filters (templates). Introducing another level of complexity would make the library become massive and much harder to maneuver through. We needed to develop a new library control to allow for much better searching, navigating and categorization as well as address other usability issues found during prior research.
Current Attribute Library showing hierarchy in a folder structure.
defining GOALS
- Build a new Attribute Library control with features necessary for full integration into the Contacts Data Model.
- Get alignment on features in the new Attribute Library control across multiple product variations.
- Fix Attribute Library usability issues found during prior user testing and research.
- Get alignment on Expression Builder Canvas features across multiple product variations.
- Fix Expression Builder Canvas usability issues found during prior user testing and research.
- Prioritize features across entire Expression Builder component for development of future phases.
- Build one Expression Builder component and one code base.
- Get alignment on features in the new Attribute Library control across multiple product variations.
- Fix Attribute Library usability issues found during prior user testing and research.
- Get alignment on Expression Builder Canvas features across multiple product variations.
- Fix Expression Builder Canvas usability issues found during prior user testing and research.
- Prioritize features across entire Expression Builder component for development of future phases.
- Build one Expression Builder component and one code base.
After understanding the marketer's needs and defining the primary goals of the project with the team, I began to kick off the design process.
My contributions included the following:
1. interviewing product stakeholders
I started out interviewing all key product stakeholders: Product Managers, Development Managers, Lead Developers and Designers across 7 different product teams that owned their own versions of expression builder. The focus was to understand and document similarities and differences in features. I used the following structured questions for each interview:
General
Are you on the contacts data model?
What is the current code base and what controls/components where they derived from?
Do you use a full screen or modal variation?
Are there any other variations or use cases?
What output does your builder produce? Sequel?
Are you on the contacts data model?
What is the current code base and what controls/components where they derived from?
Do you use a full screen or modal variation?
Are there any other variations or use cases?
What output does your builder produce? Sequel?
ATTRIBUTES AND SELECTION CRITERIA
What features/functionality do you currently have?
What other variations or special use cases are there?
What is your wishlist? Roadmap items for future state needs/desires?
What features/functionality do you currently have?
What other variations or special use cases are there?
What is your wishlist? Roadmap items for future state needs/desires?
Then, I plotted all of the information into a spreadsheet feature matrix and organized the information by product channel and key features to see all of the overlaps/similarities/differences for comparison. This information was key later on when we began to plan and prioritize for features and phases of development.
Product Feature Matrix organized by attribute features, channel apps, selection criteria, expressions etc.
This work allowed us to determine product team's needs and wants and to roll up a final set of features across the product team roadmaps before starting on concept designs. We were able to determine for example, that MobileConnect had the closest component code base and features because they had derived their component from the Contacts Expression Builder. This would prove to be the easiest for new adoption of or borrowing from features between the two. I uncovered new use cases where just the Attribute Library was being used as a picker-type control for a number of the product teams. Some teams used portions of Expression Builder (just the Attribute Library), some used all of it, some had their own custom baked solutions.
I put together a summary of my design discovery findings that focused on current state features and future state feature wants/needs across the product teams and presented them to the Contacts team for collaboration and prioritization. View Cross Team Functional Design Needs
2a. CONCEPTING THE NEW ATTRIBUTE LIBRARY CONTROL
Next, I worked with our UX Researchers, UX Designer and Product Manager to begin sketching ideas for the new Attribute Library control.
This was part of a working session on prioritization and arriving close to a final list of V1 features.
Very early sketches where i started examining search scope
Very early sketches where I started with the idea of using dropdowns in the titlebar at the top to switch between the different attribute categories.
Early Balsamiq concept WFs exploring sliding transitions to reveal attributes after clicking a category as well as a type-ahead search concept.
2B. CONCEPTING FOR EXPRESSION BUILDER CaNVAS ENHANCEMENTS
From previous user studies there were issues with the way grouping and ungrouping of expressions were being handled and created confusion for marketers. I created some concept wireframes to provide quick access and a one-click solution for grouping/ungrouping nested expressions via a toggle button in the titlebar. This is just one example from a number of canvas enhancements that would later be refined in detailed wireframes.
Early Balsamiq exploration on grouping/ungrouping nested expressions on the canvas.
I created concept wireframes for a potential new feature where users could compare two different attributes. For example, if a marketer wanted to be more specific and compare a particular postal code attribute to a city attribute they could drag over the postal code attribute and drop it onto the city attribute instead of entering a value manually.
Comparison attribute concept wireframes for a potential new feature in Expression Builder.
3. Prototyping the Attribute Library Control for user testing
REFINING WIREFRAMES
I began to refine my concept wireframes into a little more detail and started working with a User Experience Architect from our UX team to build out an interactive prototype. We worked together on defining details like transitions and animations for when the attributes would slide into view and getting final interactions in place.
I began to refine my concept wireframes into a little more detail and started working with a User Experience Architect from our UX team to build out an interactive prototype. We worked together on defining details like transitions and animations for when the attributes would slide into view and getting final interactions in place.
I used Balsamiq for this transition section defining the interactions for attributes sliding in from R to L as the user clicks on a top-level category and drills down into the library.
4. USER TESTING
USER TEST PREPARATION
I worked with UX Researchers to help define questions, task flows and the click path in the script for a user test with external customers. We prepared a test with 7 current customers who were already familiar with and using Contacts and the Expression Builder.
I worked with UX Researchers to help define questions, task flows and the click path in the script for a user test with external customers. We prepared a test with 7 current customers who were already familiar with and using Contacts and the Expression Builder.
USER TEST GOALS
Determine which method marketers prefer when locating attributes: search or browsing within the library.
Determine what attribute information/metadata is important to see within the library when building an expression.
Look for usability issues in the expression builder canvas when creating expressions.
Determine which method marketers prefer when locating attributes: search or browsing within the library.
Determine what attribute information/metadata is important to see within the library when building an expression.
Look for usability issues in the expression builder canvas when creating expressions.
GENERAL FLOW & PREMISE
We had users go through the Contacts Expression Builder, locate an attribute using the old Attribute Library, then build a simple expression. We then presented the new Attribute Library control and had users look for that same attribute using the new search and navigation features of the control. The test was a general think aloud protocol so we could gather feedback on what the user was seeing and experiencing.
During testing I sat in every session, took detailed notes and closely observed. I use a stenographer-style note-taking method which helps researchers and designers during analysis and creates less back and forth between recordings.
We had users go through the Contacts Expression Builder, locate an attribute using the old Attribute Library, then build a simple expression. We then presented the new Attribute Library control and had users look for that same attribute using the new search and navigation features of the control. The test was a general think aloud protocol so we could gather feedback on what the user was seeing and experiencing.
During testing I sat in every session, took detailed notes and closely observed. I use a stenographer-style note-taking method which helps researchers and designers during analysis and creates less back and forth between recordings.
5. ANALYSIS, FINDINGS and RECOMMENDATIONS
ANALYSIS AND DRAFT OF UX RECOMMENDATIONS
I reviewed all of the feedback and data we gathered through the sessions and began to put together a draft list of UX recommendations and shared those with my UX Researchers for feedback and consideration in the final readout and presentation of findings. View Draft of UX Recommendations
I reviewed all of the feedback and data we gathered through the sessions and began to put together a draft list of UX recommendations and shared those with my UX Researchers for feedback and consideration in the final readout and presentation of findings. View Draft of UX Recommendations
FINDINGS
Testing went very well and provided some interesting findings that I was able to take into account and incorporate back into design iterations. View Test Findings
The Contacts UX design team met with all of the key stakeholders of each of the product teams to review the findings of the test and discuss next steps for the new control. Our researchers presented the findings and walked through the scenarios our users went through during the study.
Testing went very well and provided some interesting findings that I was able to take into account and incorporate back into design iterations. View Test Findings
The Contacts UX design team met with all of the key stakeholders of each of the product teams to review the findings of the test and discuss next steps for the new control. Our researchers presented the findings and walked through the scenarios our users went through during the study.
The current Attribute Library on the left, new Attribute Library control we tested on the right
RECOMMENDATIONS
After the findings readout, I met with the our researchers, designers and product manager to determine final recommendations for detailed designs and determine the roadmap for V1 and V2. View Final Design Recommendations
After the findings readout, I met with the our researchers, designers and product manager to determine final recommendations for detailed designs and determine the roadmap for V1 and V2. View Final Design Recommendations
In summary, for V1 of designs we decided to align on parity of features between Mobile Contacts, Journey Builder and Email Expression Builder. For V2, we planned for another user test on future iterations.
6. FINALize DESIGNS FOR DELIVERY
After collaborating with key stakeholders and a few more design iterations and internal design reviews, I met with the developers again to discuss the designs. We discussed feasibility issues and getting the component built as part of our pattern library. I then began working on detailed design assets for delivery.
DETAILED DESIGN FOR ATTRIBUTE LIBRARY
I use Adobe Illustrator to create detailed designs and interactions for feature delivery of the new Attribute Library control. Here are the resources I created:
I use Adobe Illustrator to create detailed designs and interactions for feature delivery of the new Attribute Library control. Here are the resources I created:
DETAILED DESIGN FOR EXPRESSION BUILDER CANVAS ENHANCEMENTS
I used Adobe Illustrator to update the interactions for the Expression Builder canvas based on feedback and recommendations from our user study. Here are the resources I created:
Detailed Expression Builder Canvas Interactions
Expression Builder Visual Design
I used Adobe Illustrator to update the interactions for the Expression Builder canvas based on feedback and recommendations from our user study. Here are the resources I created:
Detailed Expression Builder Canvas Interactions
Expression Builder Visual Design
CONCEPT DESIGNS FOR ATTRIBUTE LIBRARY PICKER VARIATIONS
Once the Attribute Library was defined, I was able to go back and revisit some early concepts I started thinking about for other variations of the control. I finalized some concept designs for picker control variations across multiple product teams for future V2-V3 phases of the control.
Once the Attribute Library was defined, I was able to go back and revisit some early concepts I started thinking about for other variations of the control. I finalized some concept designs for picker control variations across multiple product teams for future V2-V3 phases of the control.
Among many variations, this is a Balsamiq example of the JB single selection attribute library picker.
DEVELOPMENT & DELIVERY
During the delivery stage I was beginning to transition to another project but I kept in touch with the developers and stayed engaged on progress and timelines.
During the delivery stage I was beginning to transition to another project but I kept in touch with the developers and stayed engaged on progress and timelines.
Today the new control is implemented in a number of different places throughout the Marketing Cloud like Contact Filters for Journey Builder:
Attribute Library in the Journey Builder Contact Filters step. A few modifications: The control has been updated in the Lightning theme, the breadcrumb has been modified to only show the current location with a hover to see full path and a home icon takes the user back to the top level.