Bringing humanity back to customer support


Lean Product Testing with Angular.js by BRANDiD

Editors Note: We don’t usually let people guest post on our blog, but when @arush from BRANDiD reached out, his pitch was unexpected. It was too good to pass up!

Why we started sending more email:

We’ve been using for less than a day, and we’re so excited about what we can do with such a simple and powerful product. During our Seedcamp US trip, we were fortunate enough to hear from @akashgarg, head of the Growth Engineering team at Twitter, former CTO of Hi5, explain how important clever email techniques are for re-engaging Twitter users. He explained that they learned from Facebook to send more emails. After Akash got involved, Twitter started sending 1000x more emails than they used to.

Twitter uses a $6 million per year EC2 cluster to send 200 million individually personalised emails to its users every day. is democratising that kind of power for all of us. It allows us small startups to send equally personalised, highly targeted transactional and rule-based emails to increase retention and engagement.

Using and Angular.js to Run Lean Product Tests

At BRANDiD, we’re a big fan of fake buttons. Throwing up a fake button saves you from building out features that nobody even clicks on. In this post I’ll share with you how we take advantage of Angular.js Directives and’s simple Javascript SDK to create fake buttons that send emails in one line of code. And it’s HTML code, believe it or not!

<a data-lean-test="Vote Up" data-trigger="click" data-bs-tooltip="'Thanks for your vote!'">Vote up!</a>

In this case, we’re testing whether people will be bothered to vote for someone to buy something on BRANDiD. The code above renders the following button:

Vote Up Button

When someone clicks it, it looks like this:

Voted Up

NB: we haven’t actually built any voting functionality. But we are able to measure the impact of this feature with one line of HTML. All we have to do to run more tests is change the attributes, e.g. instead of “Vote Up”, we have another button that allows people to “Give Mad Props” to people who have spent a bunch of money on BRANDiD.

This simple, repeatable line of code does all the following things:

  1. Disables the button and displays a tooltip for some user feedback
  2. Sends a tracking event to your service of choice (,,, etc…) with the event name taken from data-lean-test (in this case “Vote Up”)
  3. Sends an email to the BRANDiD product team with the logged-in user’s email address and the action performed

Here’s a picture of the email sent through every time that button is clicked

Email Sent

This is how our investors and stakeholders see it on our Dashboard (we use Geckoboard and Mixpanel


How did we do it?

The thing that makes this so easy is Angular.js Directives. Directives are re-usable DOM elements that can have their own logic. Here’s the directive for the lean-test button above:

var foo = angular.module('bar',[])

.directive('leanTest', ['$rootScope', 'HelperService', 'EmailService', function($rootScope, HelperService, EmailService) {
  return {
    restrict: 'A',
    link:function (scope, element, attrs) {
      var done = false; {

        // make sure this only happens once
        if(!done) {
          // disable the button
          done = true;

          // Send an email with the Customer.IO JS SDK
          var email = '';
          email = $rootScope.currentUser.get('email');

          if(typeof email === "undefined") {
            email = "Anonymous User";
          } else {
            email = $rootScope.currentUser.get('email');
          // Track in your favourite analytics tool
          HelperService.metrics.track(attrs.leanTest, {user: email, page: location.href});

          // Send an email
          EmailService.sendLeanTest(attrs.leanTest, email);




The comments in the code explain what’s going on. $rootScope.currentUser picks up whoever the current logged in user is so we can grab their email address. HelperService.metrics.track() is our own metrics wrapper function that sends the tracking event to all our tracking services, exactly like The EmailService is a similar Angular.js wrapper we’ve written for the Javascript SDK. That line sends the email you saw above.

If you’re familiar with Angular then you’ll notice we also use the bs-tooltip directive from angular-strap for the tooltip.

Here’s the EmailService.js wrapper we’ve written to send the email using

var foo = angular.module('bar')

.factory('EmailService',function() {

  var sendEmail = function(eventName,payload) {

  return {
    sendLeanTest:function(content,email) {

    // We got a lot of stuff to send, so let's send a payload baby
    var payload = {
    var eventName = "_sendLeanTestEmail";
    return sendEmail(eventName,payload);




Et voila! As our lead engineer @spacenick says, the system receives our email content and figures out which template to use based on the event name _sendLeanTestEmail.

Let us know what you think and how you run lean product tests in the comments.

Arush Sehgal Arush Sehgal is the CTO of BRANDiD, A marketplace connecting men who hate shopping with people who love to shop.

Share this post

Did you enjoy this article? Spread the word