The Website & Docs 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.
Usually Eli will build 90% of a page and Cory will follow along (in code) with the final 10% of finishing touches.
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.
Our Balsamiq project contains many page iterations. Typically we share the most up-to-date versions in the relevant GitHub issue. (We sometimes use Balsamiq to prototype complex flows.)
Note: Balsamiq uses its own Comic Sans-style font. Don't get hung up on this!
Step 2: Hi-fi designs [Figma]
Designs live in the posthog.com Figma file. 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-website-and-docs channel.