किन वॉलेट यूजर इंटरफेस डिझाइन करत आहे

प्रकल्प आवश्यकता

आमची डिझाइन प्रक्रिया उत्पादनांची आवश्यकता निर्धारित करुन सुरू होते. या प्रकरणात, आमच्या उत्पादनास किक वापरकर्त्यांनी मिळकत आणि खर्चाच्या प्रक्रियेची ओळख करुन देणे आवश्यक आहे. याचा अर्थ आम्ही किकमध्ये पूर्णपणे नवीन अनुभवाकडे वापरकर्त्यांकडे जात आहोत.

या उत्पादनाच्या मागील पुनरावृत्ती दरम्यान (टोकन वितरण इव्हेंटमध्ये भाग घेणार्‍या वापरकर्त्यांसाठी उपलब्ध केलेली आवृत्ती), वॉलेटमध्ये किन ब्रँड लुक आणि अनुभूती मिळेल असा निर्णय घेण्यात आला.

याचा अर्थ असा की हे उत्पादन पहात असलेले नवीन किक वापरकर्त्यांकडे नवीन वैशिष्ट्ये आणि एक नवीन रूप आणि अनुभव येईल जे किकपासून आतापर्यंत वापरल्या गेलेल्या गोष्टींपेक्षा खूपच वेगळे आहे.

या कारणास्तव, आम्हाला हे लवकर लक्षात आले की ही आवृत्ती शक्य तितक्या बारीक ठेवणे महत्वाचे असेल.

आयए स्ट्रक्चरची प्रयोक्ता नियोजन करत आहे

ऑनबोर्डिंग

@KikTeam बॉटद्वारे वापरकर्त्यांना वॉलेटमध्ये सादर केले जाईल. हे आम्हाला किक वापरकर्त्यांसह - गप्पा मारणे - या नवीन अनुभवाची ओळख करुन देण्यासाठी काय परिचित आहे यावर टॅप करण्यास अनुमती देते.

वॉलेट माहिती आर्किटेक्चर (आयए) - वेगवेगळ्या रचनांचे परीक्षण करीत आहे

या प्रकल्पाच्या दोन पुनरावृत्ती दरम्यान आम्ही दोन शक्य आयए स्ट्रक्चर्सकडे पाहिले.

  1. व्यवहाराचा इतिहास आणि नाती मिळवण्याच्या मार्गांचा मोठा विभाग या वैशिष्ट्यांचा एक मजबूत सेट.
  2. एक दुबळा सेट ज्यामध्ये केवळ शिल्लक आणि कमाई / खर्च पर्यायांचा समावेश आहे.

प्रथम पुनरावृत्ती

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

दोन नवीन पानांसाठी (कमाई आणि व्यवहाराचा इतिहास), आम्ही दोन पारंपारिक डिझाइन नमुन्यांचा विचार केला:

  1. व्यवहाराच्या इतिहासाची टाइमलाइनः हा नमुना आपल्याला कालक्रमानुसार माहिती सादर करण्यास अनुमती देईल, जो या पृष्ठाच्या उद्देशास अनुकूल आहे - वेळोवेळी येणारे आणि जाणार्‍या नातेवाईकांचे व्यवहार दर्शवितो. बँकिंग अ‍ॅप्ससाठी ही सामान्य गोष्ट आहे.
  2. कमाईसाठी सामग्री कार्डः हा नमुना सामान्यतः सामग्रीचा वापर आणि ई-कॉमर्स उत्पादनांमध्ये वापरला जातो, जो परिजन काम करेल त्या जागेवर फिट आहे.

आम्ही यादी लेआउट आणि मोठ्या कार्डे वापरून देखील शोध घेतला:

ही आवृत्ती डिझाइन करीत असताना, आम्ही किन ब्रँडसाठी UI किट विस्तृत केला आणि आम्हाला नवीन शैली आणि UI नमुन्यांचा प्रयोग करायला लागला.

दुसरी पुनरावृत्ती

या प्रकल्पाच्या दुसर्‍या पुनरावृत्ती (आयपीएलव्ही 2) वर जाताना आम्ही लहान वैशिष्ट्यांसह प्रारंभ केला. आम्ही एक सोपा डिझाइन सोल्यूशन शोधला ज्याद्वारे किक वापरकर्त्यांना नवीन पद्धतीने स्पष्ट मार्गाने उघड करेल आणि अंमलात आणणे सोपे होईल.

