Our DIY Homepage Process

BY Doug Breaker

January 21, 2013

We recently decided it was time for a major update to the public side of Scout. We’d start with a more polished homepage. Since we’re both developers, the obvious next step seemed like hiring a designer. However, working with an outside designer isn’t a hire-and-forget experience:

Instead of starting work with a designer on a blank slate, we decided to start firming up what we wanted the homepage to look like. We’d end up with one of the following outcomes:

Structure

We had a rough idea of what we wanted for the structure of the site:

Inspiration

In the past, finding design inspiration has been a laborious task. Blog posts that highlight good design often don’t cover products. This time, I used Dribbble, creating a Public Site Inspiration Bucket. I searched Dribble with terms like “homepage”, “minimal”, and “landingpage”.

Showing up for work

I was leading the design on this and warned Andre not to expect any works of art in the beginning. Instead, my plan was to simply show up for work: work on design a bit every day, valuing rapid experiments and lots of mockups.

As we focused in on a style we liked, I started applying more polish and things came together. In all, I created 24 iterations of the homepage. Iterations often had several alternates as well.

About half-way through, it felt like we could probably do this ourselves. It took 30 days (including a break over the holidays) to launch.

Copy

I admire product sites with solid copy – it’s especially hard to find with technical products. Early-on in our process, I replaced placeholder text with actual copy. This gave us lots of time to firm up both the design and the text on the page.

Tagline – “Neckbeard Optional”.

Products like Scout that emphasis simplicity often strike a negative or snobbish-tone with their tagline:

I wanted to avoid this. I assembled 30 possible taglines for Scout and the term “neckbeard” consistently floated to the top, because, obviously, neckbeards are the awesome.

The general public may not know what we’re referencing, but a developer visiting our homepage probably does. My high school English teacher always emphasized “show, don’t tell”. Referencing a neckbeard shows how every part of Scout is really written by (and for) developers, including the marketing copy.

Decreasing the scope

About halfway through the process, we decided to cut the “7 days on Scout” section. We love the idea, but doing it right would require a significant amount of time. There’s no reason we can’t add it to our homepage later.

Browser Testing with Browserstack

Since Scout doesn’t support Windows, an incredibly small percentage of our visits come from Internet Explorer. However, our homepage attracts a more general audience, so we wanted to make sure it looked solid in IE as well. Instead of dealing with something slow and complicated on my Mac, I just used Browserstack. Browserstack is great: tons of browsers (way more than I’d ever install locally) and support for SSH tunneling straight to my laptop.

Summary

We were able to put together a design we liked by:

Remember, the worst case DIY design route: you form a much clearer picture of what you’re looking for.