Homepage History: What Does the Ultimate Personal Branding Homepage Look Like?
How should you design your homepage? That's a question many entrepreneurs struggle with. We know that the homepage represents our business and brand, more than any other page. We want to get it right.
What if you could learn from the best? Not just learn from what the most successful sites do right now, but also learn from how they got here?
That's exactly what this post is about.
We dove into the homepage history of the websites run by 6 leading minds when it comes to content marketing and personal branding: Tim Ferriss, Ramit Sethi, Marie Forleo, James Clear, Celestine Chua and Gary Vaynerchuk.
Read on to discover the keys to success that we unearthed in this in-depth study (and to see the "ideal homepage" template we created based on everything we learned).
Personal Brands With Star Power
The websites we're examining in today's post all have one thing in common: they're a platform that led their respective owners to fame and success. Each site is the center piece of a highly successful personal brand.
What exactly does "personal brand" mean, in this context?
Each site represents one expert/author/teacher in a field. The emphasis is on the person, their expertise and the content they create. You can think of a personal brand as the "serious business" version of a personal blog.
For our analysis we picked out some of the leading sites in this field:
- Personal Excellence by Celestine Chua
- Gary Vaynerchuk
- James Clear
- Marie Forleo
- I Will Teach You to Be Rich by Ramit Sethi
- Tim Ferriss
These are all people who have done an outstanding job of building a passionate audience, building a strong brand and turning themselves into recognized experts.
But here's the thing: none of them started out as online superstars. They started out as just some person with a website. What did they do, to become as successful as they are today?
To answer this question (at least in part), we aren't just looking at the current states of their websites, we're also diving into the history of the sites...
The Historic Deep Dive
For our research, we used the Web Archive to look at past versions of each of the website's homepages. We took note of how often the homepages received a major redesign and how they changed over time. And out of all the data we gathered, we looked for common patterns.
In what ways did these pages change over time? What trends does this uncover?
Since these are all sites of highly successful businesses, run by very smart people, we can assume that the homepages are getting better over time. And thus, we can extract some valuable lessons.
In the following, we'll look at the past and present state of the homepages and then extract conclusions and actionable tips from what we find.
Celestine Chua, Personal Excellence
For the longest time, Celestine's homepage was a bit of a mess. In 2012, she displayed a "Welcome to Personal Excellence" headline with a generic stock image, a wall of text and a ton of stuff in the sidebar:
For many years after that, she displayed a video at the top of her homepage, followed by a list of her blog posts.
Finally around 2017 she added a clear title section with a hero image and a strong headline and call to action, followed by a list of blog posts.
You may know our stance on this, which we've repeated often: your blog's homepage should not be a list of blog posts! In my opinion, going from the messy list of posts to a strong title section is definitely a step in the right direction.
Celestine's Current Homepage
Click to see full preview.
The current homepage is the more landing-pagey than any previous iterations. It lists only her 3 latest posts and is much more focused on introducing a new visitor to her site, her mission and "showing them around".
I also found an interesting evolution in Celestine's homepage headline. The oldest one we found was "Welcome to Personal Excellence" which is a very old-school title. Before people knew what to do with web pages, this "welcome to my site!" type headline was typical.
She ditched that and had no title at all for a long time. Then, two different titles in the latest two versions of her homepage:
- 2017: "Hi, I'm Celes and I'm passionate about helping you achieve your highest potential in life. Let's get started! :)"
- 2018: "Hi, I'm Celestine Chua. Let me work with you to achieve your biggest goals and dreams."
I love this. Do you see how those two headlines say the same thing, but the second one is cleaner, more "you" focused and and less abstract? Definitely a subtle but important improvement.
Like the previous example, Gary's homepage displayed a list of his latest blog posts and not much else, for a long period of his site's existence. For many years, you'd find something like this on his homepage:
He switched up the design of his homepage almost yearly, but in principle, it was still a list or gallery of his latest posts. Here's an example from 2015:
However, around 2016 he changed that and started showing a dedicated landing page instead. He used quotes as his page titles for a while:
Gary also prominently featured videos on his site, pretty much as far back as the archive goes. Much of his blog content is in the form of videos and he also used them on his homepage, like you can see in the title section in the screenshot above.
Gary's Current Homepage
Click to see full preview.
Interestingly, no headline. Just a large title section with a video play button. Gary's homepage uses video and images, heavily. He lists only two recent blog posts and shows a "get on my mailing list" call to action very prominently.
Interesting and unique to Gary is his call to actions for getting in touch with him. This has always been a strong focus of his: communication through every possible channel.
James Clear is an interesting candidate because he's always had a strong focus on minimalism. As far back as 2012, James has been displaying a short, minimal landing page as his homepage and he's never diverged from this formula.
For a while, he showed a stronger call to action and/or an image of himself on the page:
But for long periods of time, he didn't even include an image of himself on the homepage. Here's a snapshot from 2016:
James has done two things consistently, for years: the first is that lets words do the talking on his site, instead of relying on fancy visuals. If you've seen my "copy only landing page" you know that I'm quite fond of this approach. This goes beyond just his homepage as well: James' site encourages the visitor to browse and read, letting the content win them over and turn them into fans.
Secondly, James Clear's site has shown a simple, calm landing page as the homepage for many years.
James' Current Homepage
Click to see full preview.
The latest homepage on James Clear's site is a further step toward minimalism. There's almost only text here (and not even that much). And his call to action is the dreaded "get on my newsletter".
I have no doubt that a higher converting homepage would be achievable here, but higher conversions are probably not James' goal. In my opinion, this is the clearest example of a website focused on getting 1,000 true fans (although I'm sure James has more true fans than that already). It's not about opening the top of the funnel wider, it's about letting the right people come to you.
Fair warning: you have to create beyond excellent content to be able to pull this off.
Marie has been at this for a long time (in Internet years, anyway). Here's her site from 2002:
In more recent years, her website looked like this for quite a long time (roughly between 2013 and 2016):
One thing that's noticeable throughout Marie's site is that she strongly emphasizes personal branding. Which is to say: she puts her face front and center, everywhere. There's no way you can spend even a few moments on her site and not know what she looks like.
Personally, I think it's a bit much, but there's no doubt it works. from real life, we're used to interacting with people face-to-face. What Marie does ensures this kind of face-to-face feeling on her site, as well.
Marie's Current Homepage
Click to see full preview.
Marie's homepage manages to stand out, even from a group of such eclectic sites as the ones we're comparing here. The page is not at all about showcasing her latest content and there's no opt-in form in the page content itself. Instead, there are two major goals on the page:
- Lots and lots of authority proof and social proof. Marie with celebrities and Marie's customers and fans raving about her take up the majority of the page.
- A "getting to know me" effect: there are many images of Marie and the calls to action that exist mainly invite you to learn more about her and her brand.
As noted above, there's no opt-in form in the page content, but that doesn't mean Marie is bucking the trend in this regard. Lead generation does seem to be a high priority on her site, since you'll meet this screen-filling overlay after a few seconds:
This transforms the homepage into a simple, highly focused landing page, until the visitor either signs up or closes the form.
Tim is a bit of a wildcard, here. His site used to look like this:
You can click pretty much anywhere in the history of his site and be presented with an almost identical looking design. Tim has displayed a list of blog posts on his homepage since forever. Mainly, what changes over time is:
- The large header image at the top usually reflects his latest book or project.
- The sidebar has always contained many links and is often used to promote his books, podcast and other current projects.
Tim's Current Homepage
Unsurprisingly, Tim's current homepage still looks mostly the same as it has for years. That's not to say that the site never changes. Top-banner-Tim managed to take his hat off, for one thing.
Joking aside, Tim's site changes quite frequently, but only in small ways. In the current iteration, one notable thing is that it displays his latest blog posts with infinite scrolling. Meaning: before you reach the bottom of the list, new posts are loaded in and you can keep scrolling down forever. The full content of each post is shown in this blog list. Combined, this means you can consume Tim Ferriss content uninterrupted, without ever needing to click through to a different page.
To me, this indicates that the main goal of the page is to get the visitor to engage with the content. Having to click through to something represents a point of friction, which has been eliminated on this blog.
Ramit Sethi, I Will Teach You to Be Rich
Ramit has probably the most interesting history of all the homepages we analyzed for this post. He's known for testing and tracking a lot and it shows: his homepage changes often, in small and big ways.
Ramit switched from showing a list of latest posts to showing a dedicated homepage around 2012:
At first glance, these layouts look similar, but there's a major difference. The 2010 version shows the full content of the latest blog post on the homepage. The 2012 version replaces that with a long-form opt-in page. All that space is now dedicated to explaining what Ramit's site is about and why you should sign up to his newsletter.
Ever since, there's been a trend towards less, on this homepage. The amount of content and number of choices gradually went down over the years. Around 2014, he removed the sidebar from the homepage and trimmed down the content.
And in 2015, the page shrinks to approximately one screen length:
Another way to look at this is that the homepage became more and more focused over the years. Few entrepreneurs have the guts to apply such focus. Most of us want to show off on our homepages and that leads us to overdo things.
Ramit's Current Homepage
This latest version continues the trend towards minimalism. Despite how short it is, the page doesn't neglect personal branding and it also includes authority proof in the form of various "as seen on" logos.
Interestingly, the call to action on this page is to take a quiz. This shows that Ramit aims to segment his audience right away, so he can deliver more relevant content in his incredibly sophisticated follow-up marketing. You can follow Ramit's example by using the Thrive Quiz Builder plugin.
The Current Homepages in Numbers
Here's what the current homepages look like, broken down into data:
CTA above fold?
Main menu links
2nd level links
Now, let's extract some insights and actionable advice out of this data.
Anatomy of the Perfect Personal Branding Homepage
Based on all our findings from the trends and current homepages, we've created the "perfect" homepage for a personal brand. Here are the components:
To make it more practical, here's what to apply on your own website:
1) Use a Hero Image
If you have a personal brand, use a hero image. There's only one exception to this rule, which is James Clear's site. Everyone else uses either a prominent hero image header (here's how you can build one for your site), a video or both.
Why it Matters
The hero image represents a core strategy of personal branding: put your face on things. Even if you don't literally put your face on something, personal branding can only work when you infuse your content with your personality. The brands we examined got to where they are because they eschew the overly careful, politically correct, signed-off-by-legal tone that is the norm of corporate communication.
To step this up a notch, create video content. Marie, Gary, Tim and many others on the list have used video content to build a more direct, personal relationship with their audience.
2) Display Authority Proof and/or Social Proof
One of the most common elements we found both in current and past iterations of these homepages is authority proof. There are 3 ways authority proof is shown on the sites, with the first one being the most popular by far:
- "As seen on" with logos of well known publications and mainstream media outlets.
- Pictures of the author with celebrities.
- Endorsements or testimonials by celebrities or well known figures.
Why are these elements so common? We can't know for sure, but it could be that they increase conversions and engagement on a site. It's worth doing some PR work to get coverage, so you can test it out yourself.
Other forms of proof are testimonials and audience boasts. Most sites either display testimonials from fans or show off the size of their audience (e.g. "join 50,000+ subscribers"). The audience boast is the simplest of these forms of proof, but of course you need the audience first. Testimonials are strong conversion elements and the good thing is that they are easier to come by than authority proof, especially if you use Thrive Ovation.
Why it Matters
As soon as you try to apply this tip, you could encounter a problem: what if you don't have any testimonials, don't have a large audience and have never been featured anywhere noteworthy?
Authority and social proof matter not just because of the effect they have on conversion rates when you add them to a page, but also because of what it takes to get them in the first place. A quest for this kind of proof will see you reaching out to your audience members to interview them, creating noteworthy products and content, reaching out to influencers in your market and pitching stories to major media outlets. Can you see how all of that would also grow your brand?
3) Collect Email Leads
Almost every homepage features one or more opt-in forms. In most cases, one of them is shown as the main call to action, close to the top of the page. It's also typical to see a second opt-in form and call to action at the end of the page.
Email marketing is still the most powerful way to stay in touch with your audience, so it's no surprise we saw so many opt-in forms. What was a bit surprising is that all of them were 1-step forms. There's a lot of hype around the 2-step opt-in, but it seems you can do just fine without it.
Why it Matters
People in your audience are busy. They might read one of your posts, love everything about it... and then promptly forget about it and never return to your site. Creating an opt-in offer means two things for your personal brand: first, you create something of great value, to give to your new subscribers. Second, you get the chance to remind your audience members to return to your site again and again in the future. This gives you the chance to grow a real fan base. And it gives them the chance to really benefit from everything you have to offer.
4) Confirmed: Blog Homepage ≠ Blog
A good blog homepages isn't about displaying a list of the latest posts. In fact, most of the homepages we looked at display 3 posts or fewer.
Tellingly, there's a clear trend over time: in earlier iterations, we see just blog posts on the homepage. As time goes on, there's a transition to a dedicated homepage with some blog posts listed and finally we end up at a page with very few posts or no posts at all.
Tim Ferriss is the only exception here and he shows what's closest to a "traditional" blog on his homepage. But even he dedicates the majority of his above-the-fold space to advertise his most important asset: the podcast.
Why it Matters
If you simply display your latest blog posts on your homepage, you're leaving your conversion rate up to chance. A new visitor may or may not be interested in whatever happens to be the top post at the time. This can seriously stunt your brand's growth.
The lesson is: know your unique selling point, know your most important conversion goal and use your homepage to communicate the former and drive people towards the latter.
5) Use 5 Navigation Links, No Drop Downs (in a Slim Header)
Finally, we can see that most of the sites keep a simple, clean main navigation. Most commonly, we see just 5 links and no drop downs. This makes navigation easier and prevents overwhelming visitors with too many choices. The only exception to this rule is Celestine's site.
Also, there's a clear trend regarding the header itself: headers on these top sites in their field are generally simple, slim and minimal. We don't see any secondary menus, we don't see extra links, social icons or large images crammed into the header area and logos are generally small and text-only. This, in particular, might come as a shock to many a beginner entrepreneur who's spent sleepless nights agonizing over the choice of a logo: these titans of personal branding don't have icons in their logos.
Why it Matters
This minimal approach to headers and navigation is more than just a design choice. I believe it's the result of a profoundly important quality that almost all successful brands come to, over time: focus.
It's a beginner's mistake to try to do too many things all at once and try to create a website that appeals to everyone and excludes no one. Personal brands become successful if they manage to streamline. To hone in on a clear message and a clear target audience. And when you have such focus, a multi-level drop-down menu with 200 items in it just won't be necessary anymore.
6) Add Your Own Twist
There are basic principles that we meet again and again on the homepages we examined. But each of the homepages also has its own unique twist, so don't be afraid to divert from the formula.
How do you know what twist you should add? Make it relevant to your brand and your personal style. Here are some examples:
- Is a loud and colorful personality part of your brand? Use bold colors and playful designs on your homepage.
- Do you create a lot of video content? Feature a video on your homepage's title section (or even multiple videos throughout the page).
- Do you host a podcast? Add a section featuring your latest or most popular episode.
- Do you write a lot of in-depth content? Don't be afraid to add extensive text sections to your homepage.
You get the idea: use the first 5 rules to create a framework for your homepage and then infuse it with your brand's style and personality.
Why it Matters
This is the "personal" part of personal branding. Every successful business must stand out from the crowd - must offer unique value in some way. With a personal brand, some of this unique quality comes from the author's personality. And as mentioned before: a brand like this cannot take off unless the author lets that personality shine through - in everything from their content, their tone in communications and design choices on their site.
Bonus Template for Thrive Architect
As usual here at Thrive Themes, we wanted to go the extra mile, so in addition to providing the exact structure and an example to go with this post, we've also made a bonus template available (click here to preview). You can get the exact template shown above and make it instantly available and editable in Thrive Architect, on your own WordPress website.
Here's a quick video with a tour of the page and how to edit it:
Guidelines, Not Rules
In all of this research, we found many "rules" for creating a personal branding homepage, but no rule comes without exceptions. For example: everyone uses a hero image... except James. Everyone uses a dedicated landing page for their homepage... except Tim. And so on.
To me, this shows two things:
- There's a lot we can (and should) learn from the commonalities, trends and patterns we see among these sites.
- Despite that, there's never a single formula or recipe. There isn't one right way to do things.
Sometimes, bucking a trend is in itself a clever tactic. Everyone uses hero images, which makes James' homepage stand out. The minimalism he displays is in line with his brand and everything else he does, so for him, this is a good choice. We use an approach like this in our products as well, see: why sliders make your website suck.
After learning all this, what will you do differently on your homepage? Let me know by leaving a comment!
For my part, I wasn't about to do all this research and then walk away from such a treasure trove of insights. That's why I'm currently running an A/B test (using Thrive Optimize) on the homepage on my blog, based on what I learnt here. When the test is complete, I'll post an update on this blog.
Would you like to see this kind of analysis applied to other types of websites? Let me know which ones!