A few weeks ago we launched the new Backpack marketing site. This completes the redesigns of our four top product sites (Basecamp, Highrise, Backpack, and Campfire) as well as the 37signals site. More on the 37signals.com redesign in another post.

I wanted to share the thought process and some of the design decisions we made while redesigning the Backpack site. Even though the Backpack site feels part of the Basecamp, Highrise, and Campfire design family, it’s the most unique of the four.

Before

Old Backpack home page

This was the old Backpack marketing site. It had been this way for a couple of years. It served the product well, but not well enough. The main weakness was a lack of focus.

Backpack is a swiss army-like product. It actually does a lot of things. You can use it to take notes, create to-dos, share files, share photos, create pages, set SMS reminders, collaborate on mini projects, keep track of who’s working on what, and view and share calendars and schedules. While all of this has been a strength, how we attempted to explain it was a weakness.

The old home page tried to expose it all. We wanted to flash the world with Backpack’s entire body. So we talked about notes and lists and calendars and reminders and pages, etc. It all made for an unfocused message.

Starting over

So instead of just taking the old content and repurposing it in a new design, we tossed it all out and started over. We asked ourselves: What is Backpack really about? What’s the core? What does it do better than anything else it does? What would it miss the most if it was gone?

Backpack Pages

The answer was Pages. Backpack Pages are the core of Backpack. They are what’s really unique about Backpack. They are the magic canvas that brings everything else together. Pages get you organized, they get you collaborating, they get you discussing, and they get your shit together.

Everything in one place all the time

But Pages were an abstract concept. We understood it, but the basic description lacked context. It wasn’t enough to just show examples of pages either. We wanted to show why you’d use Backpack Pages to keep everything one place all the time. That was the key: Everything together in one place all the time.

Next we started thinking about how we could illustrate the idea of taking all this disparate information that people usually have in multiple formats and multiple places and putting it together on a Backpack Page so they’d have it in one place all the time.

This was roughly what we came up with. Something messy and chaotic on the left turning into something orderly on the right. The left was what people have today, and the right was what people could have if they used Backpack.

After a few rounds of back and forth with Jamie, he nailed it. Piles of stuff on the left (documents, maps, files, papers) turning into orderly organized Backpack pages on the right.

Backpack page examples

FLASH?!

To top off the new design, we wanted to illustrate how easy and fast it was to make a Backpack page. In the past we went through some screencast iterations, but they never felt interesting enough. This time we thought we’d explore something that felt more like a quick presentation than a video of a mouse moving around the screen just doing stuff.

We storyboarded the concept roughly and Jamie dusted off his copy of Flash and started to explore the concept. After a few rounds of back and forth, we were pretty happy with what we had. I don’t think it’s perfect, and I’d like to keep exploring this direction (and revisiting a video-based approach), but we consider the experience a success. We’re running with it for now. (You can watch the quick Flash presentation by visiting the home page).

After

After a few days of writing and rewriting every word on the page, and designing and redesigning the visual elements, we put everything together and launched the new home page.

Final home page

Sales up 25% since the redesign launched

We’re very happy with the new site. It’s a great addition to the design language found on the Basecamp, Highrise, and Campfire sites. It introduces some new elements and presents Backpack using before and after examples and narrative.

Sales in the 10 days following the redesign are up about 25% over sales in the 10 days preceding the redesign. More time will be needed to get a better feel for the long term results, but we’re very happy with how things are looking so far. We’ll be watching the numbers and A/B testing some language/button/layout variations down the road.

We hope this was helpful

We hope this look at the Backpack marketing site redesign was useful. The hardest thing was to really get to the core of what made Backpack special (Pages). Then we had to turn that into a message that made sense (Everything in one place all the time). Then we had to illustrate the benefits of keeping things together. It was a fun project.

BTW: Backpack just turned 4!

Backpack just turned 4 years old a couple of days ago. We launched Backpack on May 3, 2005 (Here’s the blog post that launched the product).