Mengapa situs web kami terlihat seperti sistem operasi

• Banyak situs web teknologi besar mengalami masalah ledakan tab saat perlu merujuk beberapa halaman sekaligus
• PostHog.com juga mengalami masalah serupa dan memperkenalkan UI bergaya sistem operasi untuk mengatasinya
• Dalam struktur baru, tersedia beragam fitur interaksi seperti multitasking, window snapping, dan shortcut keyboard
• Inovasi teknis seperti hierarki visual dan pemisahan konten, pengelolaan konten berbasis JSON, serta basis data pelanggan turut diterapkan
• Awalnya terasa asing, tetapi pengalaman pengembangan dan penggunaan berubah secara positif, sekaligus memperoleh fleksibilitas dan skalabilitas

---

Kesadaran masalah: ledakan tab di situs web teknis

• Di banyak situs web teknis berskala besar, ketika ingin merujuk beberapa halaman sekaligus, orang cenderung membuka banyak tab baru dengan CMD + klik
• Karena favicon yang sama dan desain yang mirip, sulit membedakan tiap tab
• PostHog.com juga mulai mengalami masalah yang sama seiring pertumbuhan layanan, dan dengan dukungan lebih banyak produk berbayar serta bertambahnya halaman, masalah sulit dibedakan ini makin parah

Mencari alternatif dan inovasi UI

• Mereka mulai mempertanyakan antarmuka berbasis gulir di situs pemasaran dan dokumentasi tradisional, footer yang besar, serta ruang kosong yang berlebihan
• Alih-alih mendorong gulir yang tidak bermakna, mereka menyadari perlunya cara konsumsi konten yang lebih baik
• Untuk mengatasinya, PostHog.com yang baru dirancang agar memungkinkan multitasking, membuka beberapa artikel sekaligus, dan berpindah dengan leluasa di dalam layar

Situs yang bekerja seperti sistem operasi

• UI baru ini menghadirkan fitur seperti window snapping, shortcut keyboard, dan aplikasi bookmark
• Seperti sistem operasi di dalam browser, pengalaman ini memungkinkan beberapa pekerjaan dilakukan secara bersamaan
• Sebagai contoh, pengguna bisa sekaligus melihat newsletter untuk engineer, menonton video demo, dan menjalankan game (mode hedgehog)

Adaptasi awal dan respons pengguna

• Antarmuka bergaya sistem operasi dapat terasa agak asing pada awalnya
• Karena keluar dari pola browser tradisional, otak bisa saja menolaknya, tetapi dengan pemakaian berulang pengguna menjadi terbiasa dan mulai memandangnya secara positif
• Rekan internal juga memberikan umpan balik positif terhadap pengalaman baru ini, hingga mencapai titik di mana sulit untuk kembali ke cara lama

Proses pembangunan dan sorotan teknis

• Bersama Eli Kinsey, mereka merancang dan mengembangkan UI berbasis Typescript dan Tailwind, lalu membangun situsnya
• Dalam proses memikirkan cara menata konten 5 tahun agar tetap skalabel, mereka mengeksplorasi berbagai pendekatan teknis

Poin teknis utama

• Hierarki visual dan pemisahan konten

  • Semua halaman produk dirender berbasis file JSON
  • JSON secara langsung mengendalikan layout halaman, alur konten, perbandingan pesaing per fitur, serta screenshot berbagai tema (mode terang/gelap)
  • Dalam jangka panjang, struktur ini direncanakan dipindahkan ke repositori yang dibagikan dengan aplikasi PostHog agar menjadi satu sumber informasi tunggal

• Tema dan skin warna

  • Mereka mempertahankan mode terang dan gelap, sambil memikirkan cara menerapkan beragam tema seperti warna utama, sekunder, dan tersier secara selaras
  • Pengalaman terkait hal ini rencananya akan dibagikan dalam tulisan terpisah di kemudian hari

• Basis data pelanggan referensi

  • Dengan mendefinisikan satu record pelanggan di dalam kode, mereka menyimpan informasi seperti status penggunaan per produk, kutipan pelanggan, dan logo SVG (mendukung mode terang/gelap)
  • Karena dapat otomatis memuat kutipan, nama, foto, dan logo perusahaan yang terkait dengan produk berbeda di tiap halaman, fleksibilitas pun terjamin

Cara pengembangan dan prototyping

• UI diimplementasikan dengan Typescript dan Tailwind, sambil merancang dan mengembangkan situs secara bersamaan
• Mereka memilih pendekatan prototyping langsung di lingkungan produksi agar ide baru dan perluasan fitur lebih mudah dilakukan
• Sesuai kebutuhan, alat mockup eksternal seperti Balsamiq juga digunakan bersamaan untuk mematangkan konsep

Kesimpulan dan arah perbaikan ke depan

• Saat ini produk tersebut masih berada pada tahap awal MVP, dan masih banyak perbaikan yang diperlukan ke depannya
• Mereka berharap pengguna menikmati UX baru PostHog.com, sekaligus merasakan kesenangan saat menjelajahi situs
• Dokumentasi teknis tentang cara kerja situs akan disediakan secara terpisah