The idea
Jason Fried sent me a text Saturday morning a few weeks ago: “Pumped about an idea for a ‘meet our customers’ page. In on Monday??”

The idea, I learned Monday, was pretty cool. First we’d ask customers (on our blog and on Twitter) to send in photos of themselves. These photos would be printed out and pinned to a Customer Wall in our new office — an entire wall covered with the smiling faces of our customers. Then we’d create a page on our website that would simulate this office Customer Wall for everyone to see. Within 5 minutes of our discussion, Jason asked customers on the blog to send their photos and bios to me. The photos and bios started arriving immediately. I started designing.

Design and production
The design of the Customer Wall page is pretty simple. There are only 3 real elements: a photo, a map, and a block of copy.

Making sure that the balance and proportions were right was the tricky part. I used real customer photos and bios for my designs as the emails started coming in. Here are all of my iterations of the customer bio design. Some of the changes from iteration to iteration are seemingly minor, but extremely important for arriving at a tight page layout.

#1 and #2

The first challenge was determining the size of the photo in relation to the size of the map. Some customers submitted long copy and others short copy. Clearly #1’s photo and map were too small based on the copy that was submitted. Here experimented with making the map do a little more work by not spelling out the city and state within the copy. #2’s photo was much too large and the map seemed arbitrarily placed. There was also a huge gap between the imagery and the copy. It all feels too disconnected.

#3 and #4

I thought that I could just set the map at a constant height and the copy could be edited to fit. I attempted this in #3. The photo and the copy seemed to align perfectly. However the map felt like an afterthought. #4’s balance started to feel better. The copy was close to the map. The image size felt right in proportion to the map size.

The problem

Jason’s feedback, however, was that there was still too much whitespace (illustrated by the red oval above). It is true that some people have longer names, so some of that whitespace was necessary. However there must be a way to tighten up that area.

The solution

To shrink the whitespace I reduced the width of the customer bio block by about 100 pixels. I also faded the map background slightly into the customer’s name so that the whitespace felt shorter. Jason also had the great idea of treating the “city, state, country” like a newspaper article. That saved another line. For the final design we even cut out the website link and made the customer’s company name clickable.

Great results
Seeing the Customer Wall come to life has been a blast. It is a great reminder that people all over the world — from our hometown Chicago to Beijing, China to Manchester, UK to Commerce Township, Michigan — depend on our products.

I’ll be adding new customers each week. We’d love to have you on our customer wall! Send us your name, title, company, location, a brief description about what you do, and a list of 37signals products you use — along with a photo — to [email protected] with the subject “Customer Wall.”

©2010 Google, Map data ©2010 Google, Tele Atlas