I want to share with you the process that we used to develop the Flash animation that appears on Backpack homepage. The Flash animation itself isn’t a technical or design feat. There are many more examples of that online. It is how we got there that I find pretty cool.

First steps

We had previously launched 3 successful redesigns for the Basecamp, Highrise, and Campfire marketing sites. It made sense for us to approach Backpack in a similar way. Following that system: the main feature is comprised of a headline stating the big idea and to the right an image of a page within the app.

Backpack homepage 1

The page view I initially chose to feature was the Backpack Newsroom (above). The Newsroom shows all sorts of activity within Backpack. One glance shows that Backpack can be used by a group of people to share information throughout the company. The Newsroom is also a beautifully designed screen.

Jason, Ryan, and I discussed the design. What would the Newsroom screen communicate to someone who has never heard of Backpack before? It turns out not a whole lot. Is Backpack the Newsroom? How is this going to help a business organize clutter? The Newsroom screen is pretty, but ultimately we all agreed that Backpack was about Pages.

Focus on Pages

I initially struggled with the idea of putting a Backpack Page in the feature area. You can fill a Page with all sorts of content. How could I create a single Page that would resonate with Design firms, Lawyers, Non-Profits, Retailers, etc.?

Backpack homepage 2

I mocked up design that featured Pages more prominently (above). Jason, Ryan, and I agreed that the design as a sales pitch was pretty underwhelming. As we were talking out loud one someone said, “What if it was a slideshow of different pages?”

What a perfect idea! We can show all sorts of different pages in an elegant slideshow. I created a few different Backpack screens depicting different Page scenarios. Sam whipped up a great slideshow script in no time. I dropped in the screens and voila: a slideshow of Backpack pages.

It’s about creating Pages

There was a problem with the slideshow. It looked great, but we were still depending on the viewer to make that mental leap. Backpack is Pages. OK is it Geocities? What is it? It still wasn’t completely clear what Backpack could do to help organize a business.

Ryan asked, “Wouldn’t it be cool if we could show a page being built using the slideshow?” I thought about using Sam’s slideshow script to fake a page being built. That would require a lot of PNGs. The animation would be a slow dissolve between frames too.

I said sheepishly, “I could try doing it in Flash. Do you care if we use Flash on the site?” I was surprised when Jason said, “No.” If that was the quickest way to communicate best what Backpack could do then yes, we’d use Flash.

As you probably know if you’ve worked with Flash you need to storyboard first. I also wasn’t completely sure if Jason would like this animated approach. The storyboard was created in Photoshop. If Jason liked the animation then I could use those assets in Flash. I exported the entire sequence as an animated GIF and threw it in a browser for review (sample below).

Backpack homepage storyboard

This animated GIF storyboarding turned out to be invaluable. We were able to get a feel for how the information was presented while also generating assets for use in the final Flash animation. Jason was able to make content changes before I went into Flash production.

The total development process from that first initial Newsroom design to the final Flash animation took about 2 days. That was pretty quick when compared to previous experience.

Backpack homepage in Flash

It is funny looking back on suggesting Flash for the Backpack homepage. I was a bit embarrassed. Flash is such a dirty word especially when it comes to the audience reading this blog. I shouldn’t have been surprised though. 37signals is all about simple solutions. A Flash animation was the simplest way to communicate the usefulness of Backpack Pages.