কিন ওয়ালেট ইউজার ইন্টারফেস ডিজাইন করা

প্রকল্পের প্রয়োজনীয়তা

আমাদের ডিজাইন প্রক্রিয়া পণ্য প্রয়োজনীয়তা নির্ধারণ করে শুরু হয়। এই ক্ষেত্রে, আমাদের পণ্যটি কিক ব্যবহারকারীদের আত্মীয়তার উপার্জন এবং ব্যয় প্রক্রিয়াটির সাথে পরিচয় করিয়ে দেওয়া দরকার। এর অর্থ আমরা কিকের অভ্যন্তরে সম্পূর্ণ নতুন অভিজ্ঞতায় ব্যবহারকারীদের উপরে উঠব।

এই পণ্যটির পূর্ববর্তী পুনরাবৃত্তির সময় (টোকেন বিতরণ ইভেন্টে অংশ নেওয়া ব্যবহারকারীদের জন্য সংস্করণ উপলব্ধ করা হয়েছিল), সিদ্ধান্ত নেওয়া হয়েছিল যে ওয়ালেটে কিন ব্র্যান্ডের চেহারা এবং অনুভূতি থাকবে।

এর অর্থ এই যে নতুন কিক ব্যবহারকারীরা এই পণ্যটি দেখছেন তারা নতুন বৈশিষ্ট্য এবং একটি নতুন চেহারা এবং উভয়ই অনুভব করবেন যা তারা এখন পর্যন্ত কিকের থেকে অভ্যস্ত।

এই কারণে, আমরা তাড়াতাড়ি বুঝতে পেরেছিলাম যে এই সংস্করণটি যতটা সম্ভব দূর্বল রাখা গুরুত্বপূর্ণ হবে।

পরিকল্পনা ব্যবহারকারী ব্যবহারকারী আইএ কাঠামো ভ্রমণ করে

অনবোর্ডিং

ব্যবহারকারীরা @ কিকটিম বটের মাধ্যমে মানিব্যাগের সাথে পরিচিত হবে। এটি আমাদের নতুন অভিজ্ঞতাটি প্রবর্তন করতে কিক ব্যবহারকারীরা - চ্যাটিং - এর সাথে পরিচিত সেগুলিতে ট্যাপ করতে দেয়।

ওয়ালেট তথ্য আর্কিটেকচার (আইএ) - বিভিন্ন কাঠামো পরীক্ষা করে

এই প্রকল্পের দুটি পুনরাবৃত্তির সময় আমরা দুটি সম্ভাব্য আইএ কাঠামো দেখেছি।

  1. বৈশিষ্ট্যগুলির একটি শক্তিশালী সেট যা লেনদেনের ইতিহাস এবং আত্মীয়তার উপার্জনের বিভিন্ন উপায়ে অন্তর্ভুক্ত।
  2. একটি ঝুঁকিপূর্ণ সেট যা কেবলমাত্র ভারসাম্য এবং উপার্জন / ব্যয়ের বিকল্পগুলি অন্তর্ভুক্ত করে।

প্রথম পুনরাবৃত্তি

প্রারম্ভিক পুনরাবৃত্তির সময়, আমরা মূল পৃষ্ঠাটি দিয়ে শুরু করেছি যা একটি টিডিই অংশগ্রহকের ওয়ালেটের জন্য ব্যবহৃত হয়েছিল এবং উপার্জন এবং লেনদেনের ইতিহাসের জন্য মেনু নেভিগেশন যুক্ত হয়েছিল। প্রকল্পের ক্ষেত্রটি হ্রাস করতে এবং ব্যবহারকারীদের জন্য ইতিমধ্যে যা উপলব্ধ ছিল তার উপরে ভিত্তি করে ব্যয় এবং ভারসাম্য মূল পৃষ্ঠায় থাকবে। মেনু কাঠামোটি এই সংস্করণটির জন্য পরিকল্পনা করা শক্তিশালী বৈশিষ্ট্যগুলি সেটগুলিকে ওয়েফ ফাইন্ডিংয়ে সহায়তা এবং জ্ঞানীয় লোড কমাতে পৃথক পৃথক অঞ্চলে বিভক্ত করতে সহায়তা করবে।

