How We Increased Landing Page Conversion by 16%: Lessons Learned from Redesigning the Buffer Home Page 

186 Flares Filament.io Made with Flare More Info'> 186 Flares ×

drawing boardA few weeks ago I had the opportunity to design a totally new landing page for Buffer. I had the green light to get creative and to try something new, even if that meant throwing everything away and starting from scratch.

So that’s exactly what I did.

The Experiment

This experiment, for me, was all about learning. Learning what people care about, learning what imagery tells a story, learning about how visitors examine a landing page, and learning how they decide whether or not to sign up. I had the mindset that I could totally fail — that this new landing page might suck and people wouldn’t respond.

But that didn’t really matter — this was about setting a base line, defining a style for Buffer that felt good and matched the brand; a design language that I could begin to translate across all areas of the product.

It was about connecting with users in order to get a better understanding of their needs and their desires, and knowing what features are best suited to make their lives easier.

Process & Constraints

Just for a frame of reference, here’s what the old Buffer landing page looked like:

Old Buffer homepage

I actually like this view. It’s what I saw when I first signed up for Buffer almost a year ago. It does a good job of explaining what the product is, outlines a couple of key features and shows off a few exceptional user testimonials from Twitter. None of these sections, by themselves, are “bad.” But when you put it all together, it felt a bit bloated. Lots of text, lots of images — lots of places for a user to get distracted and click away. That’s no good.

The Headline

So I took a fresh look at the landing page from the standpoint of a new user — what was the most important thing I needed to know? In my mind, it was the value proposition of what Buffer is truly about — saving me (and my business) time, energy and money with social media marketing.

I came up with a little headline and stuck with it for the experiment:

A better way to share on social media.

Buffer shares your content at the best possible times throughout the day so that your followers and fans see your updates more often.

I haven’t had a chance to optimize this headline, but it feels good for now and seems to be working. I wanted something clear and precise, something that could be understood in 5 seconds and tell a first-time reader what this product is all about.

Sign-up/Login Flow

Next I started to rethink the actual log in/sign-up flow. Here’s the old style, aligned to the right side of the page:

old Buffer login
And here’s the new version, centered nicely underneath the headline:

new Buffer login

I knew beforehand that Twitter and Facebook were the two biggest sources of conversions. I later learned that they are actually the largest by a substantial amount — 82.69% of Buffer users sign up with their Twitter or Facebook account.

With this in mind, I wanted to really make these options nice and clear. One constraint I came up against was that many users do sign in with LinkedIn and email, so I knew it wasn’t possible to eliminate those options.

I decided to deemphasize the LinkedIn and email options, both in color and size. They’re still there, but our goal is to really encourage sign ins with Facebook and Twitter.

Imagery

The last key element of the new landing page was a central image to illustrate what it is that Buffer actually does. This was quite the challenge. I really liked what Stripe has done with this idea of a cloud, working for you behind the scenes:

Stripe

In my head this idea translated well to Buffer — you give us your social media updates, sit back, and relax. We’ll do all the heavy lifting behind the scenes, out of sight and out of mind. We handle the tedious bits so that you can spend more time focusing on what’s really important — reaching your fans and growing your online presence.

Here’s what I put together:

new Buffer marketing image

I’m not a Photoshop ninja, by any means, but I managed to scratch together my own interpretation of this cloud in the sky doing all the work, turning those tweets and statuses into likes and comments while you sleep (or do other fancy things).

I will continue exploring this imagery, trying new ways to illustrate clearly what Buffer does, why it’s worth using and what value it can provide to people involved in social media.


Results

Having explored the headline/value proposition, sign-up/login flow and the main imagery, I arrived at the current version of the landing page:

updated Buffer homepage

It’s probably not perfect, but it’s a start, and it has set the ball in motion that will help our team to continue experimenting and optimizing. Over time we will come to understand what has the most impact on user conversions.

While I feel like the new landing page is certainly cleaner and to the point, it would all be for nothing if it didn’t return results for Buffer’s bottom line.

Here’s what we tracked during a 24-hour period last week, sending 50% of visitors to the new landing page and 50% of visitors to the old:

Old Landing Page:

  • 14,556 Unique Visits
  • 762 new sign ups
  • 5.23% conversion rate

New Landing Page:

  • 16,437 pageviews
  • 994 new sign ups
  • 6.05% conversion rate

Overall:

  • ~16% increase in overall new user conversion

Note: The conversion rate accounts for unique visitors, and strips out views from robots and internal views.

People using the Chrome web browser also converted much better than those using Safari, with Firefox users somewhere in between. We saw the largest increase in conversions for Firefox users, with a 30% better conversion rate on the new landing page.

Key Takeaways:

It was a huge relief for me to see that the new page did in fact convert new user sign ups better than before. I’ll take a 16% increase any day.

