Designing posthog.com

The Brand Team is responsible for everything you see on posthog.com. We treat our website & docs as a product, which means we're constantly iterating on it and improving it.

Because our website has a well-defined aesthetic, we often skip the hifi design process and jump straight from wireframes into code. Having a designer who can code means we can reach the desired level of polish without always having to produce hifi designs, thus leading to huge time savings.

Step 1: Wireframes [Balsamiq]

We often produce hi-fidelity wireframes because this allows us to closely envision a design which in turn helps us skip the hi-fi Figma process.

Note: Balsamiq uses its own Comic Sans-style font. Don't get hung up on this!

Step 2: Hi-fi designs [Figma]

Designs are scattered across a variety of unorganized Figma files, but here's some of the most recent iteration.

If there are multiple iterations of a single page, we typically work left to right.

Any mocks in pages that appear to be faded out are considered old and out of date and can be ignored, as there is a better replacement nearby. (We sometimes want to keep them around for easy reference (and to leave a comment trail), but they're easily identifiable because their artboards are set to 50% opacity.)

Even with this loosely-documented process, things move quickly and we don't always follow this process. If you're looking for something in particular, it's worth pinging in the #team-brand channel.

We're also working on creating a singular place for product screenshots, which are exported in light and dark mode using html.to.design.