जब डिजाइन ट्रेव्लोका में इंजीनियरिंग से मिलता है

यह कोई साधारण प्रेम कहानी नहीं है।

नोट: यह डिज़ाइन और इंजीनियरिंग के बीच की बातचीत में से एक है। मैं Traveloka में डिजाइन और इंजीनियरिंग के बीच सभी इंटरैक्शन के एक छोटे स्पेक्ट्रम से बोल रहा हूं। और यह मेरी कहानी है।

समय बीतने के साथ, ट्रावेलोका को लगभग 6 साल हो गए। इस यात्रा में, हम मानते हैं कि हमारे पास बहुत सारे दृश्य बग हैं जो कि काफी समय से हैं, जैसे बटन के लिए नारंगी के विभिन्न शेड्स या कार्ड के बीच असंगत मार्जिन।

डिजाइन टीम ने हमारे मानक के विचलन वाले किसी भी नए दृश्य विसंगतियों को रोकने के लिए हमारी खुद की डिजाइन किट का निर्माण करके हमारी दृश्य भाषा को मानकीकृत करने के प्रयास की शुरुआत की। हमने कोशिश की, लेकिन किसी तरह यह समस्या कभी हल नहीं हुई। हमारे पास अपनी स्वयं की डिज़ाइन किट होने के बाद भी, हम अभी भी अपने उत्पादों पर उन विसंगतियों को देखते हैं।

दूसरी ओर, हमारे इंजीनियरों को अधिक कुशलता से काम करने की आवश्यकता है। वे पुन: उपयोग के लिए उसी घटक को खोजने के बजाय खरोंच से समान घटकों का निर्माण करना पसंद करते हैं। क्योंकि इन घटकों की खोज उनके वर्तमान वर्कफ़्लो में एक घर्षण है।

इन सभी समय, डिजाइन टीम और इंजीनियरिंग टीम एक दूसरे से संवाद किए बिना अपनी समस्या को हल करने की कोशिश कर रहे थे। इसने डिजाइन और इंजीनियरिंग की समस्या को हल करने के लिए एक साथ काम करने की समस्या पर सवाल उठाया, जिसका हम दोनों हर दिन सामना करते हैं। कौन जानता था कि डिजाइन और इंजीनियरिंग हाथ से चल सकते हैं और इस प्रक्रिया में प्यार बढ़ा सकते हैं?

वे पहली बार कब मिले थे?

वार्ता 2018 की शुरुआत में शुरू हुई जब इंजीनियरिंग टीम ने रिएक्ट नेटिव और रिएक्ट नेटिव वेब पर कुछ शोध किया (रिएक्ट नेटिव जावास्क्रिप्ट का उपयोग करके मोबाइल ऐप बनाने का एक ढांचा है)। जब यह शोध शुरू हुआ, तो डिजाइन टीम के वेब यूआई डेवलपर्स शामिल हुए।

प्रक्रिया के दौरान, इंजीनियरिंग टीम को क्रॉस-प्लेटफॉर्म विकास के लिए आधार के रूप में रिएक्ट नेटिव का उपयोग करने का विचार था। इसमें मोबाइल वेब का विकास शामिल है जिसमें वेब यूआई डेवलपर इस पर घटक बना सकते हैं।

जब यह पहल शुरू हुई, तो हम रिएक्ट नेटिव सीखने और इससे बाहर निकलने के लिए बहुत उत्साहित थे क्योंकि हम एक अधिक महत्वपूर्ण प्रभाव बना सकते हैं और कोड के एक स्रोत से सभी उपलब्ध प्लेटफॉर्म के लिए घटक बना सकते हैं। और यह वह जगह है जहाँ हम पहली बार एक दूसरे को जानते हैं।

प्यार कैसे बढ़ा?

हम कुछ समय बाद एक-दूसरे से मिले, लेकिन हमारे दिल में कुछ भी नहीं था। लेकिन, चिंगारी तब निकलती है जब हमारे पास यह इंटर्न होता है। यह सब एक आंतरिक परियोजना के रूप में सरल शुरू हुआ।

यह इंटर्न एक रिएक्टिव नेटिव इंजीनियर है और ऐसा कुछ भी बनाने के लिए सौंपा गया है जो डिजाइन और इंजीनियरिंग के बीच सहयोग को सुचारू कर सकता है। उन्होंने एक घटक पुस्तकालय, डिजाइनरों के लिए कुछ मन उड़ाने वाले स्केच प्लग बनाने और डिजाइन और इंजीनियरिंग के बीच अन्य सहयोग संभावनाओं पर शोध करना शुरू किया।

