UX-Challenge: 5 दिनों में मोबाइल बैंक एप्लिकेशन डिजाइन करना

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

प्रतियोगिता के विवरण में विशेष जोर यूएक्स पर दिया गया था, इसलिए यह कार्य हमें दिलचस्प लगा। सच है, प्रतियोगिता के साथ परिचित होने के क्षण और आवेदन स्वीकार करने की समय सीमा से, केवल 5 दिन शेष थे। खैर, कॉल को स्वीकार कर लिया गया है।



कटौती के तहत, एक कम समय में मोबाइल बैंक इंटरफेस डिजाइन करने के बारे में एक लंबी लेकिन उपयोगी कहानी। जो लोग इसमें महारत हासिल करते हैं, उन्हें अंत में एक बोनस मिलेगा।

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

उपयोगकर्ता केंद्रित डिजाइन

डिजाइन अवधारणा का विकास यूसीडी पद्धति पर आधारित था। मुख्य उपकरण:

• व्यक्ति (व्यक्ति) - उत्पाद के लक्षित दर्शकों के विशिष्ट प्रतिनिधियों की सामूहिक छवियां, व्यक्ति में कई संबंधित सुविधाओं से एकजुट होती हैं।
• मामलों का उपयोग करें - उत्पाद के भीतर कार्य का एक संक्षिप्त विवरण जिसे एक व्यक्ति को पूरा करने की आवश्यकता है।
• परिदृश्यों (परिदृश्यों) का उपयोग करें - लक्ष्य को प्राप्त करने के तरीके पर "रोजमर्रा की जिंदगी" में किसी व्यक्ति की घटनाओं के अनुक्रम के बारे में काल्पनिक कहानियां।

चैलेंज # 1: ऑर्डर कार्ड

पहला सुझाया गया उपयोग मामला था:

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

मुख्य समस्या यह है कि बैंक 17 कार्ड विकल्प प्रदान करता है, जिसमें 8 क्रेडिट और 9 डेबिट शामिल हैं। मौजूदा बैंक एप्लिकेशन उन सभी का चयन करने का प्रयास लागू करता है।

इनसाइट # 1
प्रस्तावित मामले के अनुसार, उपयोगकर्ता को क्रेडिट कार्ड की आवश्यकता होती है, जिससे आप सुरक्षित रूप से 9 डेबिट कार्ड निकाल सकते हैं। 8 बाएं हैं - पहले से ही आसान है।

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

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

कुल: हमारा कार्य केवल एक को "बेचना" है, लेकिन सबसे "स्वादिष्ट" क्रेडिट कार्ड है।

हम एक व्यक्ति बनाते हैं

हां, पात्र काल्पनिक पात्र हैं। लेकिन एक अच्छी तरह से तैयार व्यक्ति टीम को सही चीजों पर ध्यान केंद्रित करने और कम गलतियां करने में मदद करता है। एक व्यक्ति को यथासंभव यथार्थवादी और सुसंगत होना चाहिए।

क्रेडिट कार्ड ऑर्डर करने के मामले में, हमने निम्नलिखित व्यक्ति को बनाया:

पटकथा लिखना

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

अच्छे परिदृश्य के संकेत:

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

पूर्ण परिदृश्य काफी बड़ा हो गया है, इसलिए, इस लेख के लिए हम कुंजी देते हैं: पर्यावरण, प्रौद्योगिकी और संदर्भ:

उपयोगकर्ता पथ

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




लॉन्च करने के बाद एप्लिकेशन की प्रारंभिक स्क्रीन यथासंभव न्यूनतम है और दो प्रमुख आवश्यकताएं प्रदान करती हैं:

• दर्ज करें - मौजूदा बैंक ग्राहकों के लिए
• बैंक के संभावित ग्राहकों के लिए एक ग्राहक बनें

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

मानचित्र के साथ ब्लॉक को बैनर के रूप में डिज़ाइन किया गया है। क्रेडिट कार्ड स्क्रीन की सीमा से अधिक आसानी से निकल जाता है, आइए समझते हैं कि आप इस पर क्लिक कर सकते हैं।