It’s also important to notice that existing users who saw the new landing page didn’t have any trouble finding the new sign-in options. This is always something to look out for when redesigning a page that users are familiar with. So far we haven’t heard feedback from existing users that are expressing confusion over the changes.


What’s Next

When I first started redesigning the landing page, I knew that there was a good chance I could fail miserably. Users have had a long time to get used to the existing landing page, and I didn’t want to introduce a confusing new alternative that left people stranded.

Seeing the 16% increase in new user conversions has been a wonderful result of this first experiment — but it’s just that: the first experiment. I’m not finished, and our team is already working on ways to improve our sign-in flow, activation rate and upgrade rate.

One major issue that I’d like to address in the future is that, on smaller screen sizes, the sign-up buttons can sometimes end up below the fold. I wonder if we can improve our conversions by moving the buttons above the fold to remove an extra step (scrolling) from the registration process.

I’m also going to experiment with outlining a few key Buffer features below the sign-in options. Multiple accounts, team member managers, custom scheduling and analytics are all powerful tools for Buffer users. I’m interested to see if putting those on the landing page will help to convey the value of Buffer more than before.

Closing

I’m having a blast working on Buffer — we’re growing fast and engaging with thousands of happy users every day. I’m fortunate to work with a company that encourages experimentation, moving fast and trying new ideas.

If working at Buffer sounds fun to you, we’re hiring! Check out our job listings.

If you enjoyed this article, you might also like “5 things that seem essential that we launched Buffer without” and “Idea to paying customers in 7 weeks: how we did it

If you liked this article, you should follow me on Twitter — I tweet about design, web development and startups.

