Featured Image - Basecamp

Deconstructing Basecamp’s Homepage – Do Cartoons Convert?

This week in our teardown series, we’re taking a look at Basecamp.com

Basecamp is one of the world’s most popular project-management apps. And, Basecamp’s Jason Fried and David Heinemeier Hansson approach to building their company has been an inspiration for many entrepreneurs, including us at Transpose.

Basecamp’s homepage is unconventional, so we were eager to dig in. First, we’ll share our analysis. Then, we’ll provide results from our user-testing review.

Basecamp Homepage - Click to Expand
Basecamp Homepage – Click to Expand

Our Analysis

Our analysis is based on four different criteria that typically impact conversion rates:

  1. Is the design clean and organized?
  2. Is the language clear and free of confusing marketing buzzwords?
  3. Does the site require users to dig through multiple pages to find the information they need?
  4. Is it clear what to do next?

Let’s take a look at Basecamp.com.

 

1. Is the design clean and organized?

The first thing you notice when visiting Basecamp.com is the white space. This is a good thing. The homepage doesn’t overwhelm the user with too much information, graphics, or other distractions.

The organization of the page is unique. Basecamp uses more text and paragraphs than most websites. I like it. The page provides plenty of real estate to read through what Basecamp is and how it can help.

Overall, the site looks professional, creative and gives the user confidence in Basecamp.

 

2. Is the language clear and free of confusing marketing buzzwords?

This is a mixed bag.

Basecamp does a great job of keeping the language simple throughout its homepage.

Visually, the hand-drawn illustrations are a nice touch. They’re different than the usual graphics, and they create a welcoming feeling. But, they also don’t give the user an immediate, clear idea of what Basecamp does. They’re more of a clue than an explanation.

Moving on, the homepage headline doesn’t specifically state what the product does. It does help to know that so many companies use Basecamp to work on different projects – but how do they use it? What does it do? However, calling out that 350,000 companies use Basecamp will naturally make the visitor curious to see why so many people are using the product.

The call-to-action to register for a free trial is straightforward and clear. It’s very nice.

Once we get into the paragraph “What’s Basecamp,” the site starts to come alive. Now, we’re into concrete examples such as “it’s a place to share files, have discussions …” Now, the visitor knows what Basecamp is.

The rest of the page is well done, with specific examples and information around case studies, working with IT, support and training.

3. Does the site require the users dig through multiple pages to find the information they need?

Basecamp keeps everything simple. They’ve stayed away from building sub-pages around “solutions for IT managers” or “solutions for agencies.” Because of that, the user can quickly navigate through the site to get the information they need.

In this regard, I don’t know that Basecamp has done anything magical with their content strategy, other than keeping things simple. (Yet, this is remarkable in itself.)

4. Is it clear what to do next? 

Basecamp makes it very clear that the next step is to sign up for a 2-month free trial. They do a nice job in giving the user multiple signup buttons throughout their homepage. Again, they’ve done well at keeping things simple.

The only possible critique is that it isn’t obvious on how users can submit questions or get support. For example, if a user had a question about billing. There is an “email us” link at the bottom of the page, but it’s not obvious. Most visitors would look for a “contact” page.

 

User Testing

Next, we worked with UsersThink.com to have 6 independent people review Basecamp.com and share their thoughts.

Surprisingly, the results varied. In particular, the use of hand-drawn illustrations was very controversial.