शीर्षक "अल्फा बैंक से क्रेडिट कार्ड प्राप्त करें" स्पष्ट रूप से अपेक्षाओं को निर्धारित करता है: "इस चीज़ पर क्लिक करके मैं कार्ड ऑर्डर कर सकता हूं"






एक 5-स्क्रीन स्लाइडर एक सरल और समझ में आने वाली भाषा में अधिकतम क्रेडिट कार्ड के मुख्य लाभों को प्रकट करता है।

पहली स्लाइड में मुख्य जानकारी है। प्रत्येक बाद की स्लाइड इसका विस्तार करती है।






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

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





कार्ड ऑर्डर करने के लिए, बस फ़ोन नंबर दर्ज करें। बाकी कॉल सेंटर करेगा।

व्यक्तिगत डेटा भरना उपयोगकर्ताओं के लिए एक मुश्किल काम है। यह इस तथ्य से और जटिल है कि आवश्यक दस्तावेज हमेशा हाथ में नहीं हो सकते हैं।

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





स्वतंत्र रूप से प्रश्नावली को भरने के लिए स्विच करते समय, उपयोगकर्ता न्यूनतम फ़ील्ड के साथ एक सरल रूप देखता है।

सभी आइटम सरल हैं और हाथ में किसी भी दस्तावेज की आवश्यकता नहीं है।

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



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


स्वतंत्र रूप से या कॉल सेंटर का उपयोग करके सभी क्षेत्रों में भरे जाने के बाद, उपयोगकर्ता संबंधित पुष्टि स्क्रीन को देखता है।

इस स्क्रीन पर, पहली बार, उपयोगकर्ता के लिए समझने योग्य मूल्य के बदले में PUSH सूचनाएं भेजने के लिए अनुमति मांगी गई है: कार्ड की स्थिति की निगरानी करना।

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







जबकि एक नया अल्फा बैंक ग्राहक कार्ड जारी किया जा रहा है, आवेदन वास्तविक समय में कार्ड की वर्तमान स्थिति प्रदर्शित करता है।

ग्राहक सहायता को अल्फा चैट में सहायता सेवा द्वारा तुरंत उत्तर दिया जाएगा।

जब कार्ड प्राप्त करने का समय आता है, तो कूरियर कॉल करेगा और डिलीवरी के सुविधाजनक समय और स्थान पर सहमत होगा।





लक्ष्य प्राप्त किया जाता है, ग्राहक संतुष्ट होता है:


“यह मेरे पास अब तक का सबसे अच्छा कार्ड है। इतनी आजादी और भव्य कैशबैक। और यह आदेश देना इतना आसान था! "

होम स्क्रीन

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

• खाता शेष देखने के लिए त्वरित पहुँच प्रदान करें
• सभी शुल्कों और शुल्कों को ट्रैक करें।
• बुनियादी बैंकिंग कार्य करें

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


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

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

केंद्र में मुख्य बात। प्रमुख क्रियाएं: कार्ड, स्टेटमेंट के साथ इंटरेक्ट करने पर भी, भुगतान, ट्रांसफर हमेशा हाथ में रहता है।



नक्शे और घटनाओं की सूची के साथ बातचीत करते समय मुख्य स्क्रीन बताती है।

चैलेंज # 2: डिपॉजिट खोलना

दूसरा सुझाया गया उपयोग मामला था:

"मैं अल्फा-बैंक के एक ग्राहक के रूप में, जिसके पास एक कार्ड है जिसे मैं नियमित रूप से उपयोग करता हूं, अपने फंड को बढ़ाने के लिए 12 महीने की अवधि के लिए 20,000 hryvnias की राशि में एक जमा खोलना चाहता हूं"

अल्फा-बैंक अलग-अलग मुद्राओं में, विभिन्न अवधियों और ब्याज दरों के लिए कई जमा विकल्प प्रदान करता है।

इनसाइट # 1
उपयोग के मामले को देखते हुए, हम UAH में जमा खोलने के लिए केवल परिदृश्य पर काम करते हैं।

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

