A few weeks ago we decided to take a stab at redesigning the Basecamp home page. We liked the current design, but we wanted to see if we could do better. Specifically we were interested in more visuals, less text, and a generally simpler and less dense presentation.
Started with a sketch
As we usually do, we start with a very low-fi sketch of the big idea behind the design. No details, no words. Just a very rough idea. In this case the idea was a series of scenarios all pointing back at the Basecamp logo. The original sketch, done in Draft and shared in Campfire:
From this sketch we ended up with something that looked like this:
We messed around with the words, subheads, and other copy. We tweaked a few small things, but while we loved the general concept we still felt like it wasn’t communicating clearly enough at first glance.
So we decided to replace the phrases with icons representing the major features/benefits of Basecamp.
After a few rounds of tweaks, we ended up with this:
After we were pretty happy with the top, we moved down the page and redesigned the rest. We can talk about those decisions in a future post.
Once the page was ready, we decided to run an A/B test against the current (now the old) design. The test wasn’t sophisticated – we just wanted to test clickthroughs to the sign-up page. That’s where most people land on their second hop, so we wanted to see if the new design took more people to that page. We didn’t test actual signup numbers – just clicks to the signup page. We know how the signup page converts (and continues to convert) and we didn’t change anything there.
The new design sent 14% more people to the signup page. We were thrilled with that performance. We recognize it’s not absolutely definitive (signups are more important than clicks to the sign up page), but it was enough evidence for us to put the new design into production.
Back to back
For reference, here was the old design:
And here’s the new design:
Here’s the new home page as it is today. Over the next few weeks we’ll be trying out some additional tweaks to the new design. There are a few things missing that we’d like to incorporate, and a few things we’d like to move around, but so far so good.