We’ve shared some of the key patterns and feedback below. (You can also download the full report. It’s worth it – there are some very insights comments in the full doc.)

  1. What’s your first impression of this page?
    1. Very clean, modern design. I like the large amount of clear information and general page balance and composition.
    2. My first impression was that I liked the cartoons; they’re a little cheesy, and what they’re actually saying isn’t particularly insightful or original, but it gives me a good feeling about the design over.
    3. At first glance, this page looks like spam. There are no gripping images to call my attention, and the main image is poorly drawn, not colorful, and uninteresting. The header is wordy, and my eye isn’t drawn to any one word.
    4. Looks very childish for a professional webpage. The illustrations look unprofessional, and unfinished.
    5. I thought it might be a comic page. The picture at the top of the page made it look like a joke or cartoon website.
  2. What didn’t you like about this page? Why?
    1. There’s not much wrong, but one thing is that the images about halfway down the page don’t expand when clicked.
    2. I felt like the general feel of the website and the company in question was a bit unprofessional … I felt like it was a bit too cutesy for me. I am still unsure what this website does.
    3. The screenshots further down the page seem pointless. They’re too small for me to be able to tell what’s going on in them and they don’t offer much in the way of getting an idea of how things work.
    4. I don’t like anything about the page, to be honest. It follows a generic style of long continuous content like most marketing sites these days use. Whenever I see a site like that (or this) I instantly assume someone is trying to sell me something, and that means it comes across as nothing but a huge ad to me. On top of that, I don’t like that there aren’t any interesting images or content above the page break.
    5. I don’t like the illustrations, makes me feel I am reading a comic. I do not like the iPhone, tablet, images it confuses me as a reader and prospect user.
  3. If you could only change one thing about this page, what would you change? Why?
    1. The images not expanding is the only thing. A small tweak and I’d be able to see the app’s UX at full res without leaving the landing page.
    2. I would change the art to something a bit more polished … I want artwork that I don’t have to stare at long to figure out the general idea of this business.
    3. I would make it so that I could enlarge the screenshots, or I would remove them altogether.
    4. If I could change only one thing about this page I would change the image at the top. It looks highly unprofessional, and isn’t interesting. It’s wordy, it hardly tells me anything about the page, and it’s a boring art style.
    5. Remove all the illustrations, and replace it with something more modern and professional. Remove the iPhone and tablet images.
  4. What did you like most about this page? Why?
    1. Aside from the general design, I really like the juxtaposition of the analog-looking comics. Often people have very poor, outsourced clip art when they use cartoons for corporate websites, but these seem to be made by a good cartoonist with experience.
    2. I like how they had hypothetical scenarios underneath the art. This gives businesses a good idea why this basecamp business would be the right fit for them. I like how there is a dialogue between the business and the customer. This seems welcoming and helpful.
    3. I love the blue buttons, the font and size. They are wonderful additions to the page. I love the logo.
    4. It was pretty self explanatory what the service offers. I didn’t have to click on multiple links and search the website for basic information on the service.
  5. Would you recommend this page to a friend if the content was relevant to them? Why or why not?
    1. I would. The site design itself is ultimately very inviting, clear and functional.
    2. I would recommend this page to a friend who needed the services that basecamp provides. The site seems overall polished and trustworthy. It also seems like many important big name organizations have worked with basecamp, which makes them seem very competent and experienced.
    3. It’s ease of use makes it one that could be highly recommended as it wouldn’t annoy yourself or anyone you’d want to send it to … it seems to have a somewhat professional and/or legitimized feel to it in the way that it’s designed and how it displays itself, so yes, I would recommend it.
    4. I wouldn’t recommend this page to anyone, because I probably wouldn’t have stayed on the page. I didn’t know what the page was about until I made sure I forced myself to read the content … I very much dislike the way it looks
    5. I would not recommend this site, because it looks unprofessional, and childish.
    6. I would recommend the site just because I don’t know of any other services like this. It appears from the website that this company is very popular and used by many big businesses

 

Summary

Basecamp’s site is unique, and my impression is they know it won’t necessarily appeal to everyone. But, those people that “get” Basecamp will immediately feel at home.

What’s working

Our review, along with the user testing, agrees that the page is well laid out with good spacing, fonts and white space. The page is very welcoming.

In terms of optimizing for conversions, Basecamp does a great job in providing example use cases and also customer testimonials from well-known brands. The free trial buttons pop from the page and are very clear.

What should change

Basecamp should make their screenshots larger or clickable to expand. The feedback is consistent that this area of the page is unusable.

What’s up for debate

The use of hand-drawn graphics is a mixed bag. Does the tradeoff of the comics being cute and appealing to some people outweigh the cost of them confusing other visitors?

The headline and opening text should be re-considered. For visitors that are unfamiliar with Basecamp, the text does not provide a clear, straightforward description. Visitors may become frustrated and bounce from the site.

 

What are your thoughts?

What do you think of the hand-drawn illustrations and opening headline? Please, share your thoughts in the comments.

 

 

 

The following two tabs change content below.

Adam Steinberg

Adam is a co-founder of Transpose