इसके अलावा, डिज़ाइन टीम के पास टोकन और घटकों के लिए कोड-आधारित एकल स्रोत (SSOT) को सत्य बनाने की भी पहल थी। इन दो आंदोलनों ने हमें इस मिशन पर सहयोग करने के लिए प्रेरित किया। यह वह जगह है जहां प्यार चिंगारी करता है, और हम मानते हैं कि हम एक साथ एक उज्जवल भविष्य में चल रहे हैं।

प्यार हमें कहाँ ले गया?

कई बार डेटिंग (पढ़ने: मिलने) के बाद, हम आखिरकार अपने रिश्ते को अगले स्तर पर ले जाने के लिए सहमत होते हैं। राह पर चलना आसान नहीं था, लेकिन हमारा मानना ​​था कि यह हमारे लिए सही है। एक दूसरे को समझना एक अच्छे रिश्ते की आवश्यक कुंजी है, है ना? और जब हमने सहयोग करने का निश्चय किया, तो हमने वही किया।

हमने यह समझने की शुरुआत की कि एक-दूसरे कैसे काम करते हैं। और बुरे सपने और बाधाओं से भरी इन रातों के बाद, हम आखिरकार बेहतर सहयोग की ओर बढ़ रहे हैं। डिजाइन और इंजीनियरिंग के बीच बेहतर सहयोग प्राप्त करने के लिए हमारी प्रतिबद्धताएं हैं:

1. कोड-आधारित डिजाइन प्रणाली।

डिजाइन और इंजीनियरिंग के बीच सहयोग काफी चुनौतीपूर्ण रहा है। डिजाइन और कोड के बीच का पुल पर्याप्त मजबूत नहीं है और इसने हमारे बीच काम को कठिन बना दिया है।

फिर हमें कोड-आधारित डिज़ाइन सिस्टम बनाने का विचार आया। हमने अपने डिज़ाइन के टोकन को जावास्क्रिप्ट में रखा, जो कि इंजीनियर के लिए उपयोग करने का सबसे आसान तरीका है, फिर भी डिजाइनर के लिए प्रबंधन के लिए अभी भी काफी सरल है।

हम डिजाइन और इंजीनियरिंग के मानक को पूरा करने वाले अपने स्वयं के दस्तकारी घटकों के निर्माण में सहयोग कर रहे हैं। उन घटकों का उपयोग हमारे डिजाइन पर स्थिरता स्थापित करने के लिए सभी प्लेटफार्मों पर किया जाएगा।

2. स्केच प्लग।

यह स्केच प्लग डिजाइन और कोड के बीच पुल की तरह काम करता है। डिज़ाइन पक्ष पर, यह सहयोग को आसान बनाता है क्योंकि डिजाइनरों को बार-बार समान घटकों को उत्पन्न करने की आवश्यकता नहीं होती है। यह डिजाइनर को मानकीकृत घटकों के आधार पर अपने उपयोगकर्ता इंटरफ़ेस का निर्माण करने में भी मदद करेगा।

इंजीनियरिंग की ओर, यह प्लगइन उपयोगकर्ता इंटरफ़ेस को उन कोडों में अनुवाद करेगा जो इंजीनियर द्वारा आसानी से लागू किया जा सकता है। इससे इंजीनियर के कार्य समय में कमी आएगी क्योंकि उन्हें पिछले डिज़ाइन के मौजूदा घटकों की तलाश करने की आवश्यकता नहीं है।

3. डिजाइन लिंटर और एकीकृत दृश्य परीक्षण।

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

4. डिजाइन प्रणाली प्रलेखन।

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

रालिस्टु ह्यु प्रतिति द्वारा चित्रण

इन सभी बेबी चरणों के साथ, हम मानते हैं कि हम एक दूसरे के बीच बेहतर भविष्य के सहयोग और एकीकरण कर सकते हैं। सहयोग से बेहतर उत्पाद बनाने की संभावनाएं भी खुलेंगी।

अंत में, किसी उत्पाद को डिजाइन करना सिर्फ इतना ही नहीं है कि उसे सुंदर और रोचक कैसे बनाया जाए। डिजाइन को त्रुटिपूर्ण बनाने के लिए इंजीनियरिंग के बहुत सारे प्रयास हैं। यह डिजाइन और इंजीनियरिंग के बीच सहयोग के महत्व को दर्शाता है; जैसा कि हम एक अच्छे उत्पाद के निर्माण में एक दूसरे के बिना नहीं रह सकते। जैसा कि स्टीव जॉब्स ने कहा,

“डिजाइन केवल ऐसा नहीं है जैसा दिखता है और जैसा महसूस करता है। डिजाइन का मतलब है यह कैसे काम करता है है।"