पाकीटची ही आवृत्ती सोपी असेल, फक्त एक पृष्ठ आणि लेआउट, शीर्षलेख आणि दोन प्रकारच्या माहितीमध्ये फरक करण्यासाठी टॅबसहः

  1. नातेवाईक शिल्लक आणि वापरकर्त्याची माहिती.
  2. दोन बाजूंनी अर्थव्यवस्था ऑफर - मिळवण्याची आणि खर्च करण्याची संधी.

या संरचनेचा वापर केल्याने आम्हाला श्रेणीबद्धतेचे दोन स्तर तयार करण्याची अनुमती मिळाली.

निळा हेडर वापरकर्त्यांचे लक्ष त्यांच्या नातेसंबंधातील शिल्लककडे आकर्षित करेल, त्यांचे नाव आणि फोटो यामुळे हे त्यांचे खाते आहे याची खात्री बाळगू शकते.

शिल्लक ते अर्थव्यवस्थेकडे लक्ष वळविण्यासाठी टॅब क्षेत्र एक चिकट शीर्षलेखसह स्क्रोल करण्यायोग्य आहे. आम्ही असे गृहित धरले आहे की एकदा वापरकर्त्यांनी त्यांचे संतुलन त्यांच्या टॅबकडे वळविले की त्यांना यापुढे शिल्लक माहितीची आवश्यकता नाही. तथापि, दोन टॅबमध्ये बदलणे नेहमीच उपलब्ध असले पाहिजे कारण आम्ही दोन्ही टॅब श्रेणीबद्धतेच्या समान पातळीवर देत आहोत.

यूआय डिझाइन

पहा आणि वाटेल

वॉलेटची यूआय स्टाईल किन ब्रँड स्टाईल मार्गदर्शकावर आधारित आहे. निळा टोन, लाइन चिन्ह आणि किमान रेखाचित्र, विज्ञान आणि तंत्रज्ञानाचा संदर्भ देऊन एक देखावा तयार करणे आणि विश्वासू आणि अनुकूल असणे हे आमचे ध्येय आहे.

नातेवाइक शैली मार्गदर्शकाकडून: हिरो आणि स्पॉट इलस्ट्रेशन, लोगो वापर, रंग आणि टायपोग्राफीवॉलेट UI

अ‍ॅनिमेशन आणि स्क्रीन संक्रमण

आम्ही दोन प्रकारचे अ‍ॅनिमेशन वापरले

  1. संक्रमणे जी वापरकर्त्याच्या क्रियांना अभिप्राय देईल आणि जे होईल त्याबद्दल अपेक्षा निर्माण करेल.
  2. एक विश्वासार्ह आणि मैत्रीपूर्ण भावना निर्माण करण्याचे आपले लक्ष्य ठेवून चुका आणि सिस्टम चुकून अनुकूल बनविणे.

संक्रमणे

वापरकर्त्यांनी अटींशी सहमत झाल्यानंतर पाकीट सेट करण्यास काही सेकंद लागतात. याचा अर्थ असा आहे की आम्हाला लोडिंग स्टेट तयार करावे लागेल. आम्ही या संधीचा उपयोग नाते - विकेंद्रीकरण आणि समुदायाच्या मागे असलेल्या कल्पनांवर जोर देण्यासाठी वापरण्याचा निर्णय घेतला.

लोगोमधील घटकांचा वापर करून (गोल आकारांनी बनविलेले गोल), आम्ही त्यांच्या स्वत: च्या गती आणि दिशेने वाटचाल करणार्‍या व्यक्तींसाठी एक रूपक तयार केला परंतु तरीही एकत्र येत आहे.

मायक्रो संवाद

आम्ही सूक्ष्म परस्परसंवाद किमान ठेवण्याचा प्रयत्न केला आणि केवळ त्यांचा उपयोग वापरकर्त्याच्या कृतींसाठी अभिप्राय म्हणून केला.

काठ प्रकरणे

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

पुढे काय

वापरकर्ता अभिप्राय मिळवित आहे!

या प्रकल्पात काम करत असताना आमच्याकडे उपयोगिता, आमच्या वापरकर्त्यांसाठी योग्य मांडणी आणि किकच्या आत नवीन रूप आणि भावनांना सामान्य प्रतिसाद यावर बरेच प्रश्न होते.
आम्ही सध्या वापरकर्ता वर्कशॉप स्थापित करण्याच्या प्रक्रियेत आहोत, उपयोगिता चाचणी करीत आहोत आणि एकदा या आवृत्तीचे डेटा लॉन्च झाल्यावर मिळवित आहे.