परिष्कृत विज्ञापन प्रबंधन प्रणाली के लिए एक स्पष्ट डैशबोर्ड डिज़ाइन

मोबाइल एप्लिकेशन के मुद्रीकरण के लिए जटिल और तेजी से बढ़ते बाजार के साथ काम करता है। इसलिए, हमारी डिज़ाइन टीम को इंटरफ़ेस समाधान में अधिक स्वतंत्रता नहीं है, और कार्यात्मक आवश्यकताएं काफी सख्त हैं, और वे लगातार बदल रहे हैं।





Appodeal डैशबोर्ड उन अनुप्रयोगों में विज्ञापन के साथ काम करने के लिए एक एकल टूलबार है जो सुविधाजनक विश्लेषणात्मक तंत्र प्रदान करता है और जिसके माध्यम से आप जल्दी से प्रत्यक्ष भुगतान कर सकते हैं। मार्च 2018 में, डैशबोर्ड को नए डिजाइन में दो महत्वपूर्ण उपकरणों के साथ पूरक किया गया था: सेगमेंट (दर्शकों के कुछ हिस्सों को अलग करने के लिए) और प्लेसमेंट (उन स्थानों को निर्धारित करने के लिए जहां मोबाइल अनुप्रयोगों में विज्ञापन प्रदर्शित होते हैं)। और अक्टूबर में, हमने डिमांड कंट्रोल सेंटर (डीसीसी) लॉन्च किया, जो आपको नेटवर्क का प्रबंधन करने और झरने पर नियंत्रण हासिल करने की अनुमति देता है। हमने डैशबोर्ड डिज़ाइन पर अपने अनुभव को साझा करने और इसके विकास के चरणों के बारे में बात करने का फैसला किया।

हमें एक नए डैशबोर्ड की आवश्यकता क्यों है?

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


2015 में क्या हुआ था

लगभग उसी समय, कंपनी की वेबसाइट पर इसी तरह की समस्याएं उत्पन्न होने लगीं, लेकिन हम इस कहानी के विवरण में गोता नहीं लगाएंगे।

नया डैशबोर्ड क्या होना चाहिए?

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

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

एक नए डिजाइन में उप-वर्गों के साथ उप-लोड के पुराने मेनू और आसान नेविगेशन का एक उदाहरण:



बाईं ओर के विशाल पाद लेख पर ध्यान दें, जो कंपनी के लैंडिंग पृष्ठ के डिजाइन के साथ प्रतिध्वनित हुआ, और नेत्रहीन ने डैशबोर्ड स्थान को अधिभारित किया।

क्या मुश्किलें थीं?

एक नए डिजाइन को विकसित करने और शुरू करने की प्रक्रिया बादल रहित नहीं थी। जो कुछ महीने पहले हमारे लिए संभव हुआ था, वह कई महीनों में खत्म हो गया।

1. सभी कार्यक्षमता को फिर से व्यवस्थित करना असंभव था। उत्पाद निदेशकों, डिजाइनरों, डेवलपर्स के साथ काम करने से खरोंच से कई पृष्ठ बनते हैं।

2. हमें एक पहचानने की आवश्यकता थी, लेकिन एक ही समय में आसान डिजाइन शैली, ताकि उपयोगकर्ताओं को संक्रमण अवधि के दौरान इंटरफ़ेस के दोनों संस्करणों के साथ काम करना, बड़ी कठिनाइयों का सामना न करना पड़े।

3. सार्वभौमिक बुनियादी "ईंटों" का एक सेट तैयार करना आवश्यक था ताकि कुछ वर्षों के बाद भी उनसे इंटरफेस का निर्माण संभव हो सके। यह डिजाइन तत्वों और कोड दोनों पर लागू होता है।

4. कंपनी की कॉर्पोरेट पहचान बनती रही, और हम इसकी पूर्णता के बारे में सुनिश्चित नहीं थे। इसीलिए हमारे लिए एक लचीली डिजाइन तैयार करना महत्वपूर्ण था जो भविष्य में संशोधित श्रम लागतों के बिना जल्दी और बिना खर्च के हो सके।

5. अनुकूली लेआउट और, परिणामस्वरूप, स्मार्टफोन स्क्रीन पर भी सभी कार्यक्षमता की उपलब्धता ने पृष्ठों के मॉड्यूलर ग्रिड और डिजाइन को समग्र रूप से प्रभावित किया।


अलग-अलग स्क्रीन पर एक ही पेज

टीम

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

परिणाम क्या है?

नया डिज़ाइन डैशबोर्ड स्क्रीन

2 से अधिक वर्षों में, हमने डैशबोर्ड पृष्ठों के 90+ लेआउट और विविधताओं को बनाया और पुन: डिज़ाइन किया है। कुछ बिंदु पर, निर्णय लेना आसान हो गया, क्योंकि यूआई को डिजाइन करते समय, हमने मानक रूपों के संयोजन, बटन, स्विच, टैब और कभी-कभी पूरे पृष्ठों को भी एकीकृत करना शुरू कर दिया, जो एकीकृत हो गए और नए सिस्टम स्क्रीन बन गए।
हम एक पूर्ण-डिज़ाइन प्रणाली के निर्माण की ओर बढ़ रहे हैं, इसलिए शुरू में संपूर्ण डिज़ाइन न्यूनतम स्क्रिप्ट वाली प्रासंगिक HTML पृष्ठों की एक बड़ी सूची के रूप में मौजूद है। संदर्भों के रूप में इस तरह का एक खंड सभी डेवलपर्स के लिए उपलब्ध है, इसमें आवश्यक तत्वों को खोजना और दिखाना आसान है।

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

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


संदर्भ मेनू और स्थितिजन्य आइकन के लिए हम फॉन्टव्यू का उपयोग करते हैं

fidbek

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

आगे क्या है

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

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

परिणामस्वरूप, हम सभी इंटरफेस के डिजाइन के लिए एक सरल और सुविधाजनक आधार बनाने में कामयाब रहे, जबकि Appodeal ब्रांड में निहित ऊर्जा और आत्मविश्वास की अनूठी विशेषताओं को बनाए रखा। मुझे उम्मीद है कि यह अनुभव कंपनी के डिजाइनरों और डेवलपर्स को सही दिशा में विकसित करने में मदद करेगा, और उपयोगकर्ताओं को - मोबाइल विज्ञापन पर और भी अधिक कमाई करने के लिए।

पावेल सविंस्की द्वारा पोस्ट, डिजाइन टीम लीड @ अपील।