দুটি নতুন পৃষ্ঠার জন্য (উপার্জন এবং লেনদেনের ইতিহাস) আমরা দুটি প্রচলিত নকশার নিদর্শন দেখেছি:

  1. লেনদেনের ইতিহাসের জন্য একটি সময়রেখা: এই নিদর্শনটি আমাদের কাল্পনিক ক্রমে তথ্য উপস্থাপনের অনুমতি দেয়, যা এই পৃষ্ঠার উদ্দেশ্য অনুসারে - সময়ের সাথে আগত এবং বহির্গামী আত্মীয় লেনদেনগুলি দেখায়। এটি ব্যাংকিং অ্যাপ্লিকেশনগুলির জন্য একটি সাধারণ।
  2. উপার্জনের জন্য সামগ্রী কার্ড: এই প্যাটার্নটি সাধারণত সামগ্রী ব্যবহার এবং ই-বাণিজ্য পণ্যগুলিতে ব্যবহৃত হয়, যা কিন কিনে কাজ করবে এমন জায়গার সাথে ফিট করে।

আমরা তালিকা বিন্যাস এবং বড় কার্ড ব্যবহার করেও অন্বেষণ করেছি:

এই সংস্করণটি ডিজাইন করে আমরা কিন ব্র্যান্ডের জন্য ইউআই কিট প্রসারিত করেছি এবং আমরা নতুন স্টাইল এবং ইউআই নিদর্শন নিয়ে পরীক্ষা করতে পেরেছি।

দ্বিতীয় পুনরাবৃত্তি

এই প্রকল্প (আইপিএলভি 2) এর দ্বিতীয় পুনরাবৃত্তিতে সরানো, আমরা বৈশিষ্ট্যগুলির একটি ছোট সেট দিয়ে শুরু করেছি। আমরা একটি সাধারণ নকশা সমাধানের সন্ধান করলাম যা কিক ব্যবহারকারীদের একটি পরিষ্কার পদ্ধতিতে একটি নতুন অভিজ্ঞতার সামনে তুলে ধরবে এবং কার্যকর করা সহজ হবে।

ওয়ালেটের এই সংস্করণটি সহজ হবে, কেবলমাত্র একটি পৃষ্ঠা এবং লেআউট, একটি শিরোনাম সহ এবং দুটি ধরণের তথ্যের মধ্যে পার্থক্য করতে ট্যাব সহ:

  1. আত্মীয় ভারসাম্য এবং ব্যবহারকারীর তথ্য।
  2. দ্বিমুখী অর্থনীতির অফার - উপার্জন এবং ব্যয় করার সুযোগ।

এই কাঠামোটি ব্যবহার করে আমাদের দুটি স্তরের স্তরক্রম তৈরি করার অনুমতি দেয়।

নীল শিরোনাম ব্যবহারকারীদের আত্মীয়তার ভারসাম্যের দিকে তাদের দৃষ্টি আকর্ষণ করবে এবং তাদের নাম এবং ফটো সহ এই বিষয়টি নিশ্চিত করে যে এটিই তাদের অ্যাকাউন্ট।

ভারসাম্য থেকে অর্থনীতির দিকে ফোকাস স্থানান্তর করতে ট্যাবস অঞ্চলটি একটি স্টিকি শিরোলেখের সাথে স্ক্রোলযোগ্য। আমরা ধরে নিয়েছি যে একবার ব্যবহারকারীরা তাদের ভারসাম্য থেকে এই ট্যাবগুলিতে মনোযোগ স্থান পরিবর্তন করেন, তাদের আর ভারসাম্য সম্পর্কিত তথ্যের প্রয়োজন হয় না। যাইহোক, দুটি ট্যাবগুলির মধ্যে স্যুইচিং সর্বদা পাওয়া উচিত, যেহেতু আমরা উভয় ট্যাবকে একই স্তরের স্তরের স্তরের দেই।

