My Role
I was the Senior Product Designer leading the end-to-end design process from discovery research through supporting the implementation of the final designs.
I partnered with a Product Manager, a Lead Developer, and a Technical Copy Writer and we worked in close collaboration with Customer Success, Product Growth, Design, and Engineering teams.
My involvement on the project started in early 2022 and the feature launched to the General Audience in December of 2022.
The Problem
Making the Easy Difficult
For enterprise marketing and data analyst teams, event tracking on their apps and websites is a key component into gaining insights into their user base. This enables customized experiences, detailed usage metrics, and the ability to connect to downstream services in the data pipeline.
However, the creation and management of these Events within the Tealium application was very complex and technical, leading these personas to rely on development and engineering resources to implement even basic click tracking events.
However, the creation and management of these Events within the Tealium application was very complex and technical, leading these personas to rely on development and engineering resources to implement even basic click tracking events.
The Challenge
Breaking Down Technical Barriers
Breaking Down Technical Barriers
The objective of the project was to remove these technical barriers and simplify the process of creating and managing Events. Given that creating events is such an important aspect of customer data management, we felt that this core workflow should be as quick and intuitive as possible.
Look, Listen, and Learn
Insights from Interviews and Metrics
We started our discovery phase by conducting interviews and gathering data around usage of the product to better understand the existing process and pain points involved.
Insights from Interviews and Metrics
We started our discovery phase by conducting interviews and gathering data around usage of the product to better understand the existing process and pain points involved.
Participants for Qualitative Interviews
To identify participants for qualitative customer interviews, we used metrics to determine the top accounts in terms of event usage within our platform. Our Product Manager then reached out to contacts for these accounts to schedule qualitative interviews with 8 of the top 10 accounts.
Findings from Qualitative Interviews
• Marketers and Data Analysts were heavily dependent on development teams and in smaller teams they lacked the support needed to implement.
• Less technically savvy users were frustrated with the JavaScript knowledge needed to create and support Events
• Users were frustrated by the existing workflow as it dead-ends and doesn’t provide a clear link to dependencies
• We also learned nuances to the customer needs around configuration settings and event tracking details customers wanted to know
User Metrics
We also took a closer look at some of the usage metrics around the existing Event creation and management within the platform. Some of the highlights of these metrics we found were:
• Close to 50% of all Tealium Accounts used at least one JQuery Events Extension
• Customer Success teams were getting a high number of support requests for setting up basic events
• We were getting a high volume of votes from users in our Product Idea user board around improvements needed for Events.
• There was a high volume of drop off in user funnels around creating and editing in workflows
Journey Mapping the Existing Experience
As a result of customer interviews, feedback from CS teams, and internal conversations, we created an in-depth Journey Map. This helped map out the existing process, pain points, and areas of the product involved to create and implement Events.
Definition
Setting our design goals
Before diving too deep into solutions and to help bring clarity and simplification, we broke down the major design needs into three key areas:
Introduce Events
Bring Events into the forefront as a standalone reusable element in the product.
Create a Simplified Event Creation Process
Create a Simplified Event Creation Process
Provide a redesigned event creation process with user experiences improvements and enhanced capabilities
Integrate Events
Seamlessly integrate Events into existing workflows so it works for existing and new customers while limiting increase in scope.
Establishing Success Metrics
We also established benchmarks to define success metrics around event usage, adoption and level of support customers need:
Key Success Metrics
1. Decrease in usage of existing jQuery events.
2. Adoption of new Event Types in the product.
3. Less support tickets to Customer Success teams around basic Events
Key Success Metrics
1. Decrease in usage of existing jQuery events.
2. Adoption of new Event Types in the product.
3. Less support tickets to Customer Success teams around basic Events
Design Process
Answering the Big Questions
Armed with these discoveries and insights, we sought ought to answer an important question: How might we help Marketers and Analysts configure and manage events using an intuitive, code-free workflow?
Introduce Events as a standalone reusable element within the product
Events were originally a subset of a larger feature called Extensions. The first step was to brainstorm how Events would fit in as a main element within the product. Events would need to be easily accessible but how? After several iterations we decided it should be a standalone element with it’s own tab in the main navigation. Events could then be individually created, managed, and easily associated to other elements such as Rules and Tags. Leveraging our existing Design System components, we were able to quickly land on a design for the Events tab and table that would serve as the hub to create and manage Events.
Provide an improved, robust rule builder for Event conditions and Tag application
The next step was to design a logic builder that now included Events AND rules that could be used in combination to fire tags. After analyzing customer account metrics, we found that could customers could have hundreds of rules and often up to 10 rules were used in the logic statement. Taking this in to account, we had to design a logic builder where users could quickly select from large amounts of existing Events and Rules to pull into the logic statement to build complex conditions.
The next step was to design a logic builder that now included Events AND rules that could be used in combination to fire tags. After analyzing customer account metrics, we found that could customers could have hundreds of rules and often up to 10 rules were used in the logic statement. Taking this in to account, we had to design a logic builder where users could quickly select from large amounts of existing Events and Rules to pull into the logic statement to build complex conditions.
Starting with low fidelity wireframes, we began to block in the major components and user needs of the logic builder:
• Canvas area for logic building
• Canvas area for logic building
• Detail view of individual Rule or Event in use
• Summary of logic statement
One of the key problems in the initial designs was selecting the the rules and events to pull into the logic. Because of the potentially large volumes of rules and events, finding and selecting them in a dropdown could be cumbersome.
As a potential solution, we explored an alternate interaction pattern. Instead of using dropdowns to select from large amounts of Rules and Events, we created a drag-and-drop pattern as a method to pull them into the logic.
Our finished redesigned Rule Builder provided a bigger and more intuitive UI dedicated to building complex logic statements and providing insights to the Rules used. It also allowed for better searching and filtering options while expanding on the condition logic and nesting.
Integrating Events into Existing Workflows
To help understand how Events fit into existing workflows within the product, we created userflow scenarios with a different order of operations to visualize how Events could be configured in any order necessary in a bi-directional workflow.
Validating our Ideas
Testing The Designs
After initial rounds of low fidelity wireframes, we wanted to validate that the main components of the design were understood and fit the most common scenarios of logic combinations. We were looking to answer key questions including:
• Does the logic builder handle complex combinations of rules and events?
• Is there enough information provided to understand the elements being used?
• Is the new interaction pattern of dragging and dropping rules and events intuitive?
After building some prototypes, we were able to confirm through internal interviews and user testing that we were on the right track with the designs.
After initial rounds of low fidelity wireframes, we wanted to validate that the main components of the design were understood and fit the most common scenarios of logic combinations. We were looking to answer key questions including:
• Does the logic builder handle complex combinations of rules and events?
• Is there enough information provided to understand the elements being used?
• Is the new interaction pattern of dragging and dropping rules and events intuitive?
After building some prototypes, we were able to confirm through internal interviews and user testing that we were on the right track with the designs.
We used a hypothesis driven method of establishing a theory and hypothesis, creating an experiment to validate it, and coming to a conclusion based on the findings.
Example user test giving a scenario for the user to walk-through and subsequent feedback and surveys as they progress.
Delivery
Final Designs and Implementation
To help communication with developers and other team members, I provided designs showing the different potential interaction and pages states as well as annotation of key details. The goal was to not get too heavy on specs but help provide clarity to help the implementation process.
To help communication with developers and other team members, I provided designs showing the different potential interaction and pages states as well as annotation of key details. The goal was to not get too heavy on specs but help provide clarity to help the implementation process.
Before and After Comparisons
To visualize the changes and impact, here's a direct comparison of some of the key redesigned screens in the workflow.
Before
After
Launch and Impact
More Events, Less Code
• The release exceeded the goal of an adoption rate of 15%. Within 90 days of releasing the feature, 27% of available accounts had saved an event
• 768 Events were created in the first 90 days of release
• A post launch survey poll revealed that the majority of users had a favorable experience using Tealium IQ Events (59% rated the new experience either a 4 or 5 out of 5)
“iQ events let me stand up one of our properties a lot more quickly than I would have been able to otherwise. I’ve just used the link functionality so far, and it is great.”