Website tracking

Duration: 1 quarter

Problem to solve:  

“How might we help a marketer adopt the features offered by our website tracking pixel?”

Format: web (desktop only)

Status: shipped, resulting in a 46% adoption lift over four months

 
 
 

The problem to solve

Campaign Manager has three features reliant on its website tracking pixel: Conversion tracking , Website retargeting and Website Demographics.

The three features struggled with adoption. Users were unclear about the value and frustrated about the disconnected adoption flows. Rather than being able to access all website tracking after adopting the pixel once, users had to access it in a different flow for each feature.

I approached the product manager leadership with a flow that allowed adoption of the tracking pixel in the same way from anywhere. Sensing an opportunity for savings and better performance, they quickly agreed to fund design work for the following quarter.

 
 
 

Alignment: UX workshop

Once the design work was funded, I set up a generative UX workshop to get a cross-functional team on board and to gather more specific requirements.

The workshop had 10 participants from design, product , engineering, marketing and customer experience. It took about 4 hours, and I facilitated the activities myself.

While these workshops can be expensive given the number of people, I find they greatly speed up the project. At the end of our session we had product principles, user flows for multiple user personas -and a happy, aligned team. I have written up an article on my preferred workshop format here.

Hero flows

As a deliverable we created visual versions of so-called hero-flows. We collaborated on creating an ideal experiences and documented our thinking with user flow diagrams drawn on whiteboards or assembled with post-its. 

After the workshop, I took the hero flows we had drawn together and used it to create one big user flow diagram. It was our first design deliverable and helped our team align on an approach forward.

 
 
 

Design: from user stories to screens

To prepare for screen designs, I translated our hero flow diagram into the format of user stories. I then used the diagrams and stories wireframes as a way to get a few quick proposals out for screen designs, sc wireframes.

The main purpose of these wireframes was to represent to the team what we had agreed on in earlier design stages. I put them into sc application map to outline their connections, and eventually use them as proposals for screen designs.

 
 

Adopting via feature landing pages

As a user, who is logged into Campaign Manager, I need a way to set up my tracking pixels and adopt the related features before setting up a campaign.  

  • I would like to create website audiences and conversions without being blocked by the status of the tracking pixel. Once I have set up my pixel, I would like to be able to monitor its status.

  • If I am ready to set up the pixel, I would like to either set it up myself, send it to a developer, or be shown what tag managers are available to me. 

  • If I have a pixel but would like to use a new one, I would like to be able to delete the one already attached to my account.

 
 

Adopting via campaign creation

As a user, I need a way to adopt website related features while I’m setting up a campaign.  

  • I would like to create audiences and conversions without being blocked by the status of the tracking pixel. If my pixel is working, I should be able to see the status of each asset attached to it.

  • If I have never set up my pixel, or it is set up but not sending a signal, I would like to create my audiences and conversions anyway, without having to leave campaign creation.

  • When I'm saving my campaign, the experience should remind me of the status of my pixel, in case i need to do more work to activate it.

 
 
 

User testing

Wireframes soon led to preliminary screens and prototypes, that we could test with users. I met with my group to show them the prototype and discussion guide I planned to use, in order to get their buy-in.

I facilitated interviews with ten marketers that all had experience with conversion tracking, ranging from novice to expert users. The interviews uncovered soft spots in the design that needed addressing. Using the RITE method, we improved the designs as the interviews were in progress. After two days and 10 interviews, we felt confident that we had a quality user experience.

 
 

Final screens

 
 

The build

I pitched the design to engineering as part of a large code migration project, and as I could show that the changes were mostly front-end based I was able to get the project funded. In total, three engineering teams built out the experience.

 
 
 

What I learned:

A designer with the support of product leadership is well positioned to create product requirements from the designs. This means a PRD can be a result of designs, rather than the other way around.

A collaborative approach can energize your cross-functional partners so much that a record dozen of them would attend user interviews, including the entire engineering team.

Design-led projects like this one can get results: we got a massive 46% uptick in feature adoption over the next four months after shipping, and ultimately a 2x increase at year’s end. I received a peer and partner-led award for this project, and it was featured as a success model in our VP’s newsletter.