Check out the Gladly apps
Get Goodblock
Get Tab for a Cause

Startup: Our First Steps from Idea to Product

tumblr_npdxohyKX21urtxwqo1_1280

Kevin Jennison and I co-founded Tab for a Cause, a web app that allows you to raise money for charity simply by browsing the web. In the next few posts, I will share our story as we went from two college students with an idea to Tab for a Cause today which has now raised over $120k for charity.

This is the story of how Kevin and I went from an unclear idea about online advertising raising money for a good cause, to the first functional version of Tab for a Cause. Hopefully you will find this story entertaining, helpful, and motivational (this may finally prove that anyone can pull it off); but this should be viewed simply as one example of many paths to get from idea to product.

In fall of 2010, Kevin and I were juniors at Grinnell College and Pomona College, respectively. We were close friends in high school and stayed in touch every few weeks throughout college. We had done a number of silly projects during high school and college breaks, and realizing we really enjoyed creating things together, we made a pact to share any potential ideas.

As a result, Kevin sent me this message while he was studying abroad in Costa Rica:

image

We had passed a few other ideas back and forth before, but this one immediately resonated with me, and we quickly relayed our excitement back and forth. After a few days of excited exclamations, we buckled down and created a list of questions we needed to answer:

  1. How are we going to build this?
  2. Will this be viable from a financial standpoint?
  3. How do we protect our idea?
  4. What are the concrete components of our idea?

I’ll describe our process for each sequentially, but in reality, these were all happening in parallel whenever one of us had a few extra hours to spend googling these questions.

HOW ARE WE GOING TO BUILD THIS?

Both Kevin and I were science majors and had no previous experience with programming or web development. After doing a little Google searching we found companies that build software, but quickly realized this would be far too expensive (neither of us had much, if any, money in our bank account).

We then tried to convince a couple of CS major friends to build it for us (for free), but they both agreed it wasn’t that difficult, and that if we were serious about it, we could probably teach ourselves enough to get it done. After initial disappointment, we decided to bite the bullet and jump in (more on that later).

IS THIS FINANCIALLY VIABLE?

This was far easier to answer. We found an article that said Hulu earned about $25 to $30 for each 1,000 video ad impressions served. We assumed 3 video ad impressions a day per user, and quickly found that at about 5,000 users we would raise over $150k for charity in a year! We were pretty confident we could get 5-10k users in the first few weeks of launching, so this looked outstanding!

While these estimations were wrong on many different levels, it was still a useful exercise as we understood generally what type of scale we would need to reach to be impactful, and it seemed fairly reasonable.

HOW DO WE PROTECT OUR IDEA?

Because we had seen The Social Network, we knew we were supposed to keep things a secret so Mark Zuckerberg didn’t steal our amazing idea. After spending (in hindsight, way too much) time Googling patents, we determined that it is a fairly difficult and expensive process. Furthermore, we started to learn that software-based creations are incredibly difficult to protect via traditional patents. Essentially, we accepted that the best we could do while spending $0 was to ask people to not steal our idea. In retrospect, this was more than sufficient and probably is for the majority of ideas.

WHAT DOES THIS IDEA ACTUALLY LOOK LIKE?

Our original idea developed quite a bit over the next 6 months as we talked to more people and started to understand the feasibility. Our first big change was choosing to support a small number of established charities across a wide range of general causes rather than one specific cause. We thought (and still believe) that anyone who uses Tab for a Cause should be able to find a cause they care about.

The next big step was to change our idea to have a better user experience. We shifted away from what was almost malware (a program that would insert a fairly obnoxious step into opening your browser) toward utilizing a currently blank page that you see many times per day. We envisioned that each time you opened a new tab, you would be greeted by a short video ad, followed by a funny or thoughtful video made by the users (Kevin and me to start). This change was sparked through a conversation with one of our good friends, Sam, and was a crucial change in our product.

Once we were confident in these changes, we sat down and spec’d out what we needed:

  1. A way to change the default blank new tab page to our page
  2. Video advertisements that played on the page, ideally as pre-rolls before enjoyable content videos
  3. A way to choose which charity you were supporting
  4. Some sort of actual content on the page to make it more enjoyable
  5. A website describing who we are, and what Tab for a Cause does

Another bit of searching on Google confirmed that we could accomplish all of this with a browser extension that would work on both Chrome and Firefox. We had the blueprints, now we just needed to throw it all together.

BUILDING TAB FOR A CAUSE

Kevin and I both had a fairly lengthy winter break which we had reserved for working on this idea. We spent a few days doing basic web tutorials on coding and then decided that it was better to just jump into the actual project.

Warning: what follows is probably not the best way to learn how to code, especially in the age of free online coding courses. But this is what we did.

By flip of the coin, I took on building the Chrome extension, Kevin took Firefox, and we started a bit of a collaborative race to create an extension that could change the new tab page at a user-specified frequency.

Thankfully, Chrome had very helpful documentation on what an extension was, what files were required, and how to start developing and testing. After a night of following tutorials, Kevin and I had both created an “extension” that had a cute globe icon and said “hello world.” At this point, we were proud of our immense learning capabilities and confident that this whole coding thing was overhyped and actually extremely simple.

