Por que nosso site parece um sistema operacional

• Muitos grandes sites de tecnologia sofrem com uma explosão de abas quando você tenta consultar várias páginas ao mesmo tempo
• O PostHog.com também enfrentava um problema parecido e, para resolvê-lo, adotou uma interface no estilo de sistema operacional
• Na nova estrutura, há vários recursos de interação, como multitarefa, encaixe de janelas e atalhos de teclado
• Foram aplicadas inovações técnicas como hierarquia visual e separação de conteúdo, gerenciamento de conteúdo baseado em JSON e banco de dados de clientes
• No começo pareceu estranho, mas a experiência de desenvolvimento e de uso melhorou de forma positiva, garantindo flexibilidade e escalabilidade

---

O problema: explosão de abas em sites de tecnologia

• Em muitos grandes sites de tecnologia, ao tentar consultar várias páginas de uma vez, acaba-se abrindo várias abas novas com CMD + clique
• Devido ao mesmo favicon e a designs parecidos, fica difícil distinguir cada aba
• O PostHog.com também começou a sofrer o mesmo problema à medida que o serviço crescia, e a perda de clareza se intensificou com o suporte a mais produtos pagos e o aumento no número de páginas

Buscando alternativas e inovando na UI

• Surgiram dúvidas sobre a interface centrada em rolagem dos sites tradicionais de marketing e documentação, com rodapés enormes e espaço em branco em excesso
• Em vez de induzir rolagens sem sentido, percebeu-se a necessidade de uma forma melhor de consumir conteúdo
• Para resolver isso, o novo PostHog.com foi projetado para permitir multitarefa, abrir vários artigos ao mesmo tempo e se mover livremente dentro da tela

Um site que funciona como um sistema operacional

• A nova UI implementa recursos como encaixe de janelas, atalhos de teclado e um app de favoritos
• Como um sistema operacional dentro do navegador, ela oferece uma experiência em que é possível realizar várias tarefas ao mesmo tempo
• Por exemplo, é possível ver uma newsletter para engenheiros, assistir a um vídeo de demo e rodar um jogo (modo Hedgehog) simultaneamente

Adaptação inicial e reação dos usuários

• A interface no estilo de sistema operacional pode parecer um pouco estranha no começo
• Por sair dos padrões tradicionais do navegador, o cérebro pode rejeitar a experiência de início, mas com o uso repetido ela se torna familiar e passa a ser vista de forma positiva
• Colegas da equipe também deram feedback positivo sobre essa nova experiência, a ponto de ficar difícil voltar ao modo antigo

Processo de construção e destaques técnicos

• Junto com Eli Kinsey, o site foi projetado e desenvolvido com base em Typescript e Tailwind
• Ao buscar uma forma de organizar com escalabilidade cinco anos de conteúdo, foram exploradas várias abordagens técnicas

Principais pontos técnicos

• Hierarquia visual e separação de conteúdo

  • Todas as páginas de produto são renderizadas com base em arquivos JSON
  • O JSON controla diretamente o layout da página, o desenvolvimento do conteúdo, as comparações com concorrentes por recurso e capturas de tela em vários temas (modo claro/escuro)
  • No longo prazo, a ideia é migrar essa estrutura para um repositório compartilhado com o app do PostHog, criando uma única fonte de informação

• Temas e skinning de cores

  • Mantendo os modos claro e escuro, houve reflexão sobre como aplicar de forma harmoniosa vários temas, como cores primárias, secundárias e terciárias
  • A experiência sobre isso deve ser compartilhada depois em um texto separado

• Banco de dados de clientes de referência

  • Define-se um único registro de cliente no código para armazenar informações como uso por produto, citações de clientes e logos SVG (compatíveis com modo claro/escuro)
  • Isso garante flexibilidade, permitindo carregar automaticamente citações, nomes, fotos e logos de empresa associados a produtos diferentes em cada página

Forma de desenvolvimento e prototipagem

• A UI foi implementada em Typescript e Tailwind, com design e desenvolvimento do site acontecendo ao mesmo tempo
• Foi escolhida uma forma de prototipagem dentro do ambiente de produção, o que facilita gerar novas ideias e expandir funcionalidades
• Quando necessário, ferramentas externas de mockup como o Balsamiq também foram usadas em paralelo para concretizar o conceito

Conclusão e próximos passos de melhoria

• No momento, isso ainda corresponde a uma fase inicial de MVP, e ainda há muitas melhorias a fazer
• A expectativa é que os usuários curtam a nova UX do PostHog.com e se divirtam explorando o site
• Um documento técnico sobre como o site funciona é fornecido separadamente