It took less than four hours of work to bring Snowpocalypse from concept to functioning website. The essential ingredient during these four hours was decisiveness. I could have spent days going back and forth between color palettes and running through hundreds of different fonts, but do those little details matter for something like this? Not really. Heck, I don’t even know what font I used for the website. What matters is the big picture. The whole package. As long as it all fits together, the smaller pieces don’t really make a difference. That’s not a hall pass to be sloppy, however, because sloppiness stands out and instills lack of confidence in customers. And that’s always bad.

Design

For this project, there were two distinct design components: a t-shirt and a website. I view this like a picture in a picture frame; the t-shirt was the picture and website was the frame. Lots of other Snowpocalypse shirts popped up in online marketplaces like Zazzle and Cafepress, where the sellers have virtually no control over presentation. This is stupid. Assuming the shirts were well designed, that’s like displaying a beautiful picture in a crappy picture frame. And then trying to sell it to somebody. If you think presentation doesn’t matter, you’re wrong. Ask Johnny Cupcakes, who makes millions selling t-shirts in t-shirt shops disguised as bakeries. Presentation matters. It’s just as important to have a well-designed website as it is to have a nice product.

The very first thing I did was a rough sketch of the website layout. Many designers call this wireframing, but I don’t think mine qualifies. If you’re serious about building websites, you might use nifty wireframing tools like Balsamiq, but I prefer the trusty pen and paper. I always have a notebook or scrap paper lying around and it’s the absolute fastest way to bring an idea from your head to canvas.

The next step was transferring the layout to digital. While Photoshop is extremely popular among designers and hobbyists alike, Adobe Illustrator is my tool of choice – I love the infinite flexibility of vector artwork. In Illustrator, I usually find myself working from the top down, so I started with the obvious choice – the header. The header is an introduction for most websites – it sets the tone and says to each visitor "Hi, this is who I am and what I’m all about". I figured a nice, big header would grab the visitors’ attention and lure them in. Something bold and juicy. After about 30 minutes of tinkering (far too long), nothing about the header felt right. I had the sudden realization that I didn’t need a header – the t-shirt was the focus of the website and it would accomplish the header’s goal of grabbing attention and introducing the website. Goodbye header, I didn’t need you this time.

Out of frustration with the website design, I moved on to the t-shirt. I had no idea what I wanted the design to look like, but I knew it had to say "I Survived Snowpocalypse" in some form or another. I hopped onto my favorite font website and discovered Snowtop Caps. Bingo. White snow on black letters and the design was done minutes later. On to the mockup. Since I’ve sold t-shirts online before, I’ve had the pleasure of sifting through every shitty mockup template out there. Illustrated shirt mockups don’t cut it. They’re sloppy and make the seller look bad. Multi-layer realistic Photoshop templates are where it’s at. They look like actual photographed t-shirts (because they are) and they instill confidence in the customer. This is the one I used, and I adjusted the color to nice shade of blue. That looked good so I rolled with it – decisiveness is key. If I didn’t tell you that t-shirt was a mockup, would you think it was real? I would.

Back to the website design. With the t-shirt mockup complete, I had my color palette. The background colors were pulled from the shades of black and white in the t-shirt text, with hints of blue scattered throughout. Not much to say here, I just did what felt right based on previous experience. Practice, practice, practice. Here’s the website mockup right before I jumped into coding (notice how empty it is):

Code

Lately I have been teaching myself Ruby on Rails, but this project was so simple that it didn’t require the vast functionality that Rails has to offer. I decided to just write up some basic HTML and CSS in Adobe Dreamweaver (though a standard text-editor would have worked as well). As I wrote the code, I pushed it to the server (ctrl + shift + u) and switched back and forth between the browser and editor. It didn’t matter that the live website was incomplete and broken while I was working on it – nobody had ever seen it and nobody would until I started advertising hours later. After about 90 minutes of tinkering, I was happy with the result.

Coming into the project, I was a bit worried about the checkout process. I’ve used pre-made ecommerce platforms in the past, but I couldn’t see that working here. They have long checkout processes and are a pain in the ass to setup. I needed something quick and dirty, so I checked out Paypal’s Merchant Solutions and found the "Buy Now" buttons. It looked like these buttons could provide the functionality that I needed, but who wants big ugly buttons on their website – especially eight of them (one for each size)? A little more browsing and I discovered the hyperlink counterparts for the buttons. Though the links are intended for e-mail, I hard-coded them into my website and voila – the simplest checkout system you could possibly imagine. Not only that, I could create "products" (like 3XL shirts that weren’t listed on the website) on the fly and e-mail them to inquiring customers. It worked, and it was magical. In addition, Paypal handled the order records and confirmation e-mails like a champ. Less than 10 minutes invested to setup the entire checkout system and payment gateway.

With a grand total of 2 small files and 5 images, the website was complete. This is the simplest website I have I ever built. For the curious, here’s the source and here’s the css file. Feel free to sift through, but please don’t copy-paste… you wouldn’t be the first.

User Experience

This part is more of an art than science, but I’ll try to explain my thoughts anyway. During the entire building process, I had one primary goal: conversions. In order to maximize conversions, I made the website as simple and as easy to use as possible. I didn’t want any customer confusion or anything that could deter or distract visitors once they landed on the site. I also wanted them to be able to get to the website as easily as possible. There were several key factors that played into all of this.

Unique domain. I gave the project its own domain instead of piggybacking one of my other 10 domains. Why? Because I wanted to create a mini-brand that would be easy to share and recognize. This was meant to go viral across social networks, and sharing is much easier if the URL can fit in a tweet or status. Ideally, I would have had something like Snowpocalypse.com, but it wasn’t available so I went with snowday2011.com. The kicker is that it doesn’t really matter what URL I chose, as long as it was short, relevant, and easy to spell and remember.

One-click checkout. This was as easy and as painless for the customer as it could be. There were no dropdowns for size selections, no “Buy This” buttons, and no shopping carts. Just click on the desired size, enter Paypal info, done.

A single shirt design. Several people suggested offering multiple different designs or different color options. I purposely chose not to do that. Not only would it have been more work for me, it could have resulted in difficult decisions for the customers. I decided to make that decision for the customers and sell with the shirt I wanted them to have. This is one of the reasons why deal-a-day sites like Woot are so successful.

No ads. Sure, with a new visitor to the site every 4.5 seconds for 48 hours straight I could have made a little chunk of change, but I opted against advertisements. It could have led visitors away from the site and reduced the overall goal of conversions. Additionally, they would have taken away from the visual appeal of the site.

Shipping included. I didn’t even realize how important a decision this was until it was applauded on Hacker News. My thought process was that people don’t like surprises when those surprises cost them money, so I decided to absorb those costs into the price of the shirt. No hidden charges or surprises. What you see is what you pay. That’s called honesty.

So there you have it. That’s how I built the Snowpocalypse mini-brand with 4-hours of work. As mentioned in my previous post, plenty of experience helps, but a healthy combination of design, code, and user experience decisions is a necessity. Subscribe to the RSS feed to learn how I marketed the project, along with logistics, statistics, and what I found out along the way.

- Loren

blog comments powered by Disqus