Why our website looks like an operating system

I have a problem with many large, technical websites.

Often times, I’ll want to refer to different pages at the same time. So I’ll CMD + click “a couple times” while browsing around and before I know it, I have 12 new tabs open – all indistinguishable from each other because they share the same favicon.

PostHog.com has the same problem – especially as the site has grown from supporting a handful of paid products to over a dozen.

As I looked for ways to solve this explosion of pages, I started to question many of the typical patterns that marketing & docs websites have today.

Long-form scrolling. Oversized footers. Absurd whitespace.

These website encourage scrolling, but just to get people to the bottom of the page? And then what?

Why are we doing this? What if we just made better ways to consume content?

That’s the idea behind the new PostHog.com. You can multitask, open a few articles simultaneously, and move them around as you please. If anything there's a whitespace deficiency, and your fingers will be jealous you're not scrolling with them as much (because you're so engaged with our content).

It has window snapping, keyboard shortcuts, and a bookmark app. It works as well as you’d expect an operating system to work in a browser.

You can be reading the latest newsletter from Product for Engineers while watching a demo video in the corner and also playing Hedgehog Mode, the game.

I’ll be the first to admit it – an OS interface for a “website” is initially a jarring experience. I felt this as I built it. The human brain expects certain patterns within the confines of a browser viewport, and when it doesn’t get that assurance, it revolts.

But the more I used the new site, the more I started to like it. And the experience was the same for colleagues. And now I can’t imagine using anything else.

I had a lot of fun in building it with Eli Kinsey. Throughout the site you’ll find:

• A Windows File Explorer clone that also acts as the UI for our merch store
• Product pages that resemble PowerPoint presentations
• A document editor where you can actually edit content
• Forums designed to look like you’re reading newsgroups in Outlook Express
• A QuickTime clone
• A lot of pages you’d expect to be well-designed that are… just formatted as spreadsheets
• A screensaver and a library of desktop backgrounds
• A plethora of keyboard shortcuts

It was also an interesting learning curve for me in figuring out how to organize five years worth of content while making it scalable for the future. Some of the technical highlights:

• Separation of visual layer from content
  • All product pages are now powered from JSON files (example). This means that JSON dictates page layouts, content presentation, feature-level competitor comparison charts, and more. It also contains an array of screenshots used in various places (both in light and dark mode, of course).
  • Eventually this will move to a repository that’s shared with the PostHog app, so all the information is powered from the same source.
• Skinning a site with themes and color schemes
  • How do you maintain light and dark mode, along with themes across a handful of accent variations (primary, secondary, tertiary) in a way that all play well together? (I found this out, and I’ll write about it sometime!)
• A reference customer database
  • I’ve created a single customer record in code that contains: a) which products they use, b) quotes from specific people about individual products c) SVG logos that work in light and dark mode
  • This means that any quote can be presented on any page for any product without having to be hard-coded. It pulls in their name and photo, quote, and company logo, and can be filtered in reference to a specific product.

For a lot of this site, I was designing it while I was building UIs in Typescript and Tailwind. (The entire site is just a Git branch off our current site – it's all technically the same codebase. I just merged along the way over the last few months.)

Prototyping in a production-level environment was a great way to ideate and develop features along the way – stuff I never would have built if I were just going off of mockups. I did find myself [popping open Balsamiq while I was building – but just long enough to flesh out some ideas.

So how will this pan out? Well, we’re about to find out. This feels like an early MVP – there’s a ton of stuff to improve upon from here.

But in the meantime, I hope you enjoy the new PostHog.com. Be curious, click around, and have some fun. I hope you enjoy your time here as much as we enjoyed building it.

If you're curious, read more about how the site technically works.