हमारी वेबसाइट ऑपरेटिंग सिस्टम जैसी क्यों दिखती है

• कई बड़ी टेक वेबसाइटों पर एक साथ कई पेज देखने की कोशिश करने पर टैब बाढ़ की समस्या पैदा हो जाती है
• PostHog.com ने भी ऐसी ही समस्या झेली, और इसे हल करने के लिए ऑपरेटिंग सिस्टम शैली का UI अपनाया
• नई संरचना में multitasking, window snapping, keyboard shortcuts जैसी कई इंटरैक्शन सुविधाएँ दी गई हैं
• विज़ुअल hierarchy और content separation, JSON-आधारित content management, customer database जैसी तकनीकी नवाचारों को लागू किया गया
• शुरुआत में यह थोड़ा अपरिचित लगा, लेकिन डेवलपमेंट और उपयोग का अनुभव सकारात्मक रूप से बदला और लचीलापन व विस्तार-क्षमता मिली

---

समस्या: टेक वेबसाइटों में टैब बाढ़

• कई बड़े तकनीकी वेबसाइटों पर एक साथ कई पेज देखने के लिए CMD + क्लिक करके कई नए टैब खोलने पड़ते हैं
• एक जैसे favicon और मिलते-जुलते डिज़ाइन की वजह से हर टैब में फर्क करना मुश्किल हो जाता है
• PostHog.com ने भी सेवा के बढ़ने के साथ यही समस्या झेलनी शुरू की, और अधिक paid products के support व पेजों की संख्या बढ़ने से पहचान की समस्या और गंभीर हो गई

विकल्पों की तलाश और UI नवाचार

• मौजूदा marketing और documentation साइटों के scroll-केंद्रित interface, बड़े footer और जरूरत से ज्यादा खाली जगह पर सवाल उठे
• बिना मतलब scroll करवाने के बजाय बेहतर content consumption तरीके की जरूरत महसूस हुई
• इसे हल करने के लिए नए PostHog.com को इस तरह डिज़ाइन किया गया कि multitasking, कई लेखों को एक साथ देखना और स्क्रीन के भीतर स्वतंत्र रूप से घूमना संभव हो

ऑपरेटिंग सिस्टम की तरह काम करने वाली साइट

• नया UI window snapping, keyboard shortcuts, bookmark app जैसी सुविधाएँ लागू करता है
• ब्राउज़र के भीतर एक ऑपरेटिंग सिस्टम जैसा अनुभव देता है, जहाँ कई काम एक साथ किए जा सकते हैं
• उदाहरण के लिए, engineers के लिए newsletter पढ़ना, demo video देखना और game (Hedgehog mode) चलाना एक साथ संभव है

शुरुआती अनुकूलन और उपयोगकर्ता प्रतिक्रिया

• ऑपरेटिंग सिस्टम शैली का interface शुरुआत में कुछ लोगों को थोड़ा अपरिचित लग सकता है
• पारंपरिक ब्राउज़र पैटर्न से हटने पर दिमाग को शुरुआती असहजता हुई, लेकिन बार-बार इस्तेमाल के बाद यह स्वाभाविक लगा और सकारात्मक रूप से देखा जाने लगा
• अंदरूनी सहकर्मियों ने भी इस नए अनुभव पर सकारात्मक प्रतिक्रिया दी, और यह उस स्तर तक पहुँच गया जहाँ पुराने तरीके पर लौटना मुश्किल लगता है

निर्माण प्रक्रिया और तकनीकी हाइलाइट्स

• Eli Kinsey के साथ Typescript और Tailwind के आधार पर UI को डिज़ाइन और डेवलप करते हुए साइट बनाई गई
• 5 साल के content को scalable तरीके से व्यवस्थित करने की प्रक्रिया में कई तकनीकी approaches तलाशे गए

प्रमुख तकनीकी बिंदु

• विज़ुअल hierarchy और content separation

  • सभी product pages को JSON file-आधारित तरीके से render किया जाता है
  • JSON सीधे page layout, content flow, feature-दर-feature competitor comparison, और अलग-अलग theme (light/dark mode) screenshots को नियंत्रित करता है
  • लंबे समय में इस संरचना को PostHog app के साथ साझा repository में ले जाकर single source of truth बनाने की योजना है

• theme और color skinning

  • light और dark mode को बनाए रखते हुए primary, secondary और tertiary colors जैसी कई themes को संतुलित रूप से लागू करने के तरीकों पर काम किया गया
  • इस अनुभव को बाद में अलग लेख में साझा करने की योजना है

• reference customer database

  • कोड के भीतर एक single customer record परिभाषित किया गया है, जिसमें product-दर-product usage status, customer quotes, और SVG logos (light/dark mode support सहित) की जानकारी रखी जाती है
  • इससे हर पेज पर अलग-अलग products से जुड़े quotes, नाम, फोटो और company logos को अपने-आप लाया जा सकता है, जिससे लचीलापन मिलता है

डेवलपमेंट तरीका और prototyping

• Typescript और Tailwind के साथ UI बनाते हुए साइट डिज़ाइन और डेवलपमेंट को एक साथ आगे बढ़ाया गया
• नए ideas निकालने और features बढ़ाने में आसानी के लिए production environment के भीतर prototyping का तरीका चुना गया
• जरूरत पड़ने पर Balsamiq जैसे बाहरी mockup tools का भी इस्तेमाल कर concepts को ठोस रूप दिया गया

निष्कर्ष और आगे के सुधार

• अभी यह शुरुआती MVP चरण में है, और आगे भी कई सुधारों की जरूरत है
• उम्मीद है कि उपयोगकर्ता PostHog.com के नए UX का आनंद लेंगे और साइट को explore करते हुए मज़ा महसूस करेंगे
• साइट कैसे काम करती है, इस पर तकनीकी दस्तावेज़ अलग से उपलब्ध कराया गया है