ইউআই ডিজাইন

চেহারা এবং অনুভূতি

মানিব্যাগের ইউআই স্টাইলটি কিন ব্র্যান্ডের স্টাইল গাইডের উপর ভিত্তি করে। আমরা নীল টোন, লাইন আইকন এবং ন্যূনতম লাইন চিত্র ব্যবহার করে বিজ্ঞান এবং প্রযুক্তি উল্লেখ করে একটি দৃষ্টিভঙ্গি তৈরি করা এবং বিশ্বাসযোগ্য এবং বন্ধুত্বপূর্ণ বলে মনে করি।

আত্মীয় স্টাইল গাইড থেকে: হিরো এবং স্পট চিত্র, লোগো ব্যবহার, রঙ এবং টাইপোগ্রাফিওয়ালেট ইউআই

অ্যানিমেশন এবং স্ক্রীন রূপান্তর

আমরা দুটি ধরণের অ্যানিমেশন ব্যবহার করেছি

  1. রূপান্তরগুলি যা ব্যবহারকারীর ক্রিয়াগুলিতে প্রতিক্রিয়া জানাবে এবং কী হবে তা নিয়ে প্রত্যাশা তৈরি করবে।
  2. বিশ্বস্ত এবং বন্ধুত্বপূর্ণ অনুভূতি তৈরির লক্ষ্যে আমাদের লক্ষ্যটি ধরে রেখে ত্রুটি এবং সিস্টেমের গ্লিটগুলি বন্ধুত্বপূর্ণ করা।

স্থানান্তর

ব্যবহারকারীগণ শর্তাদিতে সম্মতি জানার পরে ওয়ালেট সেট আপ করতে কয়েক সেকেন্ড সময় নেয়। এর অর্থ আমাদের কোনও ধরণের লোডিং স্টেট তৈরি করতে হয়েছিল। আমরা এই সুযোগটি ভিন - বিকেন্দ্রীকরণ এবং সম্প্রদায়ের পিছনে ধারণাগুলির উপর জোর দেওয়ার জন্য ব্যবহার করার সিদ্ধান্ত নিয়েছি।

লোগো (গোলাকার আকারের তৈরি গোলক) থেকে উপাদান ব্যবহার করে আমরা ব্যক্তিদের তাদের নিজস্ব গতি এবং দিকনির্দেশে চলার জন্য একটি রূপক তৈরি করেছি তবে এখনও একসাথে আসছি।

মাইক্রো মিথস্ক্রিয়া

আমরা মাইক্রো-ইন্টারঅ্যাকশনগুলিকে সর্বনিম্ন রাখার চেষ্টা করেছি এবং কেবল তাদের ব্যবহারের ক্রিয়াগুলির প্রতিক্রিয়া হিসাবে ব্যবহার করব।

এজ মামলা

এজ কেস এবং ত্রুটিযুক্ত রাজ্যগুলি কোনও দুর্দান্ত অভিজ্ঞতা নয়, তবুও আমাদেরও তাদের নকশাটিতে অ্যাকাউন্ট করতে হবে। আমরা একটি ত্রুটি রাষ্ট্রকে আরও বন্ধুত্বপূর্ণ দেখানোর উপায় খুঁজতে চেষ্টা করেছি।

এরপর কি

ব্যবহারকারীর প্রতিক্রিয়া প্রাপ্ত!

এই প্রকল্পে কাজ করার সময় আমাদের ব্যবহারযোগ্যতা, আমাদের ব্যবহারকারীদের জন্য সঠিক লেআউট এবং কিকের ভিতরে একটি নতুন চেহারা এবং অনুভূতির সাধারণ প্রতিক্রিয়া নিয়ে অনেক প্রশ্ন ছিল।
আমরা বর্তমানে ব্যবহারকারীর ওয়ার্কশপগুলি স্থাপন, প্রযোজনীয়তা পরীক্ষা-নিরীক্ষা করা এবং এই সংস্করণটি একবার চালু হওয়ার পরে ডেটা পাওয়ার প্রক্রিয়াধীন।