इस लेख में, मैं Nuvyyo वेबसाइट को फिर से डिज़ाइन करने की प्रक्रिया की व्याख्या करूँगा।

परियोजना के बारे में

नुव्यो क्या है ?

Nuvyyo एक कनाडाई कंपनी है जो अपने लोकप्रिय Tablo DVR उत्पादों सहित टीवी प्रसारण समाधान प्रदान करती है, जो उपयोगकर्ताओं को कई उपकरणों पर लाइव ओवर-द-एयर टीवी प्रसारण देखने और रिकॉर्ड करने की अनुमति देती है।

Nuvyyo को फिर से डिज़ाइन क्यों करें?

एक दिन इंटरनेट ब्राउज़ करते समय, मुझे Verge.com पर एक लेख मिला जिसमें टीवी प्रसारण उद्योग में एक क्रांति पर चर्चा की गई थी। इस लेख में नवीन विचारों के साथ क्षेत्र में एक अग्रणी कंपनी के रूप में Nuvyyo पर प्रकाश डाला गया है। इसके अलावा, मुझे पता चला कि कंपनी को हाल ही में 14 मिलियन डॉलर में स्क्रिप्स द्वारा अधिग्रहित किया गया था। इसने मेरी रुचि को जगाया, और मैंने उनके उत्पादों के बारे में अधिक जानकारी के लिए Nuvyyo की वेबसाइट पर जाने का निर्णय लिया।

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

कुछ मुद्दे जो मैंने खोजे

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

परियोजना का लक्ष्य

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

डिज़ाइन प्रक्रिया

मैंने Nuvyyo की वेबसाइट का पूरी तरह से विश्लेषण करके रीडिज़ाइन की प्रक्रिया शुरू की। मैंने साइट के प्रत्येक भाग को देखा और सारी सामग्री निकाली, जिससे मुझे वेबसाइट के मूल उद्देश्य को बेहतर ढंग से समझने में मदद मिली।

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

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

अब आइए इस केस स्टडी के सबसे महत्वपूर्ण हिस्से में गोता लगाएँ

अंतिम डिजाइन

लैंडिंग पृष्ठ

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

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

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

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

अगले खंड में, मैंने एक खंड जोड़ा जो कंपनी के उत्पादों के समाधानों और लाभों पर प्रकाश डालता है। यह जानकारी उपयोगकर्ताओं को यह निर्धारित करने में सहायता कर सकती है कि उत्पाद उनकी आवश्यकताओं के लिए प्रासंगिक है या नहीं। सामग्री को स्कैन करना और समझना आसान बनाने के लिए, मैंने प्रत्येक लाभ शीर्षक के ऊपर संबंधित आइकन रखे।

उत्पाद खंड

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

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

प्रशंसापत्र अनुभाग

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

अक्सर पूछे जाने वाले प्रश्न और पाद अनुभाग

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

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

पेज के बारे में

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

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

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

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

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

सीखना

ये वे सबक हैं जो मैंने इस परियोजना के दौरान सीखे।

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