There is one product I discovered this year, and I can’t stop thinking about it. Not only does the website looks unique, the entire brand language stands out for a B2B company.

Yes, it’s PostHog. The open-source product analytics company (or they’d like to call themselves, product operating system) that came out of YC and raised over $39M.

PostHog. Is different. They touch grass. You can tell by their mascot, the hedge hog, the vibrant color scheme of their brand and down to earth communication style.

I’ve never seen a SaaS company with this much sass. It’s not just their brand, but their entire company culture.

Home Page

Not only does PostHog has a unique brand, they also have a very different approach when it comes to their website structure.

Here’s their home page structure:

1. Navigation

2. Hero

   1. Tagline and CTA

   2. Product Visuals

3. Social Proof #1

4. Technical Implementation

5. Differentiation/Why This Product

6. Social Proof #2

7. More TechTok

8. Getting to Know PostHog

9. Social Proof #3

10. End of Page CTA

11. Overlay Components

Navigation & Hero

PostHog has a fairly simple nav bar: products, pricing, docs, company, etc. What’s interesting is the community page they set up. Unlike many other products who would either create a discord or slack community, their community is a forum they hosted on their site. It’s kind of refreshing to see.

I also like the search bar (shortcut “/”) which a lot of companies don’t use anymore. It makes finding documents, FAQs, tutorials, etc. very quick.

Tagline and CTA

PostHog uses a benefit centric tagline “How developers build successful products”, but also follows it up with a more specific explanation of how they deliver on that promise.

We see a duo CTA system here: product led “get started - free” and sales led “Get a demo”.

Product Visuals

What I love about PostHog is immediately in their product visuals, you get almost ALL the information you need. With just a few tabs, you know exactly what you can get out of this platform. They are full of visuals, descriptions, examples, etc. Their more “beta” features though have less graphics, but more focused on the vision and direction of this feature like AI engineering.

Social Proof #1

The social proof with a screen of company logos arrive without fail. I’m surprised to see some very diverse industries though like Staples, Airbus and DHL. These are all supply chain or transportation companies.

Also love how they listed their own logo at the end - it’s these details that make you think “ha, that’s smart”.

What sets their social proof page apart is they have fun with it too. “Find your logo in this fun Godzilla inspired gif!”

Technical Implementation

This mobile screen is the perfect example of them wanting to have a bit fun and showcasing how “serious” they are. At the same time, they clearly lay out their integration options.

Even their most serious portion of the website, code examples, is super interactive. Everything is just well designed and clearly communicated.

Differentiation/Why This Product

When you differentiate yourself, you often compare yourself to competitors or alternatives by listing features. Not PostHog. They create undesirable characters and ask if you want to be one of them.

They spent a lot of effort to keep the visitor engaged. I have a feeling, more users scroller further down their page than other SaaS product websites.

Social Proof #2

This section is interesting, it’s just one user’s testimonial instead of many. Maybe they know people don’t read all three testimonials.

More TechTok

Because PostHog is a developer centric product, they talk a lot about their tech and how things work behind the scenes. They talk about their API and unique SQL tool for retrieving the right data.

Getting to Know PostHog

This is a section where they give you insights into their company. Like they are open source. Like inviting you to read their company strategy, business model and even their source code.

They talk about the current platform, tutorials online and best practices to help their customers grow fast with PostHog.

They talk about their focus on security, privacy and compliance.

They even talk about their shipping velocity and show you their roadmap.

All of the above is to gain your trust. Who doesn’t love a super open company that emphasizes on data control, ships fast and helps you grow?

Social Proof #3

This section explains why they only listed one testimonial in Social Proof #2. They gave another testimonial - this time from YC. More important, they pitch why PostHog is a great fit especially for startups.

End of Page CTA

This is my favorite section - selfishly. There are tons of throwbacks here. Like when software are sold through CDs. Reference to Kim K. The playful e-commerce style metrics (240 companies signed up today).

And their marketing team “breaking the 4th wall” with the “Please help our conversion rate” message. What not to love about this super demure section?

Overlay Components

What’s interesting is PostHog has several overlays. It’s absolutely wild that Hillary Clinton (?), allegedly, is asking for third party cookies. The attention to details is strong with this brand.

They also showcase their GitHub repo in overlay as well. For me, I did find it too busy, but this specific overlay does help build trust with the visitor.

Onboarding

Account Creation

They talk about their key reasons for picking PostHog again on this page: free usage, ease of integration and social proof. They also show their developer centric approach by strategically enabling GitHub and GitLab SSO. They also listed subtle features at the very bottom - I definitely missed on first look.

Worth mentioning, they employ a two step account creation process.

Onboarding

Their onboarding starts by asking the user to select a product to start.

In this example, let’s look at their core product flow: Product Analytics.

It took you to the install page with four distinct steps showing you how many more steps there are.

On the bottom of this page, they remind the user that they can invite members to complete this step which is a great alternative step for someone who is not technical.

Also, they allow you to skip this step if you want to check out future steps.

After completing or skipping installation, you can configure the project. What’s interesting here is “session recordings” is turned off by default. My guess for this decision is not turning on session recordings avoid distracting users from the current task.

Just like a video game, you are introduced to mechanics slowly.

Next, the user gets to choose the plan. Typically, I as a user don’t want to see price plan information just yet, because I have tested out the product yet. However, the usage-based plan in this case has the same base price of $0, but offers a few more perks like multiple projects, advanced paths, etc, so it may make sense for someone to upgrade here.

And the other thought here is they are ready to upgrade right away. You will also see that you can set billing limit to $0, so they eliminated all risks to move to the usage-based plan.

The last step is user invite. I like they have an optional message section. I like this approach, because then I don’t have to Slack someone and give them context again.

Key learnings:

1. You can showcase your brand through your website’s visual languages such as designs and graphics used.

2. When you have a boring products, think ways you can make it fun. PostHog is a great example where a very technical products can still have fun.

3. Showcase your features in efficient ways such as tabs + product visuals.

4. Consider PLG and SLG CTAs like sign up vs demo.

5. When you have have a super creative website, people remember.

6. Think about if it makes sense for your product to turn on all features for a user. In the case of PostHog, once the user has piped in their data, they can easily turn on session recording as the installation step is the same.