Since starting CarWoo!, we’ve done 6 major iterations of our “brochure” pages–the ones that a user can browse through to learn more about our product before signing up for an account. Our latest iteration was more of a “refresh” than a “redesign”–an attempt to clean up and polish the interface rather than introduce a new interaction model. In other words, we rewrote a significant amount of copy, evolved the visual design (rather than a dramatic change), and updated most of the graphics to reflect the current (much-improved) state of the application inside the pay-wall, but didn’t really move things around on the page all that much.

With the new design, our conversion rate increased 25% over the previous increase we saw with our last redesign.

 

 

 

It’s impossible to pinpoint where the increase in conversions is coming from since many variables changed, but my gut feeling is that it’s a combination of the improved copy (clearer explanations of how CarWoo! works and the benefits of using it) and the cleaner, more cross-browser compatible design.

How We Changed Our Copy To Increase Conversions

1) We cut down on the number of words used by a factor of 10

On our previous “How It Works” page we had over 1,000 words and a crappy video. In the latest version, there are only 125 words and 4 enhanced screenshots. The magnifying-glass effect on the screenshots helps focus the visitor’s attention on an important aspect of the screenshot so they better understand what they’re looking at and also looks pretty neat.

2) We wrote more about benefits and less about features

You’ve almost certainly heard this already as general advice. What we did specifically was introduce an entire page dedicated to the benefits of using the product titled “Top 6 Reasons People Use CarWoo!” It includes six benefits, each with an approximately 20-25 word explanation of the benefit.

Furthermore, we tried to write the headlines in other sections of the brochure from a benefits perspective instead of a features perspective. It’s surprisingly hard to do, especially for the analytical-minded engineers among us. I think it’s because it’s simply easier to write about features–they’re straightforward, logical, and we built them so we understand how they work and how to describe them. Benefits, on the other hand, are all about emotion. To write them you have to empathize with your site’s visitors, which isn’t easy. If you’re in the business of writing software and you haven’t already seen this presentation by Patrick McKenzie, I highly recommend watching it to better understand the relationship between software and your emotional end-users.

How We Improved Our Interaction and Visual Design To Increase Conversions

1) We made it easy to sign up on any page of the brochure

Rather than try to funnel everyone through a signup form on the home page, we tried to make it easier for people who want to browse through the brochure to sign up by having an obvious sign-up button on every single one of those pages, because you never know when a user is going to be ready to pull the trigger. Further, we actually made it easy to browse through the brochure in a logical way by building  a paginator at the bottom of each page that recommends which page to read next (and ultimately prompts you to sign up).

2) We made the visual design look a lot better in Internet Explorer

In the old version, we had a vertical blue gradient as the background on all the brochure pages. I had implemented it using CSS3 as opposed to a tiled image with a fallback to a flat color on browsers that didn’t support it (i.e. IE). It was a compromise we were willing to live with at the time, but in reality the pages looked pretty bad in IE because the colors blended together and got washed out on most Windows users’ monitors. That made it really hard to distinguish the signup form from the rest of the page. Rather than keeping that gradient around and writing IE-specific styles to make certain elements more obvious, we decided to just scrap the gradient and have a white background, which works nicely across all browsers right out of the box. Any special effects in the new design (like the streaking in the blue billboard) is a tiled image that also works seamlessly across all browsers.

Why We Got Rid Of Our Professionally-produced Testimonials

We used to have 3 professionally-filmed and edited testimonials in the brochure. They had great lighting, great sound quality, and a cool soundtrack. The testimonials themselves were real (i.e. real CarWoo! users were speaking unscripted), but I think the professionalism of the editing actually worked against us and made the videos seem, at best, cheesy, and at worst, fake. In an attempt to make the testimonials more authentic, we recently started soliciting testimonials using a service called VideoGenie. It lets users record a testimonial using their webcam. The video quality pales in comparison to the ones we had before, but they really do seem a lot more authentic (and for a startup, they are a lot more cost-effective). Check them out on our Testimonials page for an example.

Analyze Your Brochure Holistically

All the changes we implemented work together to provide a better experience for our visitors. I say that not because I can’t pinpoint which changes actually made a difference, but because we look at the brochure and conversions to signup from the brochure as a whole rather than from a single page.

Remember that users have many different browsing patterns. Some sign up straight from the home page without looking at anything else, others read every single word on every brochure page before signing up and most people fall somewhere in between. The way we designed the brochure and our refresh strategy was useful to all those people–a rising tide lifts all boats.

When you think about from a holistic perspective, it may change your approach to brochure design. You don’t necessarily have to put the hard sell up-front. It might work better to give users a chance to explore the brochure and get comfortable with your site and your product first, to let them make the decision to sign up when they’re ready, rather than forcing everyone down one path. Just make sure that whichever path a user takes, it’s easy for them to sign up. Naturally, YMMV.

Lessons Learned

1) Don’t forget common sense: cut down on word count, benefits before features, polish your visual design and make it cross-browser compatible

2) Make it easy to sign up from any part of your brochure, not just the home page or the header

3) Try VideoGenie to experiment with more authentic user testimonials

4) Analyze conversion rates from your brochure holistically

Credits

Once again, our amazing designer, Andrew Conn, put in all the hard work of mocking up the pages in Photoshop and I faithfully implemented them. If you’ve got any feedback, we’d love to hear it.

By the way, we’re giving away a new car.

Enter here.