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.
Neil
on 15 Sep 11Love it! Have to show this to the lords above!
Sean
on 15 Sep 11It would be cool to see a ticker or gauge in the corner showing subsequent conversion rate increases on the most successful iterations.
Justin Jackson
on 15 Sep 11The video really shows 37signals’ propensity for editing, tinkering, iterating. Thanks for sharing!
Lee
on 15 Sep 11How 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
on 15 Sep 11Thats 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
on 15 Sep 11Awesome vid! I had recently done a similar video to show the clients the masses of iterations we went through when designing the homepage.
MattO
on 15 Sep 11What is the mean time between changes ? great video. love the small incremental changes.
Will Jessop
on 15 Sep 11Lee: The pages were mostly static (with a bit of PHP) so it wasn’t too hard to get all the versions working.
Russell Lundstrom
on 15 Sep 11That 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
on 15 Sep 11Very 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
on 15 Sep 11Lots of tinkering. So how many revisions were there during this time period?
Juan Genovese
on 15 Sep 11Begin 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
on 15 Sep 11It 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
on 15 Sep 11This 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
on 15 Sep 11Awesome! You didn’t use url2png.com for the screenshots by chance did you?
Dave Nine
on 15 Sep 11Awesome! You didn’t use url2png.com for the screenshots by chance did you?
Matt Moore
on 15 Sep 11Very 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
on 15 Sep 11Very 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
on 15 Sep 11Dave: I didn’t, I used a custom written Objective-C program that uses Webkit.
Glenn Street
on 15 Sep 11Watching 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
on 15 Sep 11This 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
on 16 Sep 11I 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
on 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
on 16 Sep 11Great video. It was a surprise to listen the tune of an Argentinean “chacarera” as background music!
Daniel Ashcroft
on 19 Sep 11Really like the video. I love all the little changes you’ve made, I never realised there were so many. Good work
Dimitar
on 19 Sep 11Very 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
on 21 Sep 11Steve: 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.