परिचय

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

संकट

परियोजना शुरू करने पर, मेरे मन में एक विशिष्ट समस्या थी जिसे मैं हल करना चाहता था। हालाँकि, कुछ और सोचने के बाद, मुझे एहसास हुआ कि "स्टैश एंड स्टोर" प्रभावी रूप से एक बहु-कार्यात्मक ऐप हो सकता है जो विभिन्न प्रकार के लोगों के लिए कुछ अलग समस्याओं को हल कर सकता है। निम्नलिखित समस्याएं हैं जिन्हें मैं किसी तरह हल करने की आकांक्षा रखता हूं:

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

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

उपयोगकर्ता व्यक्तित्व

मुख्य समस्याओं को अच्छी तरह से संबोधित करने के बाद, जो मेरा ऐप संभावित उपयोगकर्ताओं की जरूरतों पर व्यापक शोध को हल करेगा और संचालित करेगा, अगला कदम आदर्श उपयोगकर्ता व्यक्तित्व की पहचान करना था।

बुद्धिशीलता

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

जैसा कि आप ऊपर दिए गए स्क्रीनशॉट में देख सकते हैं, शुद्ध विचार-मंथन के लिए एक सेक्शन था जबकि ऐप के विशिष्ट प्रमुख हिस्सों के लिए भी सेक्शन थे।

यूएक्स मानचित्र

विभिन्न विचारों के साथ आने के बाद, मैंने एक UX मानचित्र का निर्माण किया। तीन फ्रेम रंग हैं जिनमें से हर एक ऐप के एक अलग हिस्से का प्रतिनिधित्व करता है।

प्रेरणा बोर्ड

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

मैंने फिग्मा में अपने "इंस्पिरेशन बोर्ड" पेज पर ड्रिबल, मोबिन, बेहंस और इसी तरह के अन्य प्लेटफॉर्म से कई शॉट सहेजे। मैंने सभी शॉट्स को उनके उद्देश्य से वर्गीकृत किया। इस तरह, विभिन्न प्रकार के शॉट्स वाले कई अलग-अलग खंड थे।

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

लो-फाई वायरफ्रेम

मैंने तीन वायरफ्रेम सेक्शन बनाए। पहला सार्वभौमिक है और वह ऑनबोर्डिंग प्रक्रिया है। अन्य दो खंड अलग-अलग ऐप दृश्यों के वायरफ्रेम थे , एक मेजबानों के लिए और एक ग्राहकों के लिए । एक बार जब ऐप डाउनलोड हो जाता है और उपयोगकर्ता पंजीकृत हो जाता है, तब भी वह दोनों के बीच आसानी से बदल सकता है। नीचे दिए गए स्क्रीनशॉट में देखा जा सकता है कि लगभग हर स्क्रीन को इस वायरफ्रेम में पेश किया गया था।

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

डिजाइन प्रणाली

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

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

आइकन के बारे में, पूरे ऐप में एक सुसंगत डिज़ाइन बनाए रखने के लिए, मैंने एक आइकन पैक और एक प्रकार के आइकन का उपयोग किया। आइकन पैक का नाम "Heroicons" है और इसमें लगभग सभी आइकन शामिल हैं जिनकी मुझे SVG (वेक्टर) प्रारूप में आवश्यकता थी। जो चिह्न मुझे नहीं मिले, मैंने फिग्मा में एक पेन टूल से बनाया। मैंने सुनिश्चित किया कि वे पहले उल्लिखित आइकन पैक के आइकन के साथ आकार और स्ट्रोक में सुसंगत थे।

चिह्न पैक स्रोत:
https://heroicons.com/

जब मेरे द्वारा उपयोग किए गए चित्रों की बात आती है, तो वे भी उसी उदाहरण स्रोत से लिए गए थे। फिर से, UI में निरंतरता बहुत महत्वपूर्ण है!

उदाहरण स्रोत:
https://storyset.com/time

अंतिम नक्शा

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

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

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

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

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

इस ऐप में "संदेश" तीसरा टैब है। यह होस्ट ऐप व्यू में भी मौजूद है क्योंकि यह कमोबेश यूनिवर्सल है। उपयोगकर्ता चैट के माध्यम से खोज सकता है, वार्तालाप हटा सकता है या उन्हें संग्रहीत कर सकता है। साथ ही, क्लाइंट के ऐप व्यू के मामले में, उपयोगकर्ता प्री-जेनरेट किए गए अक्सर पूछे जाने वाले प्रश्न भेज सकते हैं (जैसा कि ऊपर तीसरे शॉट में दिखाया गया है)।

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

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

ऑफ़र जोड़ना और संपादित करना भी मेज़बानों के लिए महत्वपूर्ण है। रिक्त स्थान जोड़ना, लिस्टिंग संपादित करना और समीक्षाएं देखना आसान होना चाहिए।

मेजबानों के दृश्य में "संदेश" टैब के संबंध में, यह दोनों ऐप दृश्यों के लिए समान है। हालाँकि, चैट को दो अलग-अलग ऐप व्यू के बीच विभाजित/अलग किया जाता है।

निष्कर्ष

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

अगर आपको मेरी केस स्टडी पसंद आई हो, तो इस लेख को 50 बार ताली बजाना सुनिश्चित करें।
प्रो टिप: ताली का बटन दबाकर देखें :)

संपर्क

बेझिझक मुझसे संपर्क करें :)
[email protected]
https://www.linkedin.com/in/danis-okic-745a4919a/
https://www.instagram.com/danees6/