स्वाइप फ़ाइल से सिस्टम तक: वेबसाइट उदाहरण जो स्केल करते हैं

Summary

जिस क्षण आप एक से अधिक ग्राहकों के लिए ज़िम्मेदार होते हैं, आपके वेबसाइट उदाहरणों का उपयोग करने का तरीका बदलना पड़ता है। सेव किए गए स्क्रीनशॉट का फ़ोल्डर पहली पिच के लिए काम करता है और तीसरी तक विफल हो जाता है, क्योंकि असली मूल्य कभी छवि नहीं था—यह वह पैटर्न है जिसे आप उद्योगों में ले जा सकते हैं। यह लेख एक उदाहरण अभ्यास बनाने के तीन चरणों के बारे में बताता है: उदाहरणों को दिखाने से पहले उनका अनुवाद करना, उन्हें एक डी-पहचान वाली पैटर्न लाइब्रेरी में संहिताबद्ध करना, और उन्हें फीडबैक लूप में बदलना जो हर लॉन्च के साथ बेहतर होता है। साथ ही, यह सिंगल-सीटीए नियम के आलसी संस्करण के खिलाफ तर्क देता है, जो कई दर्शकों की सेवा करने वाली एजेंसी साइटों पर विफल हो जाता है। लक्ष्य एक ऐसी प्रक्रिया है जो स्टाफ टर्नओवर से बची रहती है और आपके स्वाद से कम, अधिक नहीं, पूछती है।

आपके बुकमार्क में कहीं "inspo" नाम का एक फ़ोल्डर है और उसमें बहुत सारे टैब हैं। आप हर क्लाइंट किकऑफ़ के लिए वेबसाइट उदाहरण इकट्ठा करते हैं, सबसे मजबूत उदाहरणों को बोर्ड पर लगाते हैं, और फिर मीटिंग में अनुवाद करने में समय बिताते हैं: "नहीं, लेआउट नहीं। जिस तरह से वे समझाते हैं कि वे क्या करते हैं।" वह अनुवाद ही वास्तविक कौशल है, लेकिन यह आपके दिमाग में अटका है। जिस दिन एजेंसी आपको दूसरा खाता देती है, और फिर तीसरा, तरकीब "सर्वोत्तम उदाहरण जानना" नहीं रह जाती और "इसे दोहराने योग्य बनाना" बन जाती है। यदि आपने एक जूनियर डिज़ाइनर को दो असंबंधित ग्राहकों के लिए लगभग समान सेक्शन बनाते देखा है, क्योंकि आपने उन्हें केवल वही उदाहरण दिखाया था, तो आप समस्या जानते हैं। यह आपके उदाहरण अभ्यास को आपकी एजेंसी के साथ बड़ा करने के लिए एक मार्गदर्शिका है—पहली जीत से लेकर स्केल तक—बिना इसे धर्म में बदले।

पहला ग्राहक: प्रस्तुत करने से पहले अनुवाद करें

प्रति ग्राहक तीन उदाहरण चुनें, और उनमें से कोई भी दिखाने से पहले, प्रत्येक के लिए एक वाक्य लिखें: यह उदाहरण किस पैटर्न में योगदान देता है, और ग्राहक को किसे अनदेखा करना चाहिए? शुरुआती चरण की प्रवृत्ति इकट्ठा करने की होती है; सबसे सस्ता समाधान चयन है। एक अच्छी तरह से चुना गया Calendly होमपेज हेडलाइन में परिणाम का नाम देने के पैटर्न में योगदान देता है—"बिना आगे-पीछे के ईमेल के मीटिंग शेड्यूल करें"—जबकि ग्राहक को शांत करने वाली सफेद पृष्ठभूमि को अनदेखा करने के लिए कहता है। Linear का हीरो एक अलग सबक सिखाता है: फोल्ड के ऊपर के हर तत्व का एक काम होता है, इसलिए उदाहरण तब भी उपयोगी रहता है जब आपका ग्राहक सॉफ्टवेयर से दूर कुछ बेचता है। उन दो अनुवादों को मीटिंग से पहले लिख लें। यदि आप दूसरा वाक्य नहीं लिख सकते, तो उदाहरण सजावट है, सबूत नहीं। यह उनका कंकाल चुराने वाली चाल है, लेकिन यह केवल लिखे जाने के बाद ही एक टीम कौशल बनती है।

