بنیانگذار استودیو سرخ | مدیر هنری و طراح محصول | آرین مقبلی / Arian Moghbeli
داستان طراحی موبایل‌بانک تجارت
این داستان شاید خیلی قدیمی باشه. اما قدیمی‌ترین نیست!
داستان از اینجا شروع شد...
اوایل سال۱۳۹۳ بود که پورتفولیوم رو به همراه یک پروپوزال برای تیم کندو (مارکت برنامه‌های اندرویدی) فرستادم تا شاید تونستیم باهم همکاری کنیم.
خود کانسپتی که برای اپلیکیشن و سایت کندو طراحی کرده بودم در حد یک داستان جداگونه است.
دوستان عصر دانش افزار منو برای همکاری دعوت کردند... اما نه سایت و اپ کندو!
بلکه برای باز طراحی موبایل‌بانک تجارت :)
مرحله اول: مطالعه محصول
متاسفانه تصاویر زیادی از نسخه قبلی اپ ندارم. اگر بخوام اپ رو توصیف کنم باید بگم از طیف و نور استفاده شده بود و در زمینه پترن ریزی داشت. رنگ‌ها با سلیقه انتخاب نشده بوند و از چند طیف رنگ آبی و فیروزه‌ای تشکیل شده بود که صفحه رو شلوغ می‌کرد.
به عنوان یک اپ بانکی عملکرد هوشمندی نداشت. صفحه اول شبیه به دفترچه بانکی بود با یک جدول شلوغ. در منوی آن دسترسی به امکانات و سرویس‌های بانک قرار داشت و به سه بخش جمع‌شونده (بانک، برنامه‌ها و سایر) تقسیم می‌شدند!
مرحله دوم: مطالعه رقبا
اون سال‌ها بهترین سرویس موبایل‌بانک در اختیار بانک سامان (سامانک) بود و بقیه موبایل‌بانک‌ها عملکرد جالبی نداشتند و از استاندارد‌های طراحی و زبان طراحی مشخصی بهره‌مند نبودند.
اکثر موبایل‌بانک‌ها یک صفحه با آیکون‌های درشت بودند که با انتخاب هر یک وارد فرم طویلی می‌شدید که باید تمامی اطلاعات کارت شامل کد ۱۶ رقمی،تاریخ، کد CVV2 و رمز اینترنتی و سایر اطلاعات را پر می‌کردید تا عملیات بانکی انجام شود.
ایده‌های اولیه:
دوست داشتیم سرویس جدید هوشمند، ساده و دوست‌داشتنی باشد، نه مثل بانک‌های سنتی که کاربر را مجبور می‌کند هربار نوبت بگیرد، به باجه خود برود و فرم پرکند تا عملیات بانکی‌اش را انجام دهد!
سرویس ما باید مثل یک دستیار و کارشناس اقتصادی همراه کاربر باشد و کارهایش را سریع‌تر انجام دهد.
همه این حرف‌ها زیبا و راحته :)
اما خط زدن کلیشه‌ها و رسیدن به موبایل‌بانک هوشمند و آرمانی ما به همین راحتی نبود. ساعت‌ها و روزها ایده‌ها رو روی کاغذ می‌کشیدم تا به بهترین و ساده‌ترین user-flow برسم. این سادگی باید در شاکله صفحات هم نمود پیدا می‌کرد.
ساده‌گرایی، حذف هرچیز اضافه!
دنیای اعداد و محاسبات به اندازه کافی پیچیده‌است که ذهن کاربر را با پتر‌ن‌ها و خطوط آشفته کنیم.
آن زمان فونت یکان، بهترین انتخاب برای تایپوگرافی بود که می‌توانسیم استفاده کنیم.
خوانایی و تشخیص سریع اعداد و آمار از مهم‌ترین اولویت‌های طراحی مخصوصاً برای یک سرویس در حوزه Fin-tech هست.
طراحی آیکون:
طراحی مجموعه آیکون یکپارچه یکی دیگر از دستاوردهای طراحی این محصول بود که کمتر اتفاق می‌افتد. بدین منظور از رنگ‌های سازمانی بانک‌تجارت طراحی کردم. این آیکون‌ها برگرفته از آیکون‌های متریال بود و از سطوح رنگی آبی و فیروزه‌ای تشکیل شده بود.
موبایل‌بانک تجارت، اولین و جامع‌ترین سرویس بانکی بود که به کاربر اجازه میداد تمامی کارت‌بانک‌ها و حساب‌هایش را در این سامانه ثبت و مدیریت کند.
کافی بود کارت بانکی خود را تنها یک‌بار در سامانه ثبت کنید تا هربار نیاز نباشد اطلاعات کارت مبدا را وارد کنید. همچنین می‌توانستید کارت‌های مقصد را هم بصورت جداگانه ثبت کنید تا تراکنش را در سریع‌ترین مدت ممکن انجام دهید.
سیستم مدیریت چک یکی دیگر از جذابیت‌های این موبایل‌بانک بود.
متاسفانه در بسیاری از موارد محدودیت‌های زیرساخت فنی بانک مانع پیاده‌سازی و اجرای ایده‌هامون می‌شد. برای مثال دوست داشتیم بصورت خودکار از وضعیت چک‌ها باخبر شویم و قسط‌ها را بصورت خودکار پرداخت کنیم.
این پایان داستان همکاری من با مجموعه عصر دانش‌افزار نبود!
سال ۹۴ دوباره با من تماس گرفتند. موضوع، طراحی رابط‌کاربری و تجربه‌کاربری یک پلتفرم بانکی برای بانک قرض‌الحسنه مهر ایران و بانک سینا بود.
هم استانداردها تغییر کرده بود و هم سلیقه من. برای حقیقت بخشیدن رویاهامون هم دستمون بازتر بود.
چهارچوب کلی رو از بانک تجارت قرض گرفتیم اما تغییرات زیادی در طراحی اعمال کردم تا دسترسی‌ها ساده‌تر و سریع‌تر از پیش باشد.
این‌بار از فونت زیبای ایران-سنس استفاده کردیم تا هم امکان استفاده از وزن‌های بیشتر رو داشته باشیم و هم در خوانایی، بهترین تجربه رو در اختیار کاربر بذاریم.
منوی کناری رو حذف کردم و هر چه لازم بود در صفحات نمایش دادیم.
کاربر مثل سابق می‌توانست کارت و شماره حساب خود را وارد و آنها را مدیریت کند.
عدد تراکنش‌ها رو بزرگتر و مشخص‌تر، سمت چپ نمایش دادم تا سریع‌تر پیدا شوند. واریزی‌ها به رنگ سبز نمایش داده می‌شد تا هم بین پرداختی‌ها فاصله ایجاد کنند و هم مشخص باشند.
فقط برای دکمه‌ها و اکشن‌ها آیکون گذاشتم تا فرم دکمه‌ها از توضیحات جدا شوند.
از بسته آیکون‌های خطی وکتور استفاده کردم تا علاوه بر جذابیت بصری، به شناسایی و تشخیص کاربردشان سهولت بدهم.
استفاده از آمار و تجربه کاربران موبایل‌بانک تجارت کمک می‌کرد تا نسخه جدید را کاربردی‌تر از قبل طراحی کنم.
در این نسخه جدید، با دسترسی به لیست مخاطبان می‌توانستید لیستی از افرادی که با آنها مبادلات مالی دارید، ایجاد کنید. افراد خانواده، دوستان و همکاران یا حتی کارمندان شرکت می‌توانستند در لیست مخاطبان شما قرار بگیرند. شما می‌توانید کاربرانی که یک یا چند کارت بانکی یا حساب دارند را با تصویر در لیست خود قرار دهید و تاریخچه تراکنش‌های خود را دنبال کنید.
حتی می‌توانید برای هر کدام از آنها به‌صورت خودکار، مستمری دهید. این می‌تواند پول تو جیبی هفتگی فرزند شما باشد، حقوق ماهانه کارمندان شما یا حتی پرداخت قسط وام یا اجاره‌خانه که بصورت خودکار و برنامه‌ریزی شده پرداخت می‌شود.
سیستم انتقال وجه هم تغییرات مختصری کرد.
در موبایل‌بانک تجارت کارت مبدا بصورت پیشفرض انتخاب بود و کاربر می‌توانست آن را تغییر دهد، سپس مبلغ و بعد از آن کارت یا حساب مقصد را از لیست بازشونده انتخاب یا وارد می‌کرد.
اما در این سامانه جدید اولویت با مبلغ بود، سپس شماره کارت فرد جدید را وارد کند یا از لیست کاربران پرمخاطب انتخاب کند. لیست کاربران پر مخاطب بصورت هوشمند چیده می‌شود. مثلا اگر کاربر در فاصله زمانی معین برای «محمد سنایی» مبلغی را واریز می‌کند در همان فاصله زمانی، پیشنهاد می‌شود.
همچنین کاربر می‌توان از میان کارت‌های و حساب‌های مخاطب یکی را به عنوان کارت پیشفرض انتخاب کند یا هنگام پرداخت آن را تغییر دهد و حتی شماره جدیدی به مخاطب اختصاص دهد.
سپس کارت یا حسابی که در آن موجودی کافی دارد انتخاب و با ثبت رمز اینترنتی، عملیات پرداخت را نهایی کند.
همه چیز به همین راحتی انجام می‌شود و رسید تراکنش صادر می‌شود. کاربر می‌تواند روی هر رسیدی یادداشت منتشر کند و آنها را به اشتراک گذارد.
خطای انجام تراکنش یکی از بدترین صفحاتی است که کاربر با اون مواجه می‌شه. در بسیاری از سرویس‌های مشابه، طراحی این صفحه با اخطار و دکمه تلاش مجدد یا پیگیری رها می‌شه.
اما در سرویسی که طراحی کردم علاوه بر خطا و دلیل احتمالی آن به راهکارهای رفع خطا هم اشاره شد و در نهایت شماره تماس با پشتیبانی درج شده. این‌ها کمک می‌کند تا کاربر نگرانی کمتری در هنگام مواجهه با این صفحه داشته باشد.
بانک قرض‌الحسنه مهر ایران از بانک‌های اعطا کننده وام و تسهیلات ازدواج هست بنابر این یکی از قابلیت‌ها مهم آن پرداخت خودکار پرداخت وام بود. همچنین کاربر می‌تواند در این سیستم همه پرداختی‌ها را در قالب یادآور در تقویم ثبت و بصورت خودکار از حساب پرداخت کند.
هر طرحی عمری دارد... بهترین کاری که امروز انجام می‌دهیم شاید یک‌سال دیگر قدیمی و کهنه به نظر برسه. فاصله طراحی موبایل‌بانک تجارت و بانک قرض‌الحسنه مهر ایران شاید تنها یک‌سال‌ونیم - دو سال باشد ولی تغییراتی که برای ایجاد تجربه بهتر روی آن اعمال شد بسیار محسوس بود.
ممنون که این پست رو تا انتها خوندین.
با ارسال نظر و لایک انرژی بدین تا بیشتر از تجربه‌ها و داستان‌های طراحی بگم :)
خوشحال میشم من رو در شبکه‌های اجتماعی دنبال کنید:
مطلبی دیگر از این انتشارات
تفکر طراحی
مطلبی دیگر از این انتشارات
تاریخچه طراحی و سیر تحول لوگوی پژو
مطلبی دیگر از این انتشارات
همه چیز درباره دیزاین سیستم