Still Don’t Know What I’m Doing: Bootstrap Cheatsheets One Year On

bundle-2

Roughly a year ago, I wrote about how I made a bunch of cheatsheets for Bootstrap’s Glyphicons (and Font Awesome too). Last time I wrote about it on Reckoner, I had just launched an online store to sell these posters.

Cheatsheet wha…? – These poster cheatsheets have hundreds of icons with codes printed under them. You find the icon you need, then pop the code underneath into your webpage. Saves you time if you’re a web developer.

Recently, I had someone comment on the original article:

Hi James. Now that nearly a year has passed since this article, can you share any success stories and learning from this exercise? I see your store is still running, so I’m guessing you are continuing to sell a whack load of posters?!? I’ve noticed you are also using redbubble for ecommerce, taking your potential buyers away from your branded website…any reason why Squarespace and Stripe didn’t work for you?

Ah yes! That’s a good question — what did happen to that store I was running?

That’s actually kind of an interesting story. Here’s what happened since then.


 

1. Launched, generated some interest

You might know this bit already. So I launched the store and the digital bootstrap cheatsheets. I got some interested leads, and that translated into a handful of early poster sales through the site (which was on Squarespace + Stripe for payments). Exciting!

At the same time as this, I was looking into how to print these posters and ship them out.

Option 1: I could go down the Officeworks down the road and print them as they came in.

Pros:

  • No money up front
  • No stock that I would be forced to sell
  • I could update the design any time I wanted, or any time the project was updated
Cons: 

  • My per-unit costs are high; I wouldn’t make much money
  • I had to do it all myself

Option 2: I could bulk order many posters from a proper printing company

Pros:

  • Unit costs way lower; I could actually make money
  • No repeated trips back to Officeworks whenever an order came in
Cons:

  • Money up front (around $1200) for 125 units each of the 3 variants I was selling.
  • A lot of stock potentially sitting around waiting to be sold
  • Open source project could update at any time & make the poster design redundant

So, which way did I pick?

Well, I went with the bulk poster printer. Paid a deposit. Finalised the design. Had everything ready to go.

Screenshot_021615_094442_PM

Great. Perfect. Let’s do this.


 

Then two days later, I read a tweet from Dave Gandy, the Font Awesome project founder.

Those words struck terror into my heart. Big new version. BIG NEW VERSION.

Oh. Shit.

I freaked out. I was about to put down twelve hundred bucks, and you’re telling me that my design is about to become useless with a ‘big new version’??

Nooooooope.

Straightaway, I cancelled the order. Luckily the poster dudes were very kind (pity can be powerful) and returned me my deposit.

Lesson learned: doing a big bulk order on the shifting sands of an open-source project is risky as hell. Do it at your peril.

In the end, I did each poster one-by-one at Officeworks, printed and posted them myself. Which leads me to point 2…

2. Interest died off, orders went with it

After the initial burst of a dozen or so orders, I had the typical going-into-the-trough-of-disinterest part that accompanies a product that’s no longer the new hotness.

The bad part was, it never really recovered from there. Orders stopped completely, and in the end I personally shipped about fifteen orders to customers.

I definitely tried a few different things. Spent a little money on Adwords (and AdRoll), posted a few links to the store in places I thought people might have found them useful (Reddit, Hacker News, Smashing Magazine etc).

I also emailed around to different designers, people prolific with either project to see if they’d find them interesting, or worth talking about. Nothing really stuck though.

If you asked me at the time, I would’ve told you that –though really cool– the posters were expensive, and shipping them anywhere except Australia was even more expensive. Honestly, the market for these kind of things–for web-developer nerd art–is in the US. No doubt about it.

If you can’t ship locally there, it’s going to be tough.

I count myself so lucky to have cancelled that poster order. SO SO LUCKY. If I hadn’t, I would had about 340-ish posters left unsold, sitting around in my apartment.

After profit, I would’ve also been about a thousand dollars in the red (plus my time). Not a terrifying amount, but still. I was a freelancer at the time. That’s a lot of money to be chucking away!


 3. I moved on to other things

After spending quite a bit of time (and nearly money) on this project, I had to move on. Yeah, I know, don’t give up, rah rah rah, follow your stupid dreams etc. I was still using the digital versions all the time, but the posters were definitively Not A Hit.

I kept the store open, but I didn’t update the designs when the new versions came out. Basically I chalked the whole thing up to an interesting experiment that nearly caused me to waste a grand on (very nice) 170gsm White Gloss finish paper loaded with a totally un-sellable design.


 4. Fast forward about 9 months

Out of the blue, I got a tweet about the cheatsheets:

Oh, yeah. The digital version I did earlier in the year. Good question…?

I clicked the link and the webpage came up straight away. They are hosted on GitHub, so maybe it was a temporary blip on their side.

But hang on. If this guy was still looking at them, maybe others are too? I had no idea — hadn’t thought about them in months.

I wonder what the numbers are like. Maybe I was lucky, and 30-40 people a week were finding them by accident…?

