Home > User Experience > Design annotations that will make your team metrics focused

Design annotations that will make your team metrics focused

Design annotations that will make your team metrics focused


I recently read this gem on design annotations and could not resist to extend the discussion to tracking annotations 📊

If you are building digital products, then you’re probably familiar with the concept of tracking user behaviours with user events. After you have invested all these efforts building your feature, implementing user events is the finishing line to make sure you are measuring outcome.

In my experience at Intercom I’ve learned that even the best teams seek to be more data driven. They ask themselves: “What tracking should we implement or “Are we measuring the right things overall?”. These questions come up again and again.

Even worst, sometimes conversations about tracking user behaviours never get started, and features get released without any tracking in place.

I believe a lot of these frictions can be avoided by being more proactive and clear through design annotations accessible to anyone.

Annotations in design can remove a lot of uncertainty about how tracking works. And the best thing about them is that they’re right there in context. By using them anyone working on a product can make tracking visible and engaging.

tracking annotation for a “sign up” button

When you work on fast product development cycles, annotations can be the forcing traction to start discussions around metrics and ultimately save time.

Tracking gaps or misunderstanding that would’ve remained unspotted before a launch are addressed right away.

Recently, I’ve been thinking about how I can be more participative in design files by providing useful tracking annotations, and I’d like to share my learnings.

There are some specific scenarios where adding tracking annotations may be useful:

  1. Pointing event trigger
  2. Defining event details
  3. Switching implementation status
  4. Scanning success metrics

1. Pointing tracking trigger

Let’s say you’re designing a “sign up” flow and you want to track when a user opens a page and clicks the“signup” button. A nice way to show your developer where a tracking should be triggered may be:

  • Pointing a button layer when the tracking is a “click”
  • Pointing a screen layer when the tracking is a “page load”

Annotations are similar to being a superhero and fly above your product with a x-ray vision:

Having lots of tracking annotations on your design file can make it cluttered. To ensure it doesn’t, you may group annotations inside one folder then show & hide them altogether.

🙈hide and 🙉show tracking annotations

2. Defining event details

This part will save the most time to your developers and provide your stakeholders context to run product related analyses.

Tracking follows a simple convention that your company has. For instance it may be:

Page name — Action type — Detail of the action

A user event to book a cab on a confirmation page

To get there ask your company naming convention, it shouldn’t take more than 5 minutes to find it. After your design file is annotated once, no need to remember it anymore 😉

3. Switching implementation status

When a tracking is implemented, it’s helpful to switch the status of the annotation. It helps you and others know if a tracking was implemented, and know if you are ready to go live:

Toggling on/off an implementation status with Figma instance

4. Scanning success metrics

If you are implementing user events, chances are that you have a goal, and a success metrics. Whether it is about engagement, conversion rate or retention, your tracking annotations can help you understand if you are equipped to track your goal.

Back to our user signup example, here are simple annotations you may check you have in place:

How to annotate?

There isn’t a single way of doing design annotations. You could have them right in your designs or using comments. You should do what works for yourself and your team. But if you’ve never done annotations before and are using Figma, here is a Figma plugin to achieve this exact mission.

Once you start adding annotations to your designs, have a short meeting with your team — or share this interactive Figma tutorial — to introduce annotations to your developers and stakeholders. Otherwise, they may be confused or they might even think it’s part of your design.

Hopefully these tips will help you be successful when using design annotations, and most importantly make your team more metrics focused.

If you have other tips you’d like to share from your experiences with tracking annotations, please leave them in the comments below 👇



Source link