कुल: हमारा काम क्लाइंट के लिए 3 से 18 महीने की अवधि के लिए उच्च ब्याज दर के साथ सबसे अधिक लाभदायक जमा को "बेचना" है, जिसका ब्याज अंत में या मासिक भुगतान किया जाता है।

हम एक व्यक्ति बनाते हैं

पटकथा लिखना

उपयोगकर्ता पथ

और हम उपयोगकर्ता पथ के प्रत्येक चरण के लिए इंटरफ़ेस समाधान का विश्लेषण करेंगे।




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

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








जमा की प्रस्तुति अधिकतम सरलीकृत है और वास्तव में दो सेटिंग्स हैं:

• ब्याज विधि
• "जमा अवधि / ब्याज दर।"

ब्याज प्राप्त करने की विधि का विकल्प एक स्लाइडर में संयुक्त कार्ड के रूप में लागू किया जाता है।

इस प्रकार, स्क्रीन पर कुंजी हमेशा ब्याज दर और आय की मात्रा बनी रहती है।

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

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

आप कई तरीकों से पैसा जमा कर सकते हैं।

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





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

स्क्रीन उन कार्डों पर केंद्रित है जो भुगतान करने के लिए उपयुक्त हैं।

यदि उपयोगकर्ता के पास अन्य कार्ड हैं जो इस भुगतान के लिए उपयुक्त नहीं हैं, तो उन्हें भी प्रदर्शित किया जाता है, लेकिन एक अलग सूची में। इस प्रकार, त्रुटि की भावना पैदा नहीं होती है: “बंद करो, मैं दूसरे कार्ड से भुगतान करना चाहता था, यह कहां है? शायद कुछ काम नहीं कर रहा है। ”






अंतिम जमा स्क्रीन में जमा, भुगतान की विधि और राशि के बारे में सभी महत्वपूर्ण जानकारी होती है।

बटन के नीचे हस्ताक्षर याद दिलाता है कि यह सब एक जमा करने के लिए आवश्यक है। बैंक जाने की जरूरत नहीं है।




अंतिम स्क्रीन पर, उपयोगकर्ता जमा के सफल उद्घाटन के बारे में जानकारी देखता है।

पैसे के साथ साझेदारी करने के बाद उपयोगकर्ता को भावनात्मक रूप से मजबूत करने के लिए, उसे मूल्य की याद दिलाई जाती है: वह आय जो उसे जमा अवधि के अंत में प्राप्त होगी।

"मेरी जमा देखें" बटन उपयोगकर्ता को सामान्य एप्लिकेशन इंटरफ़ेस पर लौटाता है।






एक सक्रिय जमा के साथ, "जमा" स्क्रीन की प्रस्तुति बदल जाती है। मुख्य ध्यान खुली जमा राशि पर है।

निवेश की राशि से जमा को आसानी से पहचाना जाता है।

प्रगति बार आपको जमा की स्थिति को जल्दी से मॉनिटर करने की अनुमति देता है। यदि मासिक ब्याज भुगतान के साथ एक जमा खोला जाता है, तो संबंधित खंड प्रगति पट्टी पर दिखाई देते हैं। खंड की उपलब्धि - ब्याज भुगतान।

जमा सेटिंग को प्रबंधित करने के लिए, बस उस पर क्लिक करें (पूरे एप्लिकेशन में उपयोग किया जाने वाला सामान्य पैटर्न)।





लक्ष्य प्राप्त किया जाता है, ग्राहक संतुष्ट होता है:


“मेरा पैसा सुरक्षित जगह पर है और यह मेरे लिए काम करता है। एक जमा खोलना इतना आसान था! "

हर चीज के लिए 72 घंटे

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

परिणाम:

यह कहानी है कि कैसे, सीमित संसाधनों और समय के साथ भी, आप अधिक सुविधाजनक और उपयोगी इंटरफेस बना सकते हैं।

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

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

अंत तक पढ़ें? यह वादा किया गया बोनस है - एक इंटरैक्टिव प्रोटोटाइप जिसे देखकर हंसा जा सकता है ।

पुनश्च यदि यह सामग्री उपयोगी थी, तो अधिक है ।