Photocredit: Slim Teller

  • http://www.snipe.net snipe

    My only concern here is that it seems like you made all of these changes at once, yes? A good A/B test will change just one element at a time, otherwise it becomes difficult to track down which change is really responsible for the bump in conversions, and in fact if any of the changes are hurting your conversions while the others are helping.

    • LeoWid

      Great point! I think you’re spot on that that’s the right way to A/B testing. With this particular example, we wanted to simply move to a new “base” landing page and do the “one variable changes at a time” from then onwards, if that makes sense.

      • Brian Lovin

        Yep, Leo said it quite well – we wanted to get a new ‘base’ to start building on. This process has already started and we’re working on more experiments weekly :)

  • Chris Marabate

    As far as Sign up/Login flow I personally will only sign up using my Google account. If that is not an option I always do the full sign up process using my Gmail address. But that is just me.

    • Brian Lovin

      That’s a great point Chris, thanks for bringing it up. We’re actually beginning to lean heavily towards logging in with Twitter and Facebook, but having those extras (especially logging in with an email account – that’s what I use, too) is key!

  • http://talkkindnesstome.com/ Jane

    Well this explains the questions I had about the landing page. I am one of those crazies that logs in with email. I prefer not to tether my accesses to other applications to Facebook or Twitter. I had to hunt, but I found my preferred method so thank you for not jerking it off the page. I like it the way it is now. I can find it. and hmmmm now I get the photoshopped image. Thank you for explaining. buffer is actually serviceable but I think I use it more because it’s fun than anything else. I love getting the alerts – sort of like my own personal happygram. “Oh no! Can it be that your buffer is now starved? Better go fill it up again.” Well, that’s not really what is says – but I like it.

    • Brian Lovin

      Thanks for the comment Jane! We’re still working on new experiments weekly, and one of the key things I keep in mind is making sure that existing users can still quickly sign-in with their preferred method. I hope the experience has been good for you!

  • cpinto

    Try a different headline, like “easily keep your audience engaged” with a subhead that explains how buffer figures out the best times to post something to social media. Hope you get the drift. Great design BTW.

    • Brian Lovin

      Thanks for the comment – we’re actually testing out some different copy as of this moment!

  • http://www.bucketlistly.com/ Pete R.

    Nice changes guys! Although the imbalance of the the division of the cloud bugs me a little but that’s minor for you’ve accomplished. :)

    • Brian Lovin

      Thanks Pete!

  • Tom Loredo

    I just discovered Buffer today, via a link to your blog, so I can give you a new visitor’s perspective.

    I think the landing page design is terrible.

    It exhibits one of the most common problems I see in landing pages: It assumes the visitor knows what the site or app is about or does, and makes it hard for someone who ended up there, curious about what’s there, to actually find out about the product or service.

    In my browser, pretty much all I see when I open bufferapp.com is a lot of empty green space, and the text: “Share awesome content on Social Media at the best time.” Not knowing what Buffer does, I didn’t know what to make of that. My first reading of it was as an admonition, rather than a description. The descriptive interpretation eventually made sense, but only after I found the About page; and about that….

    Okay, I liked the blog posts, so I was motivated to find out more about Buffer app. But where do I go to get clarification? The only links visible are to the business version, to login, or to sign up via Twitter. A new visitor surely wants to know what Buffer is or has to offer before pursuing any of these options.

    Okay, I found the “About” link—after scrolling to find it at it’s location below the bottom of my full-height browser window on a 23″ monitor. Really?! I see this all the time in bad landing page designs—a new visitor who wants to find out what a site has to offer really has to work just to locate the “About” link (usually in very small type at the very bottom of the landing page, typically out of view on landing).

    The blog post that led me to bufferapp.com was the one about benefits vs. features. I totally buy the argument there (well-written, well-argued), and I can see how it influenced the slogan on the landing page. But even primed by that post, I didn’t get the message of your landing page. And after reading the About page, I feel like the landing message is misleading: “at the best time” suggests the app does some kind of optimization, smartly scheduling posts somehow (perhaps via activity monitoring), when as far as I can tell from the About page, it’s the user that determines the posting schedule.

    I don’t know who the audience for the landing page is. If I already know about buffer, it doesn’t offer me anything except the login (well, maybe that’s enough). If I don’t know about it, it makes me work too hard to find out. I think the people whose feedback you need on this are people who are coming to bufferapp.com for the first time. My reaction may be atypical, but you won’t know until you get significant input from new visitors.

    • http://www.johnrmeese.com/p/about-me.html John R. Meese

      I think @tomloredo:disqus makes a good point. Perhaps a hyperlinked “Curious? Read more!” or more obvious “About” link would be a good idea.

    • Brian Lovin

      Tom – what a great comment, thanks for taking the time to talk about your experience as a first time visitor. This same feedback has come through a few times before, too, and it’s something I’ll be exploring in future iterations.

      I think it’s actually quite amazing that a one-line landing page is still converting so well for us. My hope is that as we continue to improve here, adding more descriptions, screenshots, etc., that we’ll continue seeing great results. Good point about the ‘about’ link too, I think we’ll find something creative to do here so that we keep the page looking super clean, but can still provide that information we don’t currently show.

  • Tom Loredo

    To follow up on the benefits vs. features theme: I’m not yet a heavy user of social media, and the main thing that keeps me from investing in it is concern about opening multiple new channels needing my attention, reducing my focus on creative work. The potential benefit I see from Buffer is not the ability to “share awesome content” (another misleading element to the slogan—it suggests it will help you make content awesome), but rather the ability or freedom to maintain my focus. I don’t have a snappy slogan communicating this, but something about helping me to effectively use social media without becoming enslaved by it is the real potential selling point, at least for me.

    BTW, these two posts may be critical-sounding, but I’m very impressed with the blog and I’m offering these comments in a constructive spirit!

    • Brian Lovin

      I love this comment too Tom! We did a lot of user surveying and found that ‘saving time’ and ‘letting me focus more on work’ are actually two really key reasons that people love Buffer. I’ll be sure to continue expanding upon these benefits :)

  • http://www.johnrmeese.com/p/about-me.html John R. Meese

    Love the new landing page design. When I first saw it while logging in, I was impressed! Now that I know the story behind it, even more so.

    • Brian Lovin

      Thanks for the comment John! More landing pages – and blog posts – to come!

  • aajhiggs

    Very cool to read this Brian. I remember when you were just starting on this (I think you’d only got about half a day of stats then though!) and it’s really interesting to see how it’s fared over a period. The decision to clean break with the old design really interested me, and the conversations going on at the time made a significant impression on the way I now think about why sometimes A/B tests are important, and why sometimes – in context – they aren’t so much. It’d be great to hear how your incremental changes work out in the future :)

    • Brian Lovin

      Definitely, thanks for your comment! We’ve actually run a few incremental experiments and haven’t reached any groundbreaking conclusions, but we’re still testing weekly and I’m keeping track of changes/improvements for future blog posts.

  • James

    So, I was curious to see how the new landing page looks in the browser, and I found what @tomloredo:disqus was talking about:

    Top-to-bottom, the attached image is what the page looks like to me in Chrome (33), Firefox (26), and Safari (7.0.1) respectively. Also, fwiw, I’m using Mavericks 10.9.1.

    I tried re-loading each one multiple times, cleared caches, and tried each browser’s “incognito” mode. I don’t know if it’s a server thing, a cookies thing, or a caches thing, but something is keeping some of us in a ghost-world between the old page and the new one.

    Just thought you’d like to know :)

    Otherwise, thanks for the insight into the process!

    • Tom Loredo

      To me, what makes this particularly annoying is that it appears to be a deliberate design choice, in that if I resize my browser window, the layout always changes so the stuff I want to see as a first-time visitor (and perhaps as a returning visitor) is moved just off the bottom of the screen. So if I want to see what I most need to see, I have to scroll.

    • Tom Loredo

      Just to echo what @disqus_ApPrMZOuSq:disqus mentioned—I’m browsing on a Mac, too, and see the same landing page (very different from what’s in this blog post) in multiple browsers. I’m on 10.8.5 (Mountain Lion).

    • Brian Lovin

      @disqus_ApPrMZOuSq:disqus and @tomloredo:disqus – ah, I knew this would come up :) So the blog post was originally written a while ago here: https://medium.com/design-ux/57326c531547

      The reason you’re seeing those new landing pages is that we were running a 4-way split test all last week. Those screenshots are of two of the four landing pages.

      Sorry for any confusion there!

      (Just a side note – the screenshots in the blog post, our “control page,” is still performing the best)

  • Bill Franklin

    Man, I love Buffer. Great post! :)

    • Brian Lovin

      Thanks Bill!

  • http://www.cre8d-design.com/ Rachel Cunliffe

    Enjoying reading your feedback to the comments Brian and the transparency in your blog post.

    I often wonder – when testing conversions – is how much any increase in conversions is simply due to things being *changed*.

    Malcolm Gladwell talks about in his new book David v Goliath how people perform better on an IQ test which is written in a hard-to-read font. Their eyes strain and therefore take a little longer to read it and think about the question rather than going with the answer which is incorrect but appears the right one.

    Now of course we don’t want to do make things harder to read on a website – but I wonder if moving things around makes people spend a bit longer on the page if they’re a repeat visitor – notice things they haven’t noticed before.

    A small side point: is there any reason why “social media” is capitalized on the new landing page? If not, I’d remove it – it looks odd to me.

    Best wishes,
    Rachel

    • Brian Lovin

      Rachel – really great points.

      So for the conversion rates on this particular experiment, we were looking at new visitors only – people who hadn’t seen the Buffer landing page before. There might always be issues there with cookies or improper tracking, but for the most part this experiment returned fairly valid results.

      But you do raise a good question – does change, for change’s sake, make people spend a bit more time reading/analyzing/scrolling, thus increasing (or maybe even decreasing) conversions? I’ll continue to explore this in future iterations.

      For the capitalization – we’re exploring a few different things right now with the headlines to see what works, this is just part of an ongoing test :)

  • Ryan Roberts
    • Brian Lovin

      Wow – I’d never seen that before. My cloud looks “weird” all of a sudden :P

  • http://www.vinoblog.eu/ Ilia Markov

    Great work with the redesign of the landing page and the write up! I’ve been working on an important redesign lately and I think I know what the challenges are when you embark on something like this. It gets stressful :)

    I think you can’t overstate the importance of testing when you do something like this, so it’s great that your metrics are showing such remarkable improvement! Really happy for you guys! :)

    Along the lines of this, I was wondering what solution are you using for the A/B test. Is it something like Optimizely, Google Analytics Experiment or an in-house solution? Sorry, if this has already been clarified in the comments, I tried to glance over quickly, but couldn’t find anything on the subject.

    • Brian Lovin

      @gospodin_i:disqus – we actually use an in-house solution right now that lets us quickly create new A/B experiments and track the performance in our own little “experiments dashboard.”

      Thanks for your kind words in the reply though – there’s definitely so much to consider when redesigning a landing page, and as you say – you can’t overstate the importance of testing!

      More posts and updates to come :)

  • http://www.freephotoresources.com/ Barry Chignell

    Great article and nice to see some transparency being shared, great stuff. I think other online businesses could benefit from allowing more visibility into their internal processes (where practical), I will be doing just that for our business over the coming weeks, thanks for the read and inspiration! :)

    • Brian Lovin

      Thanks for the reply Barry – glad to hear that this has inspired more transparency somewhere else in the world!

  • http://www.bettergraph.com/ Anoop Srivastava

    Brain, Good post on landing page optimization. Social login increase your conversion rate also attract other who are added in your social account.

  • samantha

    I agree with Snipe- you want to slowly make the changes to the testing to see what results had what impact. Check out our case studies section for more results, testing, and samples convertify.io/case-studies/ i think you will find from a lot of our testing you want to slowly increase changes maybe daily for a week. Thats what we do and we are able to see the change per test on what works and what doesn’t. This will also impress your clients more and have more follow through! Just a suggestion :)

  • Eric Bloom

    Brian, great post. I really appreciate your insight.

    My B2C company is currently working on improving our landing page conversion rate and I had a question for you.

    What benchmark data do you use for landing page conversion rates? I am trying to gather as much information as possible, so I am curious to what you would consider a bad / good / great conversion rate?

    • Brian Lovin

      Hey Eric, thanks for the comment! I think benchmarks might be quite different for different types of products or services. For us, we just looked at historical numbers and tried to improve from there :)