Our DIY Homepage Process

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:

• Good designers are difficult to find. Design doesn’t scale like a product business.
• Good designers are busy. It could take 30-60 days to start work, then another 30 days for it to come together. This means we could be looking at a 90 day timeline. We wanted to launch it faster.

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:

• We’re terrible at design, but we’ve at least thought it through. Hire a designer.
• We can get 80% of the way there, but we’ll need a designer for touchups.
• If we iterate enough, we can launch something we’ll be happy with.

Structure

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

• Tagline and overview – In as few of words as possible, give an overview of Scout. Highlight Scout’s sweet spot.
• Social Proof – Our lightweight approach to monitoring can scare off larger teams that think Scout won’t meet their needs. Show this isn’t the case: large teams love using Scout.
• Feature highlights
• 7 days on Scout – Highlight how Scout fits into a developer’s day-to-day life, similar to the Living with Nest section on nest.com.

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:

• “FOO done right”
• “FOO that doesn’t suck”

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:

• Using Dribble to quickly assemble a bucket of designs we liked.
• Working on the homepage design every day. Be OK with ugly things in the beginning.

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