I fired up Google Analytics and took a look.

Analytics of Bootstrap cheatsheets from March to December 2014

The day I checked, December 11th, the digital cheatsheets had just cracked over 2000 people a day.

Whoa. That’s…weird. And good!

There were also some interesting stats there too. Most people spent under 40 seconds on the page — look up their icon, copy it, and go.

I hadn’t also gotten an order in months and months, despite the store still being hooked up to the digital versions. So there was something in this, but it wasn’t in the storefront.


 5. Operation ‘find way to make money off failed project’ is go

There had to be some way to make money from 2000 people a day going to a thing over and over. And for those if you who run websites, you probably already know the answer to this question.

I was gonna try running some ads.

I went with the biggest, and (probably) the safest ad seller there is – Google AdSense. After signing up, and reading over their guidelines (and GitHub’s too — turns out they allow you to run ads on a hosted project) I was ready to go.

I updated the project repository to the most recent version of both Bootstrap Glyphicons and Font Awesome, and in doing so added 3 ads to each cheatsheet. One up the top (above the banner), one on the 4th row, and one on the 7th row.

Google AdSense works, who would've thunkit

Well I’ll be damned — I just made ten bucks in 4 days.

I guess this is why everything has ads around it now.


 6. Sooo…..does anyone want a cheaper poster?

After I updated the digital versions of the cheatsheets (and in the process, taught myself how to use Grunt, Bower and Mustache.js – I recommend all of them) I decided to update the posters again. Making a bit of cash from ads is fine, but I’d rather keep them ad-free and just make money off a… y’know… a thing. A sellable object.

Call me weird.

Anyway, this time I was going to use Redbubble, an excellent Aussie site that will sell, print, package and ship the poster, then give me a cut of the profits. I don’t have to do anything other than keep the design up to date, which suits me just fine. It’s also way cheaper than my rinky-dink one-at-a-time Hi-There-Mr-Officeworks-Don’t-Judge-Me operation.

With a do-over in hand, I was also going to screw around with how I built the posters. Originally, I created the poster design in Illustrator, which is part of what made it such a pain to update. Look at this hot mess:

Original poster in Illustrator

I love Illustrator (first Adobe app I ever learned) but this was a horrible mistake. All of these elements are just free-floating in this page, so re-aligning even one part of the design would take FOREVER, with each little change multiplying across hundreds of design elements. Awful decision.

This time, I decided to rebuild it in InDesign based on a recommendation from a friend — thanks Lauren Watson! It’s an app I know very little about, but I needed to know if I could improve this entirely tedious process.

Instantly, I discovered that this was the app I should’ve chosen first time.

Screenshot_021615_104151_PM

The table and grid layouts I could employ (even me, a bumbling noob) immediately made this job SO MUCH EASIER. I spent a single afternoon learning InDesign and rebuilding a the same poster that took me over a week to perfect in Illustrator.

Man, I am dumb.

So, I updated the posters with this new improved technique, added them to RedBubble (cheaper product! better shipping!) and rebuilt my Squarespace site to point off to the new product pages. Now let’s see what happens…


 7. Posters fail to sell yet again

posters-dont-sell

Despite a few views on both, I am yet to sell a single poster from RedBubble. So, I dunno what to do with those posters at the moment.

I love ’em, but it appears that the majority of web developers couldn’t give a damn.


 8. Ads are still doing shockingly well

December was a bit of an odd month, with people going on holidays, so I waited until the end of January to get a proper baseline for how my ads were performing. Here’s what the AdSense report looks like from Jan 1st-31st:

January's AdSense

So in January, I made just over $134 on putting ads around the digital versions of the cheatsheets.

Which is nearly as much as I made on the whole operation before that. I gotta say too — Feb is looking even like it’ll end up even higher again.

Other than a version update when things change in Bootstrap or Font Awesome, I really don’t have to do anything for this money. It just somes in, and some days are large and some days are not. It’s good! Money is good!

But man, I don’t get it.


9. I am going to keep trying

Large Poster of Font Awesome 4.3.0

Tonight, I just updated the poster version of Font Awesome to the current v4.3.0, which now has 519 icons. The poster is on my RedBubble store. I’m also going to update the digital version with a specific link to it, to see if that spurs any users to throw a dollar my way. We’ll see what happens.

10. Learned a bunch of stuff

Here’s some things I picked up along the way

  • Don’t print physical objects based on rapidly shifting open-source projects
  • Watch Twitter – sometimes important, thousand-dollar saving tweets exist on there
  • Keep an eye on your analytics. Yes, even that failed project
  • Don’t use Illustrator for complex grid-based poster designs
  • Let services like RedBubble take a cut in exchange for dealing with the annoying parts of a thing you can’t do well.
  • Developers seem to hate buying posters
  • Ads make money, and the process by which this occurs is entirely foreign to me
  • A little InDesign, Grunt, Bower, Mustache.js

The experiment continues…