When I joined LiveIntent in 2018, I was recruited from the Berlin office and am the only UX designer in-house. People were not familiar the UX process and because the word "designer" is attached to my title.

Fortunately, I was given a task by the Berlin Product Manager as the first challenge. My manager said he would be gone next week for a ski trip and by the time he come back, he would like to see a result of something - like a modified version - of our LiveConnect Tag creation process.

A LiveConnect tag is a website tracking code snippet which consists of a global tag and an event tag. It can be compared to conversion tracking codes like Facebook Pixels or Google Analytics tag. When a user creates a tag, they need to place this tag on their website in order for us to receive the conversion signal and track those conversion traffic that came from LiveIntent's affiliate.

This is what our conversion tracker creation process looks like when I started.

The Empathy Process

Having very little information about what the users think about the current design, I reached out the New York team, which is the customer facing team who has direct experience using this version to create a conversion tracker.

Based on the interviews we had, I discovered a pattern of feedback on Maverick >> LiveConnect Tag creation experience, as below:

  1. We do not have a unified format to send instructions or manual to the clients to implement these tags on their websites. Users need to spend more time creating a manual with a copied code snippet, which needs to be modified into different events. It sometimes cause typos and confusion, because they need to look at several resources for different events.
  2. The search bar does not provide a global search scope, but it is only subjected to search for the tracker name or tracker id. However, human behavior dictates that when you want to search for the tags that were created, we search directly for the app-id or our advertiser names. A lot of times, users needed to create their own reference or second guess the tracker name because some were created long time ago, but they will remember the advertiser name since they have to speak with the clients.
  3. When we create the LiveConnect tag, the tracker name has no strict convention. Hence, user can input any name on this field. However, this becomes a problem late because users cannot filter the LC tags based on the tag type (pixel,LC tag) in the report. One of the ways that users can distinguish between the two is when the tracker name has the word "LiveConnect" to it.
  4. It could be misleading to create LiveConnect tag under "Conversion Tracker" because its purpose serves more than that.
  5. Users are not able to check if the event is received or if the tags were implement correctly. Most times it was done by random check and by looking into Kibana in order to verify that the information received is sufficient.

From the pain points above, I tried to turn them into a simple empathy map based on all the information that I have. This is where I need to identify the connection between what our users are trying to achieve, how they are doing it and how those interaction correlates with their minds and emotional state.

Define and Ideation

After figuring out the pattern of problems, I created a 20 mins ideation session and join forces with to find out an objective solution for our problem.

In this stage we want to turn identified problems into opportunities to solve them.

We start with a simple question: How might we....?

When ideating, we want to aim for quantity, everything is possible, and try not to judge other's ideas. Then once we have more ideas that we need, we will filter out the non-feasible ones. We want to separate the process of thinking and evaluating in order to get the most out of our ideas.

Prototyping and Testing

I created a simple prototype in Sketch and added interactions on InVisionsApp to communicate how my prototype works and experience they can expect from the product.

Feedback for Prototype 1 is below:

Like

  • new look and cited under its own tab
  • the first button for tag creation with instruction links
  • The way information was represented and unified in one place
  • click to create email function
  • being able to customize the tags without having to copy and paste
  • Having the AppID and Tracker Name present

Wish

  • Minor cosmetic error
  • User did not understand that there is no interaction on step 3
  • Required Input VS not required input was unclear
  • Email instructions were not suitable for client-facing
  • Unclear interactions

We used the feedback from the first prototype and revamp minor details to figure out how our new component should look like. Do they understand the functionalities the same way we purposefully create them? Or did they understood them in a totally different way.

Prototype 2 feedback:

Like

  • Alphabetically ordered side navigation tab on the left. (+4)
  • The picture in step 3 causes confusion whether it is clickable or just a reminder. (+2)
  • Allowing users to customize their events VS the data we received on the backend: We had discussion about what data we should allow users to deselect and on what circumstance should they be able to deselect the information on those tags. (+3)
  • Client-facing email phrases, should be clear and concise. Short enough for users to read and clear enough for users to follow through.
  • More options on the attribution window.
  • Added links to Knowledge base pages regarding the implementation with 3rd party tag manager. (+5)

Wish

  • The tags described on the email and how to use it.
  • Information icon (tooltip)
  • send email function
  • generate text files function
  • presentation/placement of the app-id

Our 3rd prototype was the last test that we did with our users, because our hypotheses were mostly confirmed and only cosmetic modifications were left.

Available Functions for this Sprint

  • lists all existing events and code snippet
  • can edit as appropriate
  • email to developers or relevant stakeholders
  • Quick Guide and 3rd party implementation
  • All in one information about LiveConnect tag
  • Attribution window 24hr -30days

Next Release

  • Custom tags
  • Customer Window - PVC and PCC - still needs confirmation
  • Optional Fields
  • In house Verification tool

Summary

The entire feedback loop and redesigning of prototypes took around 2 weeks after the first prototype was created. When my Product Manager came back from the ski trip, the first prototype was send out for testing. Users were able to comment and contribute to the feedback on the design, which creates visibility on the project that I was working on. What I've learned from this project was that the earlier you expose your users to the prototype, the faster will they understand how to use the product when it was launched.

After launching this project, we barely have to train any of our staff. I am really happy to work on this project because with the approach I used, I have developed some kind of trust with my users that they are welcome provide feedback and by structuring the feedback to "I like" VS "I wish", it was easier to get to the point towards where in the design could be improved and what should stay.