I then proceeded to find a couple Chrome extensions that had similar functionality to what we were trying to make (namely, changing the new tab page) and tore them apart to see what made them work, which entailed deleting random sections of code to see what broke and  making a note of any Javascript method that seemed to be particularly useful. This was a fairly slow process, but for us, incredibly exciting. Each time we got a small piece of our extensions to start working, we high fived, danced around my basement, or otherwise celebrated things that any other skilled programmer would consider “writing a line of code.” After about 5 days and nights of slow progress, we had two (mostly) functional extensions that changed Chrome and Firefox’s default new tab page to a webpage of our choosing.

image

Kevin and I “coding” on day 2 in the first Tab for a Cause HQ (my parents’ basement)

The next step was to put together a homepage for Tab for a Cause and a webpage that would be shown from the extensions. Similar to the extensions, we found a free website template, pulled it apart piece by piece until we understood how it worked, and then created our own version. Again, progress was slow, but we were still so amazed that we could actually create things online we hardly noticed. The first version of the website was objectively hideous—who cares?We were ecstatic to have created something that fulfilled our vision.

image

One of the early versions of the Tab for a Cause homepage. Sadly (or maybe for the best), this was actually from about 6 months after we launched and is considerably better than version 1.0, of which we do not have any screenshots.

The biggest final step was finding video ads, and creating a repository of videos of Kevin and I to intersperse with ads as “content”. We agreed to get together for a few weeks in the summer to try to crank through the videos and finishing up the website/extensions.

After creating about 30 thoroughly embarrassing videos of ourselves, we realized that our “content” was really quite bad. We had a few hours of despair, and then our friend Sam pointed out that most people love beautiful pictures related to charity and that those were easily sourced through online photo repositories.

Alongside eliminating content videos, we realized that video ads were both hard to source and disruptive to the user. As such, we decided to use standard banner ads that we could readily fill through accessible ad networks like Google Adsense and OpenX. By the end of the summer (and nearly the end of our patience) we had a functional website and two browser extensions that (somewhat) reliably changed the new tab page to go to our website where any visitor would find a beautiful picture related to a charity and a couple of banner ads.

image

The first version of our new tab page. The design perhaps left a little to be desired…

For the sake of brevity, I skipped over some of the more embarrassing mistakes of our early coding (for instance, our source control strategy was a shared folder on Windows Live  Mesh, renaming files things like “homepage final (actually final)2.0”). However, the only important thing was that we had managed to create everything technical we thought necessary to launch Tab for a Cause.

In applying for ad networks, we found out that we needed to form a legal entity and get a bank account to receive any payments. Google solved those pretty quickly (filing an LLC in Wisconsin is surprisingly straightforward) and within a week we were proud owners of Tab for a Cause, LLC and ready for launch.

Read about how we took this product from 0 to 1000 users here (coming soon!)

WHAT WE LEARNED:

There is no doubt that we did a ton of things “wrong” or suboptimally in this process, but we learned an incredible amount about ourselves and tech startups in general:

1. Building the product ourselves was invaluable

  • We understood every aspect of the product, and when things went wrong, we generally knew how to fix them. Plus, we were able to change the idea in subtle ways as we were creating it. With our newfound technical skills, we’d be able to build on the product going forward. If we had somebody else code everything, there’s almost no way we could have built Tab for a Cause into what it is today.
  • Programming was not some unattainable skill, and at least one of us really enjoyed it! (spoiler: it’s Kevin, who’s now our full time CTO.) We have found this to be true of a lot of “hurdles” we have encountered, and having the success in programming under our belts gives us confidence to jump in over and over again.

2. Talking to people about our ideas was extremely helpful

  • Every time we talked to someone new about Tab for a Cause, we came away with a plethora of new ideas.This feedback guided our product before we even built it and saved us from tragic mistakes (like trying to make people watch autoplay video ads).
  • We also realized that keeping your idea a secret to prevent stealing was a non-issue. As we have learned, the idea portion is the easiest part and often changes dramatically as it is realized. It is quite likely that at least a few people have already had any given idea in some form and decided it wasn’t worth pursuing.

3. Flexibility is crucial

  • Very few things went according to our original plan and in many ways, our original plan was terrible. The important part was that we believed strongly in the underlying idea and were willing to find some way to realize that idea.

This entire process of turning an idea into a physical product was a lot of fun. Now, we believe in the “well, let’s just dive in” attitude, and it has served us well at all points along our growth.

Written by Alex Groth, Co-Founder and CEO

MORE ON THIS TO COME! UP NEXT I’M GOING TO WRITE ABOUT HOW WE GOT FROM 0 TO 1,000 USERS, AND AFTER THAT FROM 1,000 TO 10,000!

  • http://www.beaupedia.org Beaupedia

    Thanks for sharing the behind the scenes journey! Looking forward to more; you guys are inspiring.

    • http://www.gladly.io Gladly Inc

      Thanks for the kind words! We are definitely planning to publish more about our journey so far.