A few months ago we redesigned 37signals.com — our main site. I want to share with you a few iterations and permutations I created along the way. I’ll also give a little insight into the discussions we had about each design: what we saved for the next version and what we axed because it wasn’t working.
First, a frame of reference
This was what the 37signals site looked like when I started this project. Each time Jason Fried and I talk about changing ANYTHING on this site he always says something like this:
Jamie, 37signals.com is VERY IMPORTANT. A ton of traffic to our app sites comes from here. We need to make sure that we aren’t abandoning clarity for cleverness. CLARITY is of utmost importance on this page.
Actually, now that I think about it he says that about everything I touch. Kidding aside, 37signals.com is a very important site. Careful consideration should be taken when undertaking a redesign.
The never-launched enhancement
A year ago I worked on a short project to enhance parts of 37signals.com. Out of this exercise came the design below.
I liked how this design made our products look like, well, products. Basecamp, Highrise, Backpack, and Campfire are presented like shrink-wrapped packaged software. I also liked how easy it was to understand what 37signals does. We make incredibly useful software for your business. Here are our offerings.
I can’t remember why this design never launched. It could be that at the time we had bigger fish to fry. The forms that came out of it, though, would play a part in the bigger redesign project in later months.
One from the archives
2 years ago I created a design for 37signals.com that I liked. It didn’t work out for a variety of practical reasons. However, I liked the direction: mainly typographic. I save all of my design hits and misses. I hope you do too. There were elements and concepts here that I would save for a later design. This was a kick-off point for me as I started out on the 37signals.com redesign.
Revisiting the manifesto
Like most of you here, I was always impressed with the original 37signals site. First let me give you some context about this original site. 37signals was a web design company. They would pitch companies or ad agencies to design web sites. This was before Ruby on Rails and before Basecamp.
The web landscape back then was all about the flash — literally. Every site that agencies were churning out were complete Flash sites with techno music pumping in the background. Agency websites were all about motion and flash intros. So you have to understand that this 37signals manifesto site was really counter culture. It was revolutionary in presentation and messaging.
Jason and I both arrived at this idea of revisiting the manifesto. How would the manifesto design look like now that we sold software?
What if the site was a clear statement of what 37signals was? Just simple type. Such a design would be antithetical to what many people think of a software company’s website.
Feedback: The design is strong, but it relies too much on the person reading to figure out what 37signals is. Might be a cool one-off campaign thing, but not as the main website for our business.
Another idea was to break up the page into 3 blocks: apps, ideas, and REWORK. A person could scroll down the page and get a good sense of what 37signals was about from these 3 blocks.
Feedback: There’s definitely something here that is working. Let’s see how we can take this further. This moves on to the second round!
Big and graphic
I always like to throw in a “from left field” design just to see where it goes. This isn’t thematically related to the “manifesto” idea. I thought it was worth exploring and seeing next to the other options.
Professionals might also see this as the design you hope the client won’t pick, but is there to divert attention to the other options. It shows some range, but ultimately its main purpose is to fail.
Feedback: Not the right direction.
The world map
How about we show that our apps are used by people all over the world? The diversity of our customers’ businesses and locations is a powerful story to tell. We could be doing a better job of telling this story. Our customers are not just from North America. They’re all over the world!
Feedback: We all agree that our world-wide presence is a great story to tell. However, front and center like this makes it a bit unclear. Do certain people in this country use Campfire? Do these people only use Basecamp? Ultimately that story is better told on the Customers page.
The idea behind this layout was to mirror an ad in a business magazine. Maybe it is similar to a one-sheet you’d get from a car dealership. A simple, tight layout that communicates everything about your company and products.
Feedback: I like this design a lot. DHH did to. In fact when I started producing the HTML he was confused as to why the design didn’t look like this one. The layout, though, is inflexible. It is something that we’d quickly outgrow.
3 blocks: Show world-wide use
This iteration of the 3 blocks layout added the map idea. Let’s show some customer faces on a map to get across the idea that our apps are used all over the world.
Feedback: Jason thinks the map is unclear. What is it? What are those faces doing on there? I think the idea is there. We have a heated discussion in Campfire about it. I ask to take another stab.
3 blocks: Map version 2
I make the photos bigger and also intersperse the pictures with logos of some of our customers. The idea here is to show that we have big brands as customers (depicted by logos) and also small businesses (depicted by pictures).
Feedback: Jason still doesn’t like the map. More heated discussion. His concern is that we’re not talking about the variety of businesses that use our products. I see his point. I shelve this discussion to work on the Manifesto part of the layout (depicted by the numbers and paragraphs under the map).
3 blocks: Make beliefs more typographic
The beliefs don’t need to be boxed in like the apps. Let’s see how they look without boxes.
Feedback: Good, but still needs to be pushed a little further. Needs to be a little more elegant. Jason says all he sees is the number not the idea.
3 blocks: All typographic
OK let’s gray back the numbers and put the emphasis on the headline for the belief. I also have an idea for the Customers part (ditching the map).
Feedback: Love the belief section. Jason still isn’t feeling good about the customer section. It isn’t showing the diversity in our customers enough. Oh yeah well f—!? OK back to the drawing board.
3 blocks: photos for each industry
I mock up a quick idea to have photos of different customers from different industries. This is depicted by the black and white sketch below.
Feedback: Still not right. Too limiting, doesn’t show that anyone can use our apps.
3 blocks: OK, how about we kill it?
Looks pretty good removed.
Feedback: But I’m not one to back away from a challenge. This story about the diversity of our customers is just too good to not tell.
The final design
After many more micro iterations and permutations we finally arrive at the final design. I’m really happy with the way it turned out. I hope seeing a little bit about how we got here gives you some comfort that we try many things internally before we get it right.
Feedback: We’re still working on it! Thanks for taking the time to read this post.