शॉपबॉक्स

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

गायब होने वाली सबसे महत्वपूर्ण विशेषताओं में से एक शिपिंग लागत कैलकुलेटर और शिपमेंट ट्रैकर थी। ये उनके ग्राहकों के लिए वेबसाइट पर सीधे शिपिंग लागत और डिलीवरी के समय का अनुमान लगाने के लिए आवश्यक थे।

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

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

उच्च गुणवत्ता वाले वेब विकास समाधान प्रदान करने में हमारे सिद्ध अनुभव के कारण शॉपबॉक्स ने इस नाजुक कार्य के लिए हम पर भरोसा किया।

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

उन्होंने हमें गणना के लिए विशिष्ट सूत्रों के साथ स्प्रेडशीट प्रारूप में आइटम श्रेणी डेटा प्रदान किया।

यहां दिए गए हैं सबसे अच्छी सुविधाएं का कैलकुलेटर:-

• CMS इंटीग्रेशन: हमने शॉपबॉक्स की स्प्रेडशीट से आइटम श्रेणी के डेटा को उनके CMS में आयात किया है। यह सेटअप शॉपबॉक्स की टीम को किसी भी समय डेटा अपडेट करने की अनुमति देता है।

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

यहां यह है बैकएंड वर्कफ़्लो का कैलकुलेटर:-

1. आइटम का चयन: यह प्रक्रिया ग्राहकों द्वारा CMS में दी गई सूची से किसी आइटम का चयन करने के साथ शुरू होती है, जिसे बाद में ड्रॉपडाउन मेनू में भर दिया जाता है।
2. इनपुट करने का विवरण: ग्राहक आइटम की लागत $US में दर्ज करते हैं और उसका वजन Lbs या kg में दर्ज करते हैं। यदि वजन एक इकाई में दर्ज किया जाता है, तो दूसरी इकाई में संबंधित मान की स्वचालित रूप से गणना की जाती है और प्रदर्शित किया जाता है।
3. लागतों की गणना करना: चयनित आइटम और दर्ज किए गए विवरण के आधार पर, हम विभिन्न शुल्कों के लिए गणनाओं की एक श्रृंखला करते हैं, जिसमें आइटम ड्यूटी, फ्रेट रेट, फ्यूल सरचार्ज, हैंडलिंग शुल्क, बीमा और शुल्क शामिल हैं। इनकी गणना शॉपबॉक्स द्वारा प्रदान किए गए सटीक फ़ार्मुलों का उपयोग करके की जाती है।
4. परिणाम प्रदर्शित करना: परिकलित मान तब UI में गतिशील रूप से दिखाए जाते हैं, जिसमें $US और $EC दोनों मान स्पष्ट रूप से प्रदर्शित होते हैं। सभी फ़ील्ड रीसेट करने के लिए एक 'क्लियर' बटन भी दिया गया है।

हमने इस सुविधा को जीवंत करने के लिए JavaScript DOM मैनिपुलेशन का उपयोग किया। 'कैलकुलेट' बटन पर 'क्लिक' इवेंट लिसनर को अटैच करके, हम यह सुनिश्चित करते हैं कि गणना सही तरीके से की जाए और परिणाम UI पर रीयल-टाइम में अपडेट किए जाएं।

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

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

API इंटीग्रेशन

1. पैकेज की वर्तमान स्थिति (तारीख और समय के साथ)
2. पिछला स्थान
3. इस्तेमाल किया गया कैरियर (जैसे ब्लूडार्ट)
4. शिपिंग और डिलीवरी का समय
   ‍

यूज़र इंटरफ़ेस डिज़ाइन करना

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

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

बैकएंड वर्कफ़्लो
टेड डेटा जिसमें पैकेज की स्थिति और संबंधित जानकारी शामिल है। फिर प्राप्त किए गए डेटा को सटीकता और प्रतिक्रियात्मकता सुनिश्चित करने के लिए QuerySelector विधि का उपयोग करके UI में पार्स किया जाता है और डायनामिक रूप से अपडेट किया जाता है।

इस सहज ट्रैकर को विकसित करके, हमने शॉपबॉक्स को न केवल उनकी आवश्यकताओं को पूरा करने में मदद की, बल्कि उनके उपयोगकर्ता अनुभव को भी काफी बेहतर बनाया।

‍

बैकएंड वर्कफ़्लो

इन फ़ंक्शंस को बनाने के लिए, हमने “kd100" पर API कॉल के लिए जावास्क्रिप्ट में फ़ेच विधि का उपयोग किया। यह विधि JSON-प्रारूप को कुशलतापूर्वक पुनर्प्राप्त करती है

वेबफ्लो माइग्रेशन और तकनीकी एसईओ

• Webflow की परफ़ॉर्मेंस होस्टिंग में माइग्रेट किया गया → 40% तेज़ पेज लोड (LCP <2.5s)
• कार्यान्वित मोबाइल-फर्स्ट डिज़ाइन और अनुकूलित कोर वेब वाइटल्स
  ‍

डोमेन प्राधिकरण और दृश्यता

• अथॉरिटी स्कोर तक पहुंचे 9 (~1 से)
• SEMRUSH डोमेन रैंक ~3.2M से ~1.8M तक सुधार हुआ

‍टॉप कीवर्ड्स (अमेरिकी बाजार):

• “शॉप बॉक्स” — स्थिति 1 (210 वोल्ट/मो) - सभी ऑर्गेनिक ट्रैफिक का 39%
• “शॉपबॉक्स” — स्थिति 2 (480 वोल्ट/मो) - सभी ऑर्गेनिक ट्रैफिक का 47%
• “सीमा शुल्क कैलकुलेटर सेंट लूसिया” — स्थिति 3 (30 वोल्ट/मो)
  ‍

भौगोलिक और मार्केट शेयर

• ट्रैफ़िक शेयर (यूएस): 34% (134 विज़िट/माह)
• डेनमार्क: 20% (78 विज़िट/माह)
• इंडिया: 16% (65 विज़िट/माह)
• ग्लोबल मार्केट शेयर बनाम प्रतियोगी: कुल श्रेणी ट्रैफ़िक का 39%

बैकलिंक प्रोफ़ाइल

• 2,600+ कुल बैकलिंक्स (92 डोमेन से)
• फॉलो बनाम नोफ़ॉलो: 2,600 फ़ॉलो करें | 27 नोफ़ॉलो करें