मान लीजिए ब्रीफ एक क्षेत्रीय लॉजिस्टिक्स कंपनी है जिसके खरीदार वेयरहाउस मैनेजर हैं। आपकी पहली प्रवृत्ति तीन लॉजिस्टिक्स-उद्योग साइटें खींचने की है; इसके बजाय, आउटकम-फर्स्ट हेडलाइन के लिए Calendly खींचें, एक एक्शन के लिए प्रतिबद्ध पेज के लिए Notion (इसका "Get Notion free" CTA), और किसी भी उद्योग से कुछ बदसूरत-लेकिन-जानकारीपूर्ण ट्रैकिंग पेज। मीटिंग में कहें: "Calendly एक लॉजिस्टिक्स कंपनी नहीं है। जो हिस्सा हम उधार ले रहे हैं वह यह है कि हेडलाइन उपयोगकर्ता द्वारा फीचर पढ़ने से पहले घर्षण को दूर करती है। Notion का मूल्य संयम है: एक स्पष्ट क्रिया।" आप देखेंगे कि ग्राहक पैरलैक्स प्रभाव माँगना बंद कर देते हैं और हेडलाइन के बारे में बहस करने लगते हैं। यही पूरी बात है—उदाहरणों ने टेम्पलेट के रूप में नहीं, बल्कि सोचने के उपकरण के रूप में काम किया।

पाँचवाँ ग्राहक: आवर्ती ब्लॉक को संहिताबद्ध करें

जब आपने कुछ साइटें लॉन्च कर दी हैं, तो एक डी-पहचान वाली पैटर्न लाइब्रेरी शुरू करें। स्क्रीनशॉट का एक और फ़ोल्डर नहीं—सादे-भाषा नामों के साथ आवर्ती बिल्डिंग ब्लॉक का एक दस्तावेज़: "आउटकम हेडलाइन," "वन-जॉब हीरो," "प्रूफ़ सैंडविच," "ट्रस्ट पेज।" उद्देश्य ब्रांडिंग को हटाते हुए सिद्धांत को पकड़ना है, ताकि टीम इसे दूसरे ग्राहक के रूप को दोहराए बिना पुन: उपयोग कर सके। वही SaaS उदाहरण लगातार प्रशंसा पाने का कारण दृश्य चमक नहीं बल्कि संरचना है: शीर्ष पर एक स्पष्ट मूल्य प्रस्ताव, एक केंद्रित फोल्ड के ऊपर वाला सेक्शन, एक प्राथमिक क्रिया। एक पैटर्न लाइब्रेरी उस संरचना को एक बार कैप्चर करती है और इसे अगले रीडिज़ाइन तक जीवित रहने देती है। जब कोई नया खाता आता है, तो आप इंटरनेट खोजने से पहले लाइब्रेरी खोजते हैं। यह बजट वार्तालाप को बदल देता है, क्योंकि आप अब प्रेरणा नहीं खरीद रहे हैं; आप परीक्षण किए गए निर्णयों को लागू कर रहे हैं।

चरण	रखें	हटाएँ
पहले प्रोजेक्ट	3 काम करने वाले उदाहरण + क्यों-अनुवाद	विशाल स्वाइप फ़ाइल
कुछ लॉन्च	एक डी-पहचान वाली पैटर्न लाइब्रेरी	ऐसे उदाहरण जिन्हें लंबे बहाने की ज़रूरत है
स्केल पर	फीडबैक लूप के साथ एक जीवित लाइब्रेरी	तीन साल पुराने बिना संस्करण वाले स्क्रीनशॉट

एक बुटीक अकाउंटिंग फर्म के माध्यम से काम करें: डिज़ाइनर को "ये पाँच अकाउंटिंग वेबसाइटें हैं" सौंपने के बजाय, उन्हें लाइब्रेरी कार्ड दें "ट्रस्ट पेज पैटर्न: हम कौन हैं, ग्राहक हमें काम पर रखने से क्या टालता है, वरिष्ठता का प्रमाण, एक अगला कदम।" डिज़ाइन को अभी भी मानवीय दृष्टि की आवश्यकता है, लेकिन निर्णय पहले ही हो चुके हैं। आप उस ग्रे-सूटेड लेआउट से भी बचते हैं जिसे हर अकाउंटिंग फर्म कॉपी करती है, क्योंकि आपका पैटर्न रंग के बारे में कुछ नहीं कहता। सबसे अच्छे स्रोत शायद ही कभी एक ही उद्योग के होते हैं; जानबूझकर अन्य उद्योगों से वेबसाइट उदाहरण उधार लें, और पैटर्न लाइब्रेरी का उपयोग यह रखने के लिए करें कि क्या स्थानांतरित होता है।

बीसवाँ ग्राहक: लाइब्रेरी को फीडबैक लूप दें

हर लॉन्च के बाद एक छोटा ऑडिट चलाएँ और निष्कर्षों को लाइब्रेरी में वापस फीड करें। अधिकांश टीमें "जो भी खाली है वह पिछले साल के टेम्पलेट को तब तक अपडेट करता है जब तक कोई शिकायत न करे" पर रुक जाती हैं। स्केल वाला कदम हर लाइव साइट को आपके पैटर्न के परीक्षण के रूप में मानना है। ऑडिट के लिए फैंसी टूल्स की आवश्यकता नहीं है: लॉन्च के दिन, सेक्शन को एक अपरिचित ग्राहक की नज़र से देखें; एक सप्ताह बाद, फोन का जवाब देने वाले से पूछें कि आगंतुक अभी भी कौन से प्रश्न पूछते हैं; एक महीने बाद, जाँचें कि कौन से CTA वास्तव में क्लिक किए जाते हैं। आप पाएँगे कि कुछ प्रिय पैटर्न कभी अपनी जगह नहीं कमाते—उन्हें हटा दें। यह एक ऐसे ग्राहक की तरह ऑडिट करने की आदत है, जिसे आपकी परवाह नहीं है, लेकिन संग्रह पर ही लागू: आप अपने उदाहरणों का ऑडिट कर रहे हैं, न कि केवल ग्राहक के पेज का।

एक पेशेवर-सेवा ग्राहक लें जिसकी पुरानी साइट ने "हमारे साथ काम करें" क्रिया को About पेज के पीछे छिपा दिया था। पैटर्न लाइब्रेरी का "वन-जॉब हीरो" कार्ड अगले डिज़ाइनर को बताता है कि क्रिया को फोल्ड के ऊपर रखें। लॉन्च के बाद, आप देखते हैं कि भर्ती दर्शक बाउंस करते रहते हैं। यह पैटर्न की विफलता नहीं है; यह सबूत है कि यह पेज दो दर्शकों की सेवा करता है, और लाइब्रेरी को "मल्टी-ऑडियंस" संस्करण की आवश्यकता है। एक नोट जोड़ें, पुराने कार्ड को "एकल-दर्शक पृष्ठों के लिए" चिह्नित करें, और अगले समान ग्राहक गलती नहीं दोहराएगा।

विरोधाभासी अध्याय: सिंगल-सीटीए आज्ञा को शाब्दिक रूप से न लें

अब प्रतिक्रिया। बहुत सारे SaaS उदाहरण लेख आपको बताएँगे कि प्रत्येक पेज पर एक कॉल-टू-एक्शन होना चाहिए, और Notion का एकल "Get Notion free" सबूत के रूप में दिखाया जाता है। वह सलाह उत्पाद पृष्ठों के लिए सही है जिनका पूरा काम एक साइनअप है; यह उस क्षण गलत हो जाती है जब आप कई दर्शकों वाले ग्राहक के लिए निर्माण करते हैं। "एक CTA" को कानून के रूप में मानने से एजेंसी साइटें बनती हैं जहाँ एक अभ्यास का भर्ती पृष्ठ, प्रेस संपर्क, और परामर्श फ़ॉर्म सभी एक बटन के लिए प्रतिस्पर्धा करते हैं। नियम का बचाव योग्य संस्करण "प्रति पेज प्रति दर्शक एक प्राथमिक लक्ष्य" है, न कि "हमेशा एक बटन।" वही उदाहरण जो हर सेक्शन को एक ही क्रिया पर लक्षित करता है, एक ऐसे पेज के रूप में पढ़ा जा सकता है जो आगंतुक से वास्तव में एक ही चीज़ करने के लिए कहता है—यही चुराने लायक सिद्धांत है। एक विश्वविद्यालय या परामर्श फर्म को संभावित ग्राहकों के लिए एक प्राथमिक क्रिया चाहिए और संकाय के लिए दूसरी; एक सिंगल CTA दोनों को छिपा देता है। सिद्धांत रखें, स्क्रीनशॉट छोड़ें।

संग्रह करने में कम समय, निर्णय लेने में अधिक समय

इनमें से किसी के लिए बड़ी स्वाइप फ़ाइल की आवश्यकता नहीं है। इसके लिए आपके द्वारा सहेजी गई अधिकांश चीज़ों को हटाना और यह लिखना आवश्यक है कि बचे हुए क्यों मायने रखते हैं। चरण सरल हैं: प्रस्तुत करने से पहले अनुवाद करें; जो काम करता रहता है उसे संहिताबद्ध करें; जो आपने लॉन्च किया है उसका ऑडिट करें; उन आज्ञाओं को अनदेखा करें जो ग्राहक के अनुकूल नहीं हैं। एक एजेंसी का उदाहरण अभ्यास उसी तरह परिपक्व होना चाहिए जैसे उसके प्रोजेक्ट होते हैं—हाथ से निर्मित से दोहराने योग्य से आत्म-सुधार तक। फ़ोल्डर अभी भी मौजूद है। यह अभी काफी छोटा है।