How I Took an Engineering Test & Turned It Into a Growth Machine
Fast forward to 2017: This resulted in 483 Views & 116 Reads, 6 Job Interviews, 1 Offer, was noticed and retweeted by my one love: Mixpanel, and is still getting traffic. I’ve since shut down the server to the app, so none of the links will work, but the screenshots and videos should be plenty to offer a deep insight into this silly project.
I wouldn’t call this a growth machine by any stretch of the imagination. A portfolio piece that goes deep into the often boring topics of what it actually takes to push out a referral program though? It definitely delivered on that. And finally, it landed me interviews with companies I’d never dreamed of interviewing with, and finally got me a growth portfolio piece I could talk about (I’m under a mountain of NDA’s still).
Definitely a personal win for me.
Disclaimer: is this really a growth machine? It could be, it might even grow organically, but given the length of this article and the technical nature of it, I doubt it.
Does it have all the right referral mechanics and gamification included though? Absolutely! That only gets you so far, and I’m not so naive to ignore that.
Alright, let’s get this show on the road!
TL;DR:
You can see the app’s Landing page here: http://www.zenenotes.com/. This whole thing works awesome if you can go there, create 2 notes, and share the link out to test out the Leaderboards.
I’m happily employed at Dialexa, but always keep my ear to the ground for opportunities that will build my career. When Zenefits came knocking, I had to hear them out. And their Growth Engineer position is exactly what I want to be doing with my career.
Here at Dialexa, I head up the Growth Engineering arm of our multifaceted team, and helped start the practice. But product work is alluring, and so is returning to San Francisco.
Regardless of whether I end up with Zenefits or not, I wanted to create something that was a showcase piece of my capabilities with nothing but plain old HTML, CSS, JS / jQuery, and Mixpanel.
All that said, the phone interview went well, and their engineering test was simple.
Create a mobile web app that allows you create, edit, and view short notes. Notes should be stored using browser local storage. The app should be usable on a standard mobile browser.
They requested that I spend no more than 4 hours slinging this out, so they could get an idea of speed / quality / etc. This is a pretty common request, but they also said that if I wanted to really go all out, I could spend as much time as I’d like to on it. Truth be told, I set out to spend 24 working hours on it, and while I spread it across a couple weeks, I ended up working on it for about 48 working hours in the evenings.
Knowing full well that I could lose the opportunity by spending far too long on this, I had to attack this like a Growth Engineer, and not just a simple front-end engineer (which to me was all they were testing for with this).
If a company couldn’t understand or appreciate the effort or thought processes that I go through as a Growth minded engineer, then I wasn’t interested anyway.
Opportunity be damned, I had a bone and I couldn’t let it go: I was going to build this behemoth from scratch.
I knocked out the 4 hour test by pure thievery in the design department. I ripped off Material Design aesthetics and near cloned the simplest parts of Google Keep. I fought through constant interruptions and long hours in the evening (because when is an interview and engineering test ever timely), and nailed down the basics and met the criteria with a few small pieces of pizazz.
Ok, 4 hours down, now to attack the growth plan.
Referral Campaigns Are My Jam
My growth bread and butter has always been referral campaigns with incredibly granular analytics. One of my favorite challenges was being tasked with creating a referral program akin to DropBox’s infamous growth mechanic, but for a startup that provided lawn care.
Yeaaahhh… you’re not going to be running out of any gigabytes with lawn care, so the trigger that Dropbox had just wasn’t there for us.
It really forced us to get creative. We found that our users were almost always price conscious, and willing to take advantage of deals.
I basically created a You+Me referral campaign, where anyone that clicks over and signs up nets you a free mowing, but to amp everything up, we provided them with discount services just for sharing (getting over that psychological hurdle of “can I even earn these rewards” was key to get the ball rolling).
There’s some gamification in here, personalized landing pages, nurturing campaigns of our referral rockstars, and some really wicked analytics that helped us discover which platforms to focus on and how to seriously leverage what we’d created. Here’s a snapshot of a custom dashboard I built out, though the data is last years (and not zoomed in on) to protect the company.
Ultimately, it ended up accounting for just under 10% of new user signups, with a referral conversion rate of 9.5% (versus 6.5% normal rates), and became the go-to focus for us regarding growth outside of traditional advertising methods.
That may not sound like a lot, but when it’s your first 6 months of being alive as a startup, it showed the most promise, and gave us enough ammunition to pour gasoline on the the referral program and get it to really take off. Robin now enjoys several thousand more customers than this, a 3rd of which can be attributed to the referral program.
The costs associated with running this campaign were in-line or less than our typical advertising spend used to acquire a new user, and the retention rates were better.
It was a really exciting time for me, and I’ve been chasing that dragon looking for the next growth tactic this epic for a bit now. That being said, I’ve really been enjoying building out the Growth Engineering practice at Dialexa, so this whole Zenefits thing was just a really fun opportunity for me to attack something.
Back to Making a Note Taking “App” Into A Growth Machine
Immediately, I wanted a referral mechanic for 2 reasons:
- I wanted to spread the word that I was capable of doing this, and knew that if I could make this a fun and attractive story to other’s looking for a growth engineer, it’d only benefit me.
- I know from soup to nuts, without any other products, how to implement this from scratch, so I was brimming with ideas, and I found that because I was extremely comfortable with these mechanics, I could bring a lot of humor and thought to the table.
Knock Their Socks Off
If I was going to impress Silicon Valley startups, I knew I needed a few things that went a bit beyond your typical front-end engineering challenge:
- I wanted to show that I could manage identity, as well as hit API’s that provide me with a spooky amount of data about anyone willing to provide an email address.
- I wanted to show off some material design CSS animation stuff I’ve always played around with in the background but never got to really put into practice.
- I wanted anyone looking at this to understand that I know about gamification and the Faucet / Drain mechanics.
- I wanted to demonstrate how deep I can actually go with analytics and (my personal favorite) attribution analytics.
- And finally, I wanted to lay bare one of my experiments for the entire world to watch happen in real time.
I’m no backend guy, but damn if I can’t get a ton of stuff done to test out a hypothesis. So here goes:
Branding in a Hurry
I wanted to have some fun with the brand of this thing, so I did a couple things:
- My favorite resource for slinging out side projects is to hit up Envato and search for design elements, sound effects, and anything else I may need that I can skip past the creative part and stand on the shoulder’s of design giants. It’s easily my biggest bottle neck, so I grabbed this origami Parrot (inspired by Zenefits origami logo) and ran with it. I thought it was funny and appropriate to mimic their brand with a parrot :P No offense intended!
- I also worked from their color palettes and grabbed their typeface as closely as I could match using another one of my favorite tools: http://www.myfonts.com/WhatTheFont. I grabbed Zenefits’ svg from the inspector, screenshot it, and uploaded it. WhatTheFont identified the font and I used Typekit to mock Zenefits typeface for my own logo.
Scary Data is Impressive to Marketers
Next up was doing identity work. My favorite API for this is FullContact. They’ve really been kind to developers and let me get away with a good deal of mischief as far as pulling in information.
I’ve always felt signup forms were the bane of any app, and if you can get it frictionless, even down to one input, all the better. Plus… I didn’t want to spend a million years on a full on auth. I really just need to uniquely identify folks. So when you land on the initial screen, you’ll get a single input, but I’ll populate a few things after you use it:
- Your profile picture (yay personalization), which serves to pull your eye a bit towards the growth mechanic counter in the top right (everyone loves their own face).
- Your first name.
The FullContact API makes fleshing out your contact information awesomely easy. This is where my 4 hour project expanded a bit to include an identity in your local storage, as well as a running count of the notes you have available.
The Referral Offer
I grabbed one of my favorite styles of notifications as design / interaction inspiration: the push down made popular by Wilson @ SumoMe.com. I didn’t use his software, mainly because it’d be overkill for this project, but the effect is simple enough to reproduce with CSS Transitions and class swapping in jQuery.
It has 3 options. Each with varying amounts of Free Notes, weighted for what I find most valuable (sharing a case study about my work, which is this article):
- Share this exact article (because really, this is the thing I want to have shared the most).
- Share the App Landing Page (I also want folks to know I can sling these app landings out with ferocious speed)
- Share a Rick Roll (yes… it’s childish, but if you want to get a good laugh, it couldn’t hurt).
Now, all these share options will push traffic back over to this article as explanation of what’s going on, because ultimately, I’m looking for folks to see what I’m capable of with my own personal case study.
The Platform Choices
Next up are another set of 3 simple choices:
- Share to Facebook
- Share to LinkedIn
- Share to Twitter
Don’t get me wrong… I love me some email importers, but I’ve always found that if you can swing a single button share, the barrier to entry is extremely low. Also, email importing would be so much overkill for a 24 hour goal :P
The share image meta tags are essentially an ad for hiring me as a Growth Engineer. Except for the Joke share. That one is hilariously click-baity, because yes, I can go there too if you need me to ;)
I wanted to get this out to a couple of places, but LinkedIn would make the most impact (or this is my hypothesis, as of writing this, I have no idea which will perform the best).
I could have added in multipliers and such for the platform choice, but I’m quickly getting into the realm of too-much-time for an uncertain job opportunity and evening work. So for now, we’re using each platform’s API’s.
The most interesting one is LinkedIn.
Clicking the LinkedIn button uses their Auth and Share API’s, and as a growth engineer, it’s exciting because it lets me just post straight to the wall.
Good UX? Absolutely not.
Do I get the content I want out to LinkedIn walls though? Hell yes! Seems like LinkedIn is a bit behind the curve on enforcing sharing modal UX. Facebook and Twitter offer nothing in the way of 100% controlling the content.
Throttling Note Gains (Drain and Faucet + Timeouts)
Alright, so we’ve got 3 different things you can share and 3 different platforms to share on. Next step was to track when the last time you shared was, and to lock you out of sharing so you can’t just smash the share buttons and rack up notes. This is like any game you’ve ever played from Facebook (Bejeweled, Farmville, CandyCrush, etc). This mechanic basically makes it hurt to be cheap, but doesn’t completely lock you out.
I’ve set this demo app for 20 minute share timeouts. That’s enough time to just demonstrate that there is in fact a timer running. I don’t actually expect anyone to truly wait that out. If you spent more than 5 minutes on this app, I’d be shocked :P
Also, on the sharing side, I’m not going to lock you out of sharing, but I’m only going to reward you new notes one time unless there isn’t a timer running.
I got a bit lazy here, and you’ll notice that every timer magically has the same amount of seconds. That’s because on refresh, I only check “minutes left” instead of real timestamps. I am actually storing timestamps, but I ran out of gumption for this, and just passed over “minutes left”, which was a nice round number that didn’t take any more calculation work on my end. I could have written it by the time I finish writing out this excuse, but eh, here we are ;)
The last bit of laziness was just locking you out of the share screen no matter what so long as you were time locked. Proper implementation of this would let you back into the share screen, but the UI would let you know that you’re not earning notes for spamming all your friends.
Finally, there would be an outlet to relieve the pain of waiting, such as paying for my notes app or signing up to my newsletter to never have to wait again. You could insert some high value conversion target here, because the real pain in gamification is this waiting bit. This conversion method works infinitely better than “remove ads” because it’s focused on some core aspect of the app that I should enjoy using.
The Landing Pages & Branding
My ultimate goal with all this is to get more people over to this post and case study of sorts. I also wanted to show a bit of my humor, and made everything really tongue-in-cheek. We needed full on landing pages for each of the share content parts because we want legitimate open graph meta tags to create different Share Images. Also, this whole thing should feel like it could be real, but if you read any of the content, you’ll quickly discover it’s just silly and not real at all, which hopefully gets people laughing and hunting for the story.
I also wanted to show that Landing Pages that convert are something I think about, and while this may not be the most converting landing page ever, I’m very comfortable diving into a template and slinging out enough changes quickly to get something out (I spent about 2 hours making that entire landing page happen from purchase of template to launch).
I’m only going to cover the Rick Roll and Conversion page here, because it’s where I could control the Meta Tags. The medium post will do it’s work naturally with proper content marketing, keywords, and Medium’s excellent meta tags.
The Conversion Page & It’s Meta Content
Everything about the sharing is about telling the story, and it’s prominent here. I also took a lot of liberties in making this landing page as ridiculous as possible. Hopefully you get a good chuckle out of it if you’ve ever put together a landing page before.
The RickRoll & It’s Meta Content
Probably my favorite part of the whole project. The social meta image and content is legitimately a huge joke to me because of the way Growth Hacking has been bastardized into this awful state of marketers marketing themselves. I could write another post this length about why I honestly do believe in Growth Hacking, but suffice it to say that I am not into the things that come up on Google and across social media in relation to Growth Hacking.
While only awarding you a single note, this should be a really easy barrier to entry for someone that doesn’t actually want to post.
The Analytics: Mixpanel and JQL
We’re logging a few events here in Mixpanel, but these are the big ones:
- We track People Properties immediately upon login, and if you came in from a referral, you’ll get tagged with who referred you.
- More people tracking: if you get shared to external content (this post), I use an interstitial screen to drop a cookie before sending you on. This tags you as potentially belonging to a referrer, and if you do convert, I sync up your cookie with your identity (email address), and get to keep all the data. This was a huge challenge and presented a giant hole in my data, but now that I’ve got it cracked, it opens up so many possibilities.
- We track Notes Taken (and type)
- We track share activity to measure the effectiveness of the app.
- We track referral source (this is not simply the referrer object, it’s true blue attribution tracking that survives everything you throw at it and all the link mangling that happens on social media). This means I can slice data of every event based on Content, Platform, and who sent you when you came in on. Really powerful for finding what network to focus on.
- From there we track share conversions and organic conversions.
With these events and 1 persona tracker, we can slice into several reports (I’m using JQL and the Mixpanel Platform to drive custom dashboards so I can both share those publicly and get all my info in one shot)
I grabbed bootstrap for some quick grids and used Mixpanel’s base charting libraries included in their Platform API to sling this out.
1. Share Engagement Count & Rate
Of the people who saw the share modals, how effective were we at getting them to share anything?
2. Conversion & Share Counts by Content
Of the 3 types of links you can share out, which created the most clickthroughs.
3. Conversion & Share Counts by Platform
Of the 3 platforms you can share out to, which platform sent us the most clickthroughs.
4. Leaderboards and Winning Combinations
Which combination of content and platform crushed and who did the sharing to achieve it?
5. Top X Referrer Stats
Who are our superstars? Who should we be courting through email / DM / Following? Who should we really make feel special? What is the ROI of each and every single person we do court like this?
These are the reports I would start with for most referral campaigns, plus a few more that would interest only me due to the granularity of the reports. But just to reiterate, with a few fire-and-forget events, some crafty tracking work, and Mixpanel, the analysis you can perform is incredible. You can see these reports yourself at: http://www.zenenotes.com/Dashboard/
About the Analytic Platforms
Mixpanel is far and away my favorite choice of analytic tool. I feel like they were the first lower priced but event driven analytic platform, and they were definitely the first to attack dashboards and insight’s from a design-first perspective.
I’ve worked with Google Analytics (event driven side as well as the vanity metric side), Keen IO (woah do those guys get developers and their audience), Kiss Metrics, and even on up into Tableau.
Mixpanel still crushes.
- Google Analytics is just convoluted and their UI’s are a mess, even when you dig in and setup event driven analytics (dear god that code is brutal).
- Keen IO is beast mode for developers, but their UI isn’t as great, and you’re pretty much guaranteed to need to roll your own dashboards (which is exactly what they market as, and isn’t always a detractor).
- Kiss has never impressed me much, but it’s not at all awful. Honestly, I probably choose Mixpanel over KISS simply because I’m comfortable in Mixpanel.
- Tableau is typically a nuclear missile for the jobs I work on, even when we get to the points that we need to upgrade our Mixpanel plans several times over.
- Finally, Mixpanel’s JQL is exactly what I need as a power user, and when I don’t need to be a power user, I can typically slice and dice data on the fly to get my answers within a few clicks.
Final Thoughts: Move Fast, Test Hypotheses, and Launch
I wanted to put a footnote here: my code is a bit of a mess, but I’m not ashamed of that. Building 5 landing pages and a custom dashboard across 48 working hours in the evenings left no time for refactoring, readability, etc. And this is often the scenario I am in: launch the experiment and analyze what is worth focusing on before dumping company runway into development efforts.
A lot of the time, you’ll only see me living inside of something that can handle, at most, jQuery to accomplish an entire experiment (I’m looking at you Optimizely :P ). I wanted to be able to show just how much I could get done, even if it’s messy, within an environment like that.
Above all else, I focused on Data Integrity.
Without data, you simply cannot make informed decisions, and the thing I love working on the most is providing incredible data to help facilitate those decisions.
Welcome to the bottom, I applaud your tenacity!
My name is Ken [email], and I’m a Growth Engineer for Dialexa. I tweet occasionally, Facebook often, and keep my LinkedIn meticulously groomed. You can find more of my blog posts at Dialexa’s Blog, and can see my doodles over on Dribbble. I’m an identical twin and co-founded Twin Engine Labs, who are now known for their unrivaled automation platform, Code Pilot.
