Christmas 2010 I had the idea to make a video of the 37signals homepage. I’d recently gained access to the relevant source code repositories and It seemed like a fun thing to do over a weekend.
The result is the video below. It’s a timelapse of the 37signals.com homepage between March 2009 and January 2011. Enjoy!
Thanks to Piarango for the use of “La Asombrosa” found on Ramen Music Issue #02.
Creating the video
First I wrote a Ruby script to check out every version of the site from git, our source-code repository. I used mojombo’s excellent grit library for this.
For every revision checked out I ran an Objective-C program I had written to screengrab the resulting page by requesting it from a web-server set up on my local machine. This program saved all the screen grabs as sequentially numbered files in a temporary directory.
Next I ran imagemagick on all the images to crop and resize them and after that I ran ffmpeg on the the images to create a movie. Nearly done!
The movie worked, but lacked finesse. After allowing it to mature for a few months I ran it through Final Cut Pro to add an intro, music and credits. I also had to do a fair amount of editing to remove long parts where nothing changed. I’d done some de-duplication of images in the Ruby script, but it needed a lot more work. The final movie was down from 3:35 to approximately 1:00 in length.
Will Jessop wrote this on Sep 15 2011 There are 27 comments.
Neil 15 Sep 11
Love it! Have to show this to the lords above!
Sean 15 Sep 11
It would be cool to see a ticker or gauge in the corner showing subsequent conversion rate increases on the most successful iterations.
Justin Jackson 15 Sep 11
The video really shows 37signals’ propensity for editing, tinkering, iterating. Thanks for sharing!
Lee 15 Sep 11
How did you deal with the data dependencies of the homepage, or is it predominantly static? I’d have expected you to have a hard time finding database info going that far back?
Brad 15 Sep 11
Thats pretty cool! Interesting to see how often the headings are tweaked to push for a better conversion rate! I was just looking through the old designs of 37signals on (http://web.archive.org/web/19991128082709/http://www.37signals.com/ – 1999! ) when I found this article.
Nader 15 Sep 11
Awesome vid! I had recently done a similar video to show the clients the masses of iterations we went through when designing the homepage.
MattO 15 Sep 11
What is the mean time between changes ? great video. love the small incremental changes.
Will Jessop 15 Sep 11
Lee: The pages were mostly static (with a bit of PHP ) so it wasn’t too hard to get all the versions working.
Russell Lundstrom 15 Sep 11
That is very cool. Seemed like a lot of work at first but then I watched it. Boy, if you could timeline analytics on all your biz processes, that would be something…
Thanks again.
Paul Saunders 15 Sep 11
Very nice… Interesting to see just how many changes were very organic subtle changes before and after the “major” redesign. I’d be interested to see the changes against a time line just to see how many changes were almost instantaneous changes of the designer/copy writer’s mind and how many were changes that had been lived with for a number of days/weeks. Great work.
TorgoGuy 15 Sep 11
Lots of tinkering. So how many revisions were there during this time period?
Juan Genovese 15 Sep 11
Begin a fan of your work, and an argentinian developer, I’m proud to hear that two argentinian musicians are soundtracking that awesome video. :) Thanks a lot for sharing, keep bringing the good stuff!
Olli 15 Sep 11
It would be even better with some timestamp information, even something like Jan/2010 etc. Now it’s kind of out-of-context, it’s impossible to know when major changes happened, or in what timeframe things changed.
Duarte Carriho da Graça 15 Sep 11
This is really interesting.
While I was watching, it felt slightly too fast. I think editing less, leaving it at a steady pace of, say 1 second per week (regardless of the amount of changes) would have given it another dimension, in the form of a data-dense rhythm.
Dave Nine 15 Sep 11
Awesome! You didn’t use url2png.com for the screenshots by chance did you?
Dave Nine 15 Sep 11
Awesome! You didn’t use url2png.com for the screenshots by chance did you?
Matt Moore 15 Sep 11
Very cool! You guys definitely make a lot of tweaks. It’d be interesting to hear about the motivation behind making all the subtle changes.
Mike Lee 15 Sep 11
Very cool! And extra points for describing how you put the video together.
I noticed some minor back-and-forth text and layout changes – are those from various A/B tests?
Will Jessop 15 Sep 11
Dave: I didn’t, I used a custom written Objective-C program that uses Webkit.
Glenn Street 15 Sep 11
Watching the iterations, seems what you have done slowly evolved to look more and more like the ad style David Ogilvy made famous 40 years ago. Big headline at top, big visual(s) below, text and sub-headings below that. Coincidence? A too-vivid imagination on my part? Or does Ogilvy’s elegant style still work, no matter which print-like medium is used?
Blain Smith 15 Sep 11
This is pretty cool. Were all of those iterations live at one point or another or were they just different versions that never made it out of git?
Mark 16 Sep 11
I really like how 37Signals always puts the extra effort into the details until they find something that really works. Every little bit of text matters.
Steve 16 Sep 11
@Will Is the object-c program available somewhere (open source)? I’m making a research about the best and more efficient way to make screenshots (without using 3rd parties services).
Matias 16 Sep 11
Great video. It was a surprise to listen the tune of an Argentinean “chacarera” as background music!
Daniel Ashcroft 19 Sep 11
Really like the video. I love all the little changes you’ve made, I never realised there were so many. Good work
Dimitar 19 Sep 11
Very interesting video. We are doing exactly that with our website. We iterate constantly and improving the usability and information of our website.
“Iterations lead to liberation” – Getting Real
Will Jessop 21 Sep 11
Steve: The program isn’t Open Source, it’s just something hacked together and isn’t prepared for the limelight! I’ve tried a bunch of screenshot tools, none are as good as Webkit.
This discussion is closed.