Warum sieht unsere Website wie ein Betriebssystem aus?

• Viele große Technologie-Websites verursachen eine Tab-Explosion, wenn man mehrere Seiten gleichzeitig heranziehen will
• Auch PostHog.com hatte ein ähnliches Problem und führte zur Lösung eine UI im Betriebssystem-Stil ein
• Die neue Struktur bietet verschiedene Interaktionsfunktionen wie Multitasking, Fenster-Snapping und Tastaturkürzel
• Technische Neuerungen wie visuelle Hierarchien und Trennung von Inhalten, JSON-basierte Content-Verwaltung und eine Kundendatenbank wurden umgesetzt
• Anfangs war es ungewohnt, doch die Entwicklungs- und Nutzungserfahrung verbesserte sich positiv, während Flexibilität und Erweiterbarkeit sichergestellt wurden

---

Das Problem: Tab-Explosion auf Technologie-Websites

• Auf vielen großen Technologie-Websites öffnet man beim gleichzeitigen Nachschlagen mehrerer Seiten per CMD + Klick mehrere neue Tabs
• Durch identische Favicons und ähnliche Designs ist es schwer, die einzelnen Tabs auseinanderzuhalten
• Auch PostHog.com begann mit dem Wachstum des Dienstes unter demselben Problem zu leiden; mit mehr unterstützten Bezahlprodukten und mehr Seiten wurde der Mangel an Unterscheidbarkeit noch gravierender

Alternativen und UI-Innovation

• Die scrolllastigen Interfaces bestehender Marketing- und Dokumentationsseiten, große Footer und übermäßiger Leerraum wurden hinterfragt
• Statt bedeutungsloses Scrollen zu erzwingen, wurde die Notwendigkeit einer besseren Art des Content-Konsums erkannt
• Um das zu lösen, wurde das neue PostHog.com so entworfen, dass Multitasking, das gleichzeitige Lesen mehrerer Artikel und freie Bewegung innerhalb des Bildschirms möglich sind

Eine Website, die wie ein Betriebssystem funktioniert

• Die neue UI implementiert Funktionen wie Fenster-Snapping, Tastaturkürzel und Bookmark-Apps
• Sie bietet ein Erlebnis wie ein Betriebssystem im Browser, in dem mehrere Aufgaben gleichzeitig erledigt werden können
• Zum Beispiel kann man gleichzeitig einen Newsletter für Engineers lesen, ein Demo-Video ansehen und ein Spiel ausführen (Hedgehog-Modus)

Frühe Eingewöhnung und Nutzerreaktionen

• Die Oberfläche im Betriebssystem-Stil kann anfangs etwas ungewohnt wirken
• Das Gehirn sträubte sich teils gegen die Abkehr von traditionellen Browser-Mustern, doch mit wiederholter Nutzung stellte sich Gewöhnung ein und die Wahrnehmung wurde positiv
• Auch interne Kolleginnen und Kollegen gaben positives Feedback zu diesem neuen Erlebnis, und es wurde ein Punkt erreicht, an dem eine Rückkehr zur alten Art kaum noch vorstellbar ist

Aufbauprozess und technische Highlights

• Gemeinsam mit Eli Kinsey wurde die UI auf Basis von Typescript und Tailwind entworfen und entwickelt, während die Website gebaut wurde
• Bei der Suche nach einer skalierbaren Organisation von fünf Jahren Content wurden verschiedene technische Ansätze erkundet

Zentrale technische Punkte

• Visuelle Hierarchie und Trennung von Inhalten

  • Alle Produktseiten werden auf Basis von JSON-Dateien gerendert
  • JSON steuert direkt Seitenlayout, Content-Aufbau, Wettbewerbsvergleiche nach Funktionen und Screenshots verschiedener Themes (Light-/Dark-Mode)
  • Langfristig ist geplant, diese Struktur in ein gemeinsam mit der PostHog-App genutztes Repository zu überführen, um eine einzige Informationsquelle zu schaffen

• Themes und Farbschema-Skinning

  • Light- und Dark-Mode bleiben erhalten, und es wurde überlegt, wie Haupt-, Sekundär- und Tertiärfarben sowie verschiedene Themes harmonisch angewendet werden können
  • Erfahrungen dazu sollen später in einem separaten Beitrag geteilt werden

• Referenzkunden-Datenbank

  • Im Code wird ein einzelner Kundendatensatz definiert, der Informationen zu produktbezogener Nutzung, Kundenzitaten und SVG-Logos (für Light-/Dark-Mode) speichert
  • So können je nach Seite Zitate, Namen, Fotos und Firmenlogos, die mit unterschiedlichen Produkten verknüpft sind, automatisch geladen werden, was Flexibilität schafft

Entwicklungsansatz und Prototyping

• Die UI wurde mit Typescript und Tailwind umgesetzt, wobei Website-Design und Entwicklung parallel vorangetrieben wurden
• Gewählt wurde ein Prototyping-Ansatz direkt in der Produktionsumgebung, um neue Ideen und Funktionserweiterungen leicht abzuleiten
• Bei Bedarf wurden zusätzlich externe Mockup-Tools wie Balsamiq genutzt, um Konzepte zu konkretisieren

Fazit und künftige Verbesserungen

• Aktuell befindet sich das Projekt noch in einer frühen MVP-Phase, und es sind auch künftig zahlreiche Verbesserungen nötig
• Es wird gehofft, dass Nutzerinnen und Nutzer die neue UX von PostHog.com genießen und beim Erkunden der Website auch Spaß haben
• Eine technische Dokumentation zur Funktionsweise der Website wird separat bereitgestellt