विषय
- परियोजना के लक्ष्य क्या थे?
- आपने क्या UX शोध किया?
- काम का बंटवारा कैसे हुआ?
- आपने संचार को कैसे संभाला?
- समय और बजट की कमी को प्रबंधित करने के लिए आपने अपनी प्रक्रिया को कैसे अनुकूलित किया?
- आप परियोजना के मूल डिजाइन मूल्यों को कैसे चित्रित करेंगे?
- ऐसा लगता है कि आप बहुत अच्छे से चल रहे हैं। इसने परियोजना को कैसे प्रभावित किया?
- आपने किन तकनीकों का उपयोग किया?
- जॉन ने इसे 'एक ड्रीम प्रोजेक्ट के सबसे करीब' के रूप में वर्णित किया। ऐसा कैसे?
- आपने एक पैटर्न लाइब्रेरी कैसे संकलित की?
- आपने पुस्तकालय क्यों साझा किया?
- आपने अल्फा रिलीज क्यों किया?
- आपने पुरानी साइट से सामग्री माइग्रेशन को कैसे संभाला?
- क्या इस प्रोजेक्ट में थीम सॉन्ग था?
अमेरिका के लिए बे एरिया गैर-लाभकारी संगठन कोड अमेरिकी सरकार की डिजिटल सेवाओं को सुंदर, सरल और उपयोग में आसान बनाने में मदद करता है। यूके स्थित यूएक्स एजेंसी क्लियरलेफ्ट के साथ साझेदारी में आयोजित इसकी हालिया साइट ओवरहाल ने समान मूल्यों को अपनी ऑनलाइन उपस्थिति में लाया। क्लियरलेफ्ट में, जॉन आइज़लवुड ने विज़ुअल डिज़ाइन को संभाला, फ्रीलांसर अन्ना डेबेनहम ने फ्रंटएंड बिल्ड का ध्यान रखा, जबकि जेरेमी कीथ ने काम का निरीक्षण किया और जावास्क्रिप्ट लिखा। CfA में, UX के प्रचारक Cyd Harrell ने IA को संभाला, CTO माइक मिगुर्स्की ने परिवर्तनों को लागू किया, और वरिष्ठ विपणन प्रबंधक डाना ओशिरो ने परियोजना का प्रबंधन किया।
परियोजना के लक्ष्य क्या थे?
माइक मिगुर्स्की: हमारा प्रारंभिक अधिदेश अमेरिका की वेबसाइट के लिए पुराने, अजीब कोड को किसी ऐसी चीज़ से बदलना था जो अधिक आधुनिक दिखती थी। जैसा कि हमने 2013 की गर्मियों में परियोजना पर काम करना शुरू किया, हमने तीन लक्ष्यों की पहचान की जो परियोजना को बेहतर बनाने में मदद करेंगे। सबसे पहले, हमारी सरकार और गीक समुदायों की प्रेरणाओं पर Cyd Harrell के शोध ने सुझाव दिया कि हमें साइट पर शब्दजाल को दर्शकों के लिए और अधिक सीधे लिखे गए शब्द से बदलना चाहिए।
दूसरा, GOV.UK के लॉन्च ने सरकारी वेबसाइटों की भूमिका पर नया ध्यान केंद्रित किया और जब हमने शहर और काउंटी भागीदारों को सलाह दी तो हम कुछ सार्थक प्रत्यक्ष अनुभव प्राप्त करना चाहते थे। अंत में, हमने महसूस किया कि विभिन्न पहलों के लिए हमारे पास असंगत दिखने वाली साइट डिज़ाइनों की एक बड़ी संख्या थी, और हम भविष्य की परियोजनाओं का निर्माण करते समय लचीले, मोबाइल-तैयार पैटर्न की एक लाइब्रेरी चाहते थे।
आपने क्या UX शोध किया?
Cyd Harrell: चूंकि हम अपने समग्र जुड़ाव मॉडल या भागीदारी की वास्तुकला पर भी काम कर रहे थे, इसलिए हमने वेबसाइट रीडिज़ाइन की तुलना में अनुसंधान की एक अधिक उत्पादक शैली की। मैंने हमारे विभिन्न कार्यक्रमों में लगभग ४० वर्तमान, भूतपूर्व और भावी प्रतिभागियों के साथ साक्षात्कार किए। मैंने हमारे साथ काम करने के लिए लोगों की प्रेरणाओं, रुचि से पूर्ण जुड़ाव के माध्यम से उनके मार्ग और उनकी यात्रा में वेबसाइट की भूमिका की जांच की।
सबसे दिलचस्प खोज, जो कि नई वेबसाइट डिजाइन के अधिकांश हिस्से में है, अपने पेशेवर कौशल को अच्छे के लिए उपयोग करने की एक अत्यंत तीव्र इच्छा थी। लोक सेवकों और वाणिज्यिक प्रौद्योगिकीविदों को इससे अलग-अलग तरीकों से अवरुद्ध किया जाता है, और अमेरिका की गतिविधियों के लिए कोड उन ब्लॉकों को पार करने के तरीके प्रदान करता है। इसलिए लोगों को अभिनय में मदद करने के लिए हमारी वेबसाइट को उन्मुख करना और उनके कार्यों के प्रभाव को जल्द से जल्द देखना सर्वोच्च प्राथमिकता बन गई। जैसे-जैसे हम साइट को विकसित करना जारी रखेंगे, आप इसे सुदृढ़ होते देखेंगे।
काम का बंटवारा कैसे हुआ?
जेरेमी कीथो: आमतौर पर जब क्लियरलेफ्ट किसी प्रोजेक्ट में शामिल होता है, तो हम चीजों के यूएक्स साइड, विजुअल डिजाइन और कभी-कभी फ्रंटएंड डेवलपमेंट को कवर करते हैं (हम जानबूझकर बैकएंड डेवलपमेंट नहीं करना चुनते हैं)। यह प्रोजेक्ट थोड़ा अलग था: अमेरिका के लिए कोड पहले से ही एक बड़ी सामग्री ऑडिट के माध्यम से किया गया था और उपयोगकर्ता अनुभव के माध्यम से काम करना चाहता था। इसने हमें विजुअल डिजाइन और फ्रंटएंड डेवलपमेंट करने के लिए छोड़ दिया। जैसे-जैसे काम आगे बढ़ा, यूएक्स या सूचना वास्तुकला से संबंधित किसी भी मुद्दे को सहयोगात्मक रूप से संभाला गया।
आपने संचार को कैसे संभाला?
जेके: हमारे पास हर दिन एक त्वरित 'स्टैंड-अप' सम्मेलन कॉल था। हमारे लिए, कॉल दिन के अंत में थी: शाम 5.30 बजे। सैन फ्रांसिस्को में सुबह 9.30 बजे थे, जैसे लोग अमेरिका के कार्यालय के लिए कोड में शामिल हो रहे थे। यह आश्चर्यजनक रूप से अच्छा काम किया। अगर हमें उनसे कुछ चाहिए होता, तो हम उन्हें अपने दिन के अंत में बता देते; तो उनके पास उसे पूरा करने के लिए अपना पूरा दिन होगा, इसलिए यह हमारा इंतजार कर रहा था जब हम अगले दिन काम पर आएंगे। ये ट्रान्साटलांटिक चैट हमेशा अच्छी और छोटी होती थीं। वे शायद ही कभी 10 या 15 मिनट से अधिक समय तक चले। जो कुछ हो रहा था उस पर गति करने के लिए सभी के लिए यह काफी लंबा था। निरंतर संचार का वह स्तर बिल्कुल सही था: रास्ते में कोई अप्रत्याशित आश्चर्य या 'बड़े खुलासे' नहीं हुए।
समय और बजट की कमी को प्रबंधित करने के लिए आपने अपनी प्रक्रिया को कैसे अनुकूलित किया?
जेके: एक सीमित समय और सीमित बजट पर काम करने का मतलब था कि निर्णय तेजी से होने चाहिए: हमारे पास हर चीज पर बहुत विस्तार से विचार करने की विलासिता नहीं थी।इसका मतलब था कि विचारों को यथासंभव शीघ्रता से संप्रेषित करने की आवश्यकता थी। कभी-कभी वह कागज पर सिर्फ एक स्केच होता था। यदि अधिक विवरण की आवश्यकता होती, तो फोटोशॉप चलन में आ जाता। यदि यह एक इंटरेक्शन प्रश्न था, तो हम जल्दी से कुछ कार्यशील कोड एक साथ रखने का प्रयास करेंगे।
कम समय के पैमाने का मतलब यह भी था कि डिजाइन और विकास को साथ-साथ होना था: विकास शुरू करने से पहले डिजाइनों को पूरी तरह से समझने के लिए इंतजार करने के लिए पर्याप्त समय नहीं था। मुझे लगता है कि इसका सकारात्मक प्रभाव पड़ा। फ़ोटोशॉप में डिज़ाइन की खोज की गई, लेकिन ब्राउज़र में अंतिम रूप दिया गया।
जॉन आइज़लवुड: अजीब तरह से ब्राइटन और सैन फ्रांसिस्को के बीच नौ समय क्षेत्र भेष में एक आशीर्वाद थे। दैनिक स्टैंड-अप ने हमें उस दिन समाप्त किए गए कार्य के बारे में बात करने की अनुमति दी। मूल रूप से, प्रत्येक दिन अंत में एक प्लेबैक के साथ एक स्प्रिंट था, इसलिए हम हर दिन 5.30 बजे के लिए डिजाइन, विकास और पुनरावृत्ति कर रहे थे। इसका मतलब कोई ईमेल टेनिस नहीं, कोई बेसकैंप उपन्यास नहीं था, और बहुत कम परियोजना प्रबंधन था क्योंकि हर कोई पूरी तरह से अद्यतित था कि हर कोई क्या काम कर रहा था। सामग्री साझा करने, पृष्ठ विवरण आरेख आदि के लिए Google डॉक्स के साथ, हमने टू डू, डूइंग एंड डन के कानबन-शैली के दृष्टिकोण के लिए ट्रेलो का उपयोग करने के लिए चुना।
आप परियोजना के मूल डिजाइन मूल्यों को कैसे चित्रित करेंगे?
जावेद: CfA टीम के पास पहले से ही एक स्टेटसाइड एजेंसी द्वारा कुछ ब्रांडिंग कार्य किया गया था, जिससे साइट की दृश्य भाषा के लिए टोन सेट करने में मदद मिली। जैसा कि हमने वेब के लिए इस भाषा को विकसित किया है, हमने सीएफए द्वारा एक संगठन के रूप में उपयोग किए जाने वाले सिद्धांतों का पालन किया और यूआई के मजबूत, बोल्ड पैलेट, बड़ी टाइपोग्राफी और समग्र सादगी के माध्यम से उनका प्रतिनिधित्व किया। हम चाहते थे कि साइट शक्तिशाली और संचारी, देशभक्तिपूर्ण और सीएफए आंदोलन में रुचि रखने वाले किसी भी और सभी से पहुंच योग्य हो।
मिमी: कार्य को संचालित करने वाले तीन मूल्य खुलेपन, मुद्रा और आशावाद थे। विचार यह है कि यह एक सुलभ, स्वागत योग्य स्थान है जो अपनी गुप्त चटनी साझा करता है, कि साइट अपनी सामग्री के संदर्भ में अद्यतित है और यह वास्तव में कैसे काम करती है, और यह कि नागरिक और सरकारें चीजों को बेहतर बनाने के लिए मिलकर काम कर सकती हैं।
ऐसा लगता है कि आप बहुत अच्छे से चल रहे हैं। इसने परियोजना को कैसे प्रभावित किया?
जेके: जहां जॉन एक पूर्णकालिक क्लियरलेफ्ट कर्मचारी है, वहीं अन्ना एक फ्रीलांसर है। लेकिन इस परियोजना के लिए, मैंने जोर देकर कहा कि वह न केवल क्लियरलेफ्ट कार्यालय में आए, बल्कि यह कि वह जॉन के साथ कंधे से कंधा मिलाकर बैठी थी। उन्होंने एक दूसरे को नहीं मारा। वास्तव में, मुझे लगता है कि उन्हें बहुत मज़ा आया। परियोजना के अंत तक, अन्ना ने हमें चाय बनाने के अपने विवादास्पद दृष्टिकोण के गुणों के बारे में लगभग आश्वस्त कर लिया था, जिसे teamethod.co.uk पर प्रलेखित किया गया था। कोड फॉर अमेरिका में हमारे समकक्षों को ट्रान्साटलांटिक सम्मेलन कॉल के साथ दिन का अंत करना हमेशा अच्छा था। हम जिन तीन लोगों के साथ काम कर रहे थे, उनके साथ काम करने में बेहद खुशी हुई।
अन्ना देबेनहम: हम समान आधार पर थे - कोड फॉर अमेरिका के लोग वास्तव में अपना सामान जानते हैं, इसलिए वे अविश्वसनीय रूप से उपयोगी प्रतिक्रिया देने और समस्याओं को पूर्ववत करने में सक्षम थे। सिस्टम का निर्माण प्रक्रिया का सिर्फ एक हिस्सा था। यह वास्तव में यह निर्धारित करने वाला है कि परियोजना कितनी सफल है, यह इस बात पर आधारित होगा कि अमेरिका के लिए कोड को महीनों और वर्षों में बनाए रखना और उस पर निर्माण करना कितना आसान है।
आपने किन तकनीकों का उपयोग किया?
विज्ञापन: हमें Sass के बजाय CSS फ़ाइलें वितरित करने के लिए कहा गया था, लेकिन हमने अभी भी विकास के दौरान Sass का उपयोग px मानों को रिम्स में बदलने और रंग चर संग्रहीत करने जैसी चीज़ों में मदद के लिए किया था। प्रोटोटाइप टेम्प्लेट जेकेल के साथ बनाए गए थे, और इसका उपयोग लाइव साइट पर किया जा रहा था क्योंकि पृष्ठों को डेटाबेस के बजाय स्थिर HTML फ़ाइलों के रूप में संग्रहीत किया जाता है, जिससे अन्य लोगों के लिए सहयोग करना आसान हो जाता है। कार्यों के प्रबंधन के लिए, हमने दीवार पर सामान चिपकाने के बजाय ट्रेलो का उपयोग किया, ताकि किसी भी बिंदु पर कोई भी डुबकी लगा सके और देख सके कि क्या प्रगति हो रही है। जॉन ने डिजाइन के लिए फोटोशॉप का इस्तेमाल किया। इसने मुझे बहुत शपथ दिलाई, इसलिए वह अब फोटोशॉप का उपयोग नहीं कर रहा है और इसके बजाय स्केच का उपयोग कर रहा है।
डिवाइस परीक्षण और बग फिक्सिंग के लिए, घोस्टलैब एक बड़ी मदद थी। मैं प्रोटोटाइप में स्थानीय रूप से परिवर्तन कर सकता था, डेस्कटॉप पर ब्राउज़र को रीफ्रेश कर सकता था, और यह स्वचालित रूप से सभी उपकरणों पर ब्राउज़र को रीफ्रेश कर देगा। हमने प्रोटोटाइप के लिए पहले दिन से गिटहब का इस्तेमाल किया, और परियोजना के अंत में, वहां बग दर्ज किए गए। अब यह वह जगह है जहां सभी साइट फ़ाइलें रहती हैं, इसलिए परिवर्तन करना आसान है।
जॉन ने इसे 'एक ड्रीम प्रोजेक्ट के सबसे करीब' के रूप में वर्णित किया। ऐसा कैसे?
जावेद: मुझे लगता है कि यह निरंतर संवाद का संयोजन है, साथ ही खुली और ईमानदार प्रतिक्रिया देने वाला ग्राहक - मेरे लिए - किसी भी परियोजना की सफलता की आधारशिला है। दैनिक स्प्रिंट ने सब कुछ केंद्रित और ट्रैक पर रखा, और सीएफए के लोग ग्रहणशील थे, कार्य करने में तेज थे, और जानते थे कि वे किस बारे में बात कर रहे थे। यह दुख की बात नहीं है कि वे ऐसे लोगों का एक बहुत अच्छा समूह हैं जो एक अच्छे कारण के लिए अच्छा काम करते हैं। कुल मिलाकर यह एकदम सही मिश्रण था।
विज्ञापन: कोड फॉर अमेरिका ने हम पर भरोसा किया कि हम वितरित करें, और थोड़ा प्रयोग करें - वे विचारों के लिए बहुत खुले थे। इससे यह भी मदद मिली कि उन्हें सभी डिज़ाइन पसंद आए, और हमारे सेंस ऑफ ह्यूमर को साझा किया!
आपने एक पैटर्न लाइब्रेरी कैसे संकलित की?
विज्ञापन: कोड फॉर अमेरिका ने हमें एक ब्रांड स्टाइल गाइड भेजा है जिसे उन्होंने हाल ही में तैयार किया था। जब जॉन ने टेम्प्लेट का मज़ाक उड़ाना शुरू किया, तो मैंने इसके माध्यम से चुना और कुछ चीजें निकालीं जिनकी हमें वेबसाइट के लिए आवश्यकता थी: फोंट, रंग, आइकन और चित्र। जब हम मॉकअप बनाने के लिए तैयार थे, तो मैंने डिज़ाइन को पैटर्न में विभाजित किया - सामग्री के अलग-अलग मॉड्यूल - और इनमें से प्रत्येक का निर्माण किया और विभिन्न उपकरणों पर इसका परीक्षण किया। हमारे दैनिक स्टैंड अप के दौरान, हम देखेंगे कि कौन से नए पैटर्न बनाए गए थे और उन्हें एक साथ ब्राउज़र में देखें।
यह अच्छा था क्योंकि पैटर्न के साथ कोड होने का मतलब था कि कभी-कभी अमेरिका के लिए कोड हमें HTML के साथ-साथ डिज़ाइन पर तकनीकी प्रतिक्रिया देगा। आधे रास्ते में, मैंने डिवाइस परीक्षण में मदद करने के लिए पैटर्न लाइब्रेरी के लिए एक 'पैचवर्क' दृश्य जोड़ा ताकि हम कंटेनर में लपेटे जाने के बजाय पैटर्न की पूरी चौड़ाई पर जांच कर सकें।
आपने पुस्तकालय क्यों साझा किया?
विज्ञापन: करने के लिए एक अच्छी बात होने के अलावा, क्यों नहीं? आखिरकार, यदि आपकी वेबसाइट सार्वजनिक है, तो CSS और HTML पहले से ही स्रोत देखकर उपलब्ध हैं। पुस्तकालय न केवल दूसरों के लिए एक महान शिक्षण उपकरण है, इसे गिटहब पर डालने का मतलब है कि लोगों के लिए बग फिक्स या सुधार का सुझाव देने के लिए एक जगह है। साथ ही, यह जानना कि कोड स्पष्ट रूप से दिखाई देने वाला है, बेहतर, अधिक विचारशील मार्कअप लिखने के लिए एक अच्छा प्रोत्साहन है।
आपने अल्फा रिलीज क्यों किया?
मिमी: हमने कुछ कारणों से मुख्य साइट के लॉन्च से छह सप्ताह पहले अल्फा रिलीज करना चुना। सबसे पहले, हम यह सुनिश्चित करना चाहते थे कि हमारे समुदाय को पुरानी साइट को बदलने से पहले नई साइट को देखने और एक्सप्लोर करने का मौका मिले, और सुधार और परिवर्धन भेजने के लिए गिटहब पर सामग्री का लाभ उठाएं। दूसरा, एक संगठन के रूप में, हम अपने सरकारी भागीदारों के लिए चुस्त/दुबले विकास के तरीकों के पीछे खड़े हैं और उस बात को चलाना चाहते हैं। इसके अलावा, जब आप इसे समय के साथ टुकड़े-टुकड़े कर सकते हैं तो स्विचओवर करना कम तनावपूर्ण होता है। अब भी, पुरानी साइट उपलब्ध है।
आपने पुरानी साइट से सामग्री माइग्रेशन को कैसे संभाला?
मिमी: सामग्री प्रवासन कार्य का सबसे बड़ा हिस्सा था। हमने विज़ुअल डिज़ाइन चरण में पहुंचने से महीनों पहले शब्दों को आगे बढ़ाना शुरू कर दिया, हमारे घटक फोकस को प्रतिबिंबित करने के लिए सरकारों और नागरिक वर्गों के लिए पृष्ठों को फिर से लिखना और सरल बनाना। Dana Oshiro, Cyd Harrell और मैंने आधा दर्जन 'पेज कल्ल्स' का आयोजन किया, जहां हमने सामग्री को छाँटा और सुव्यवस्थित किया, रीडायरेक्ट सेट किया, और नए पेज बनाए। इस विषय पर दाना का एक उत्कृष्ट ब्लॉग पोस्ट है, 'टेस्टिंग द अग्ली डकलिंग'।
एक बार क्लियरलेफ्ट का काम हो जाने के बाद, जनवरी का महीना शेष पृष्ठों को स्थानांतरित करने के लिए एक आक्रामक धक्का था। Dana ने इस काम में शेर के हिस्से का काम किया, Cyd और खुद से बहुत सारे कॉपी / पेस्ट प्रयास के साथ। यह एक ग्लैमरस काम नहीं था: हमें पुरानी साइट की स्टाइलशीट के लिए अनुकूलित मार्कअप को अलग करना था, रीडायरेक्ट को मैप करना था ताकि मौजूदा लिंक विफल न हों, छवियों और लिंक को स्थानांतरित करें, और लगातार दो साइटों के बीच लिंक का परीक्षण करें। थोड़ा सा पायथन कोड ने परीक्षण में मदद की, एक साझा स्प्रेडशीट ने हमें समन्वय करने में मदद की, और बड़ी संख्या में HTTP रीडायरेक्ट ने 404 को कम से कम आश्चर्यचकित कर दिया। अल्फा रिलीज के बाद, हमारे समुदाय ने मुद्दों और पुल अनुरोधों के माध्यम से पृष्ठ सामग्री को पूरा करने में हमारी सहायता की।
क्या इस प्रोजेक्ट में थीम सॉन्ग था?
जावेद: अजीब बात है आपको पूछना चाहिए। यह फिल्म है जिसमें कठपुतली हैं, मैट डेमन, और बहुत सारी शपथ। हमारे दिन तब तक शुरू नहीं हो सकते थे जब तक कि उस विशेष फिल्म का थीम सॉन्ग कम से कम एक बार फुल वॉल्यूम में नहीं बजाया जाता। अमेरिका के लिए कोड, हाँ भाड़ में जाओ!
