Ever wondered how an internet giant like Facebook does conversion optimization? Well, read on!
Last week I published a post about competitors analysis for conversion optimization in which I discussed looking to internet giants to see how they do it.
In this post be examining some of Facebook’s earliest landing pages and end by looking at their current versions. In this journey through time, we’ll examine the often overlooked interdependence between website, business, and technology.
Facebook:
December 13th, 2005. This was Facebook’s home page during its second year of business, at just about the time that it started branching out from college to high school students.
This landing page, while very basic, is actually a pretty impressive feat (keep in mind we must judge it to the standards of 2005). After all, it was so successful that it contributed to Facebook’s rapid rise to success. Check out what makes a great landing page.
Messaging
Key Feature: Exclusivity, access to students only, was but just one of Facebook’s features at this stage in the company’s rise. However, it dedicates the second two lines of text entirely to this feature. It’s an example of recognizing one of the most authoritative attributes and pushing it harder than any other.
Tip: Try chopping down the messaging on your page to just the most important stuff.
Highlights: Facebook lists three other highlights here: Look up people at your school, See how people know each other, and Find people in your classes and groups. This makes sense for Facebook’s landing page around the time of its inception; one initial goal for Facebook was to replace the school yearbook. I could see a hard copy version have the same highlights.
Social/Trust: For a social network, this page doesn’t do the best job at establishing credibility with users. The only quasi-trust icon I see is the text “A Mark Zuckerberg production” which, if users had actually heard of the renegade boy genius college dropout, would have indicated that they were in the right place.
Tip: Trust icons can come in many forms: What do you use? Find out more about trust and social proof.
Structure
Text/Images: Eyes naturally gravitate towards pictures rather than text, and this page has no images at all! It has plenty of underutilized room in the page – why not make it easier on the eyes? A picture of flirtatious college students might work here. That said, it’s lack of pizazz may be an “x factor” in contributing to its exclusive/secret feel.
Calls to action/Forms: Note how there are three pairs (login & register) of calls to action on the page. One on the upper left, one on the bottom center, and one on the upper right. We’ll see how this changes in future versions
August 17, 2008. Here’s Facebook’s homepage when it had 100 million active users.
Messaging
Key Feature: The messaging in this version signals a major shift for Facebook. Whereas previously it listed informational features, now the landing page pushes social instead. The slogan is, “Facebook is a social utility that connects you with the people around you” which indicates that Facebook learned that people don’t want to view themselves as mere spectators, but they want to be social participants.
Tip: Has your product evolved since you first started using it? If so, consider rethinking your messaging.
Highlights: The product’s evolution is also evident in the highlights: “reconnect,” “share,” and “keep up.” Also here, we have “control privacy online” which around this time had developed as an important issue for internet users.
Tip: Oftentimes when we add new features, such as deeply enhanced media sharing in this example, unintended issues arise such as security. Are there any unintended concerns regarding any of your features?
Social/Trust: The “find your friends on facebook” bar on the bottom left is a very powerful social element. Knowing that your particular network is using it could be the biggest selling points for a social network.
Tip: If you can find a way to do this (oftentimes it works best, ironically, by using Facebook) it’s an idea worth trying.
Structure
Text/images: It’s interesting to note that Facebook still isn’t using images. Oftentimes we don’t recommend this, but in some cases and when tested, it works. In this page, the text is laid out in a semi-organized way. It’s a little weird how there are two logos though, one under the other.
Calls to action/Forms: In this version of the page, Facebook put the signup form directly on the homepage, thus eliminating an extra step from the last version. It also got rid of one of the three calls to action from the initial page.
Tip: Is there a way you can eliminate a step from your funnel?
August 3rd, 2011. Here’s Facebook’s homepage when it had 700 million users. Around this time, Facebook was less than a year away from going public, which it did in 2012.
Messaging
Key Feature: Here Facebook simplifies its messaging for the better. It even takes a cue out of Conversioner’s book! It went from a statement about the product to a statement about how the user will be better by using the product.
Highlights: Facebook doesn’t list its features anymore, which doesn’t surprise me since it has 700 million users after all.
Tip: If you are still highlighting the same features that you were highlighting at your company’s inception (and now you’re a lot bigger), it might be time to change.
Social/Trust: The “find your friends on facebook” option has been eliminated. While it was good while it lasted, that kind of social proof was simply no longer needed in 2011. Facebook reached enough fame to eliminate social proof altogether. For trust, it now includes all the language options on the bottom of the screen – this emphasizes that it is an international organization.
Structure
Text/Images: For the first time ever Facebook has added an image, one symbolizing the interconnectedness of people in the world. It’s interesting to see how this basically replaces all text messaging. By this stage in the game, Facebook doesn’t need to say what it is; everyone already knows. Tip: Learn how to utilize images in your landing page.
Calls to Action/Forms: Here we see some significant layout changes
-
Button: It went from initially a blue button, to a hyperlink, and then to a green button.
Tip: Just because you have 700 million users, doesn’t mean your button is perfect. There’s always room for experimentation. Learn what makes a great call to action button.
-
Form UI: The login used to be on the left-hand side of the screen. Now it is on the upper right. Even though it has the same function, it is right in line with the other form on the page, and makes the whole feel of it less overwhelming.
Tip: Try out how different layouts look on your site. Remember, orderly lines oftentimes are easier to look at than clutter!
May 25th, 2015. Present day.
There aren’t too many dramatic changes from the 2011 version to present, so let’s focus on some of the subtle changes.
Title size: The size of the title “Sign Up” doubled in size from the previous version.
Form Fields: Instead of putting the field names to the left of the fields, they but the field names within the fields themselves. This is a good way of reducing clutter.
Binary question: The male/female choice was a dropdown in previous versions, but now it has changed to radio buttons.
Background: The background was actually added in the previous version, but it’s important to eliminate the feeling of empty space in a landing page, even if it doesn’t do anything for the content.
Mobile number: Now instead of the only option to enter your email, there’s an option to enter your mobile number too.
Highlights: Facebook added some key features back in here after not including them in the previous version. While the first two features are all too familiar, the third, Graph Search, is not. Landing pages are a place to not just promote the time tested features of your product, but the new ones too.
Tip: What to make of this? Oftentimes, when making forms or deciding upon landing page details, we make seemingly small decisions without a thought. But the more intentional we are and the more we test, the better the results will be.
Take this poll:
[interaction id="556d8cf984caec334b1de70e"]
Conclusion
Overall what strikes me as the most important factor in Facebook’s success is its self awareness at each stage in the process. It’s structure was not always perfect, especially in the earlier days, but it crafted its messaging to highlight the right things at the right times.
At different stages in your product’s lifecycle, you need to change your landing page accordingly. Most importantly, just because you have all the users in the world does not mean your landing page is perfect! If Facebook needs to change its page, you probably do too.
Secret to Success: How Facebook Does Landing Pages 5.00/5 (100.00%) 8 votes
Related Posts
Secret to Success: How Facebook Does Landing Pages
Ever wondered how an internet giant like Facebook does conversion optimization? Well, read on!
Last week I published a post about competitors analysis for conversion optimization in which I discussed looking to internet giants to see how they do it.
In this post be examining some of Facebook’s earliest landing pages and end by looking at their current versions. In this journey through time, we’ll examine the often overlooked interdependence between website, business, and technology.
Facebook:
December 13th, 2005. This was Facebook’s home page during its second year of business, at just about the time that it started branching out from college to high school students.
This landing page, while very basic, is actually a pretty impressive feat (keep in mind we must judge it to the standards of 2005). After all, it was so successful that it contributed to Facebook’s rapid rise to success. Check out what makes a great landing page.
Messaging
Key Feature: Exclusivity, access to students only, was but just one of Facebook’s features at this stage in the company’s rise. However, it dedicates the second two lines of text entirely to this feature. It’s an example of recognizing one of the most authoritative attributes and pushing it harder than any other.
Tip: Try chopping down the messaging on your page to just the most important stuff.
Highlights: Facebook lists three other highlights here: Look up people at your school, See how people know each other, and Find people in your classes and groups. This makes sense for Facebook’s landing page around the time of its inception; one initial goal for Facebook was to replace the school yearbook. I could see a hard copy version have the same highlights.
Social/Trust: For a social network, this page doesn’t do the best job at establishing credibility with users. The only quasi-trust icon I see is the text “A Mark Zuckerberg production” which, if users had actually heard of the renegade boy genius college dropout, would have indicated that they were in the right place.
Tip: Trust icons can come in many forms: What do you use? Find out more about trust and social proof.
Structure
Text/Images: Eyes naturally gravitate towards pictures rather than text, and this page has no images at all! It has plenty of underutilized room in the page – why not make it easier on the eyes? A picture of flirtatious college students might work here. That said, it’s lack of pizazz may be an “x factor” in contributing to its exclusive/secret feel.
Calls to action/Forms: Note how there are three pairs (login & register) of calls to action on the page. One on the upper left, one on the bottom center, and one on the upper right. We’ll see how this changes in future versions
August 17, 2008. Here’s Facebook’s homepage when it had 100 million active users.
Messaging
Key Feature: The messaging in this version signals a major shift for Facebook. Whereas previously it listed informational features, now the landing page pushes social instead. The slogan is, “Facebook is a social utility that connects you with the people around you” which indicates that Facebook learned that people don’t want to view themselves as mere spectators, but they want to be social participants.
Tip: Has your product evolved since you first started using it? If so, consider rethinking your messaging.
Highlights: The product’s evolution is also evident in the highlights: “reconnect,” “share,” and “keep up.” Also here, we have “control privacy online” which around this time had developed as an important issue for internet users.
Tip: Oftentimes when we add new features, such as deeply enhanced media sharing in this example, unintended issues arise such as security. Are there any unintended concerns regarding any of your features?
Social/Trust: The “find your friends on facebook” bar on the bottom left is a very powerful social element. Knowing that your particular network is using it could be the biggest selling points for a social network.
Tip: If you can find a way to do this (oftentimes it works best, ironically, by using Facebook) it’s an idea worth trying.
Structure
Text/images: It’s interesting to note that Facebook still isn’t using images. Oftentimes we don’t recommend this, but in some cases and when tested, it works. In this page, the text is laid out in a semi-organized way. It’s a little weird how there are two logos though, one under the other.
Calls to action/Forms: In this version of the page, Facebook put the signup form directly on the homepage, thus eliminating an extra step from the last version. It also got rid of one of the three calls to action from the initial page.
Tip: Is there a way you can eliminate a step from your funnel?
August 3rd, 2011. Here’s Facebook’s homepage when it had 700 million users. Around this time, Facebook was less than a year away from going public, which it did in 2012.
Messaging
Key Feature: Here Facebook simplifies its messaging for the better. It even takes a cue out of Conversioner’s book! It went from a statement about the product to a statement about how the user will be better by using the product.
Highlights: Facebook doesn’t list its features anymore, which doesn’t surprise me since it has 700 million users after all.
Tip: If you are still highlighting the same features that you were highlighting at your company’s inception (and now you’re a lot bigger), it might be time to change.
Social/Trust: The “find your friends on facebook” option has been eliminated. While it was good while it lasted, that kind of social proof was simply no longer needed in 2011. Facebook reached enough fame to eliminate social proof altogether. For trust, it now includes all the language options on the bottom of the screen – this emphasizes that it is an international organization.
Structure
Text/Images: For the first time ever Facebook has added an image, one symbolizing the interconnectedness of people in the world. It’s interesting to see how this basically replaces all text messaging. By this stage in the game, Facebook doesn’t need to say what it is; everyone already knows. Tip: Learn how to utilize images in your landing page.
Calls to Action/Forms: Here we see some significant layout changes
Button: It went from initially a blue button, to a hyperlink, and then to a green button.
Tip: Just because you have 700 million users, doesn’t mean your button is perfect. There’s always room for experimentation. Learn what makes a great call to action button.
Form UI: The login used to be on the left-hand side of the screen. Now it is on the upper right. Even though it has the same function, it is right in line with the other form on the page, and makes the whole feel of it less overwhelming.
Tip: Try out how different layouts look on your site. Remember, orderly lines oftentimes are easier to look at than clutter!
May 25th, 2015. Present day.
There aren’t too many dramatic changes from the 2011 version to present, so let’s focus on some of the subtle changes.
Title size: The size of the title “Sign Up” doubled in size from the previous version.
Form Fields: Instead of putting the field names to the left of the fields, they but the field names within the fields themselves. This is a good way of reducing clutter.
Binary question: The male/female choice was a dropdown in previous versions, but now it has changed to radio buttons.
Background: The background was actually added in the previous version, but it’s important to eliminate the feeling of empty space in a landing page, even if it doesn’t do anything for the content.
Mobile number: Now instead of the only option to enter your email, there’s an option to enter your mobile number too.
Highlights: Facebook added some key features back in here after not including them in the previous version. While the first two features are all too familiar, the third, Graph Search, is not. Landing pages are a place to not just promote the time tested features of your product, but the new ones too.
Tip: What to make of this? Oftentimes, when making forms or deciding upon landing page details, we make seemingly small decisions without a thought. But the more intentional we are and the more we test, the better the results will be.
Take this poll:
[interaction id="556d8cf984caec334b1de70e"]
Conclusion
Overall what strikes me as the most important factor in Facebook’s success is its self awareness at each stage in the process. It’s structure was not always perfect, especially in the earlier days, but it crafted its messaging to highlight the right things at the right times.
At different stages in your product’s lifecycle, you need to change your landing page accordingly. Most importantly, just because you have all the users in the world does not mean your landing page is perfect! If Facebook needs to change its page, you probably do too.
Related Posts