Last week we launched Haystack, a new way for clients and web designers to find each other. We designed early concepts for Haystack this past spring/summer. I thought you’d be interested to see some of the designs that we didn’t use, but helped get us to the final launch.

The Webdev Pages
Initially the idea was to base Haystack on the Yellow Pages. Designers, Programmers, and Agencies could create a free text-only listing. There would be multiple tiers of ad space that would sit prominently above those free listings. The consensus: Too broad: let’s focus on Web Designers. Not visual enough.

Haystack v01
See a full-sized version

Company Cards
The design started to gel once we decided to focus on Web Designers. We created the company card. A quick glance gives you an idea about the designer’s work, location, and typical budget range. The company cards in a grid looked great, but all the cards were the same. We needed a way to differentiate Pro accounts from Free accounts.

Haystack v02
See a full-sized version

The Black Card
We knew that the Haystack directory had to be randomly sorted. Otherwise Haystack would give unfair advantage to designers whose name started with an “A” or early-adopters that signed up on the first day. Here we see Pro accounts (the black cards) randomly interspersed with Free accounts on the grid. In the end, we decided to revisit the original concept where Pro accounts were displayed above Free accounts.

Haystack v03
See a full-sized version

Company perma page
The first company perma page was structured more like a fact sheet and less of a portfolio page. Remember: the original idea was to support both Programmers and Web Designers. Note the “capabilities” area on the right side. This was a nice idea, but we thought it might add too much complexity for launch.


See a full-sized version

Account edit screen
Here’s a first pass at an Account screen. There are a few interesting ideas here: some rough page analytics at the top and a la carte upgrades. Instead of a la carte upgrades we decided to go with a 2-tier model: Free and Pro.


See a full-sized version

Haystack sign up
We were toying with the idea of making one massive sign up screen where you’d enter all the information about your company. After you submitted the form you could choose to upgrade your listing (add a logo for $10, a portfolio gallery for $50, etc).


See a full-sized version

The Dashboard
The Dashboard was where you’d go after you created your account. Here you could add different “Premier” upgrades. Kind of like leveling up in a video game.


See a full-sized version

Upgrade your account
Here’s yet another take on the a la carte upgrades model. This is what you’d encounter after entering your basic company information.


See a full-sized version

Close to final Upgrade screen
In late Spring our company went on a retreat to Kohler, Wisconsin. There I had the opportunity to show off what I’d been doing with Haystack to my co-workers. Jason Fried, Ryan Singer, and I broke off into a little 30-minute brainstorm about Haystack upgrading. There we decided to ditch a la carte upgrades.

The sketch below is very similar to where we ended up today.


See a full-sized version

All the iterations in Basecamp
We kept all the designs in Basecamp so that we could see how Haystack evolved over time.

Thanks for reading. I hope this has been an interesting peek into our design process here at 37signals.