37signals.com - Evolution of a homepage | Hacker News Reader

37signals.com - Evolution of a homepage

37signals.com

195 pointswlll22 comments

Two things struck me:

1. Not much overall change.

2. Negative slogans are quickly phased out in favor of positive ones. "Drop a bomb on your competitors" and "gain an unfair advantage" quickly give way to "a better way to work with people."

Not much overall change? Midway through the movie the complete design for the entire thing changes from a colourful, pastel shaded page to black/white with large fonts and a focus on copy. That's a pretty huge change and definitely not inspired by marginal A/B tests. They just changed their minds, tried something different, and stuck with it.

Well overall they changed it once. I know a lot of websites that have made huge changes several times.

I expected more from the video. There were no evolution. Just little image/text/size-changes. And then they changed it completely, and did the same as before.

I was expecting more, but instead like the minor evolution. You can see the text be tweaked bit by bit. Font, sizing, arrangement within sections, word replacements, etc.

Think it speaks to continually tweaking your site bit by bit. Don't need to completely redo it or do massive revamps.

I noticed "Drop a bomb" too and thought wow...what a terrible idea. First and foremost because their competitors can obviously avail themselves of the same tools.

That was just for internal fun. I didn't know it would ever make it outside our walls ;)

Figured it had to be something like that if every checked out version was being displayed, and it was on the screen for such a short amount of time.

There's a good mix of iterative changes and structural changes. I think the structural ones (that don't deal with aesthetics) are the most interesting.

One trick I like to do is stand a few feet back from the monitor/LCD, and try to, in 3-5 seconds, figure out what I'm looking at. I think its a good trick because you'll realize where your eyes go to first (smaller text/details usually gets blurry), and the time interval will tell you what you're communicating clearly.

When you compare the first version in the video with the last using this trick, there's a huge difference.

The 2009 version has an overwhelming amount of detail, with an ambiguous "Change your Business"/"Change the way you work" title. A lot of information is crammed in the first frame (company history, latest news, etc). The 2011 version is remarkably clearer: The two large texts explain the product offerings and that they are kind of a big deal (social proof) - both keys to selling. The rest of the information is prioritized descendingly. "Style" (what people most typical mean when they say design) has been minimized.

Another company's website that is great with this (standing back/first thing that pops in your head) is, suprise, surpise... apple.com

One thing 37S have got (in spades) is good writers. That really shows here, and generally throughout their products.

I see a lot of arbitrary changes in this video. I'm not saying all of them were, but I don't see the point in making your web team add 5 pixels here or there, or switch out "us" for "it".

I didn't perceive their strategy as "experimental" but as "erratic". Even if A/B testing showed slight gains or falls, I would prescribe those changes to random chance over the value added/lost. Unless there's a possibility of measurable effects, go with your gut.

looks like the result of continuous a/b testing results... change one thing, deploy to some people, capture funnel change, rinse, repeat.

None of the changes here were due to a/b testing. This is just the initial design process + internal iteration.

I loved the little war over whether to use 'us' or 'it' (0:52-0:55) in the phrase:

Millions of people depend on our software. Entrepreneurs, small businesses and teams inside big organisations rely on it/us daily.

There were dozens of subtle variations on this statement that were never committed. I hope to find some time to do a detailed post on that sometime.

I'd love to see a post on the branding lessons learned through variations in copy. What phrases worked and what ones sucked. The biggest branding mishap I see on a regular basis is a company that doesn't know how to talk to its audience.

With that title, I was expecting an evolution from the early days, when the homepage was just a manifesto. I really wanted to see that video, and this one left me underwhelmed.

The use of a huapango as the background music made me smile though.

I love how subtle the changes in this were. Shows 37signals' great attention to detail, focus, and restraint. Fun idea for kids: organize the different screens into a book and make a "what changed in this picture" game.

Sidenote: One of my favorite features of the site is the "Happy Day" in the upper left hand corner. Best part of the video was seeing it appear out of thin air.

Incredibly interesting to watch, especially notable areas of A/B testing. They did a lot of testing with exactly how to display their media mentions.

I'd love to see this for sites that went through multiple pages of transitions.

While I was watching, it felt slightly too fast.

I think editing less, leaving it at a steady pace (say 1 second per week, regardless of the amount of changes) would have given it another dimension. A data-dense rhythm.

https://gist.github.com/1219927 Here is a quick shellscript for anyone who wants to do this for themselves using url2png.com

What's interesting here is not just how they play with the copy, but how they iterate over small details such as margins, padding, and shades of colors (even on the text and links).

Very cool! fun to watch, not a big fan of the music though..

Reply on news.ycombinator.com