بلوبانک یک نئوبانک ایرانی با بیش از ۸ میلیون کاربره که در اواخر سال ۱۳۹۹ شروع به کار کرد. این نئوبانک، بدون شعبه‌های فیزیکی و فرم‌های کاغذی عمل میکنه و تونسته سهم بسیار بالایی از کاربران رو بگیره و اون‌ها رو راضی نگه داره.
بلوبانک برای انتقال پول به سایرین، راهکارهای مختلفی رو به کاربرانش ارائه می‌ده، مثل انتقال هوشمند، انتقال خودکار، QR کد و …
فیچر QR کد این امکان رو به کاربران می‌ده که با اشتراک‌گذاری QR کد خودشون از طریق شخص‌به‌شخص «P2P» یا پرینت کردن و چسباندن به مکان‌های مختلف و … از دیگران پول دریافت کنند. شخص پرداخت‌کننده هم باید با اسکن کردن QR کد و وارد کردن مبلغ مورد نظرش، پرداخت رو انجام بده.
در این کیس استادی میخوایم QR کد و مسیری که برای دیزاین کردن فیچر «مبلغ ثابت به QR کد» طی کردیم رو مرور کنیم.
من به عنوان طراح محصول از مهر ۱۴۰۱ در لاین‌های پروداکتی Reward - Payment - KYC مشغول به کار هستم و دیزاین کردن این فیچر یکی از اولین تسک‌هایی بود که در بلوبانک انجام دادم.
در مسیر طراحی این فیچر بنا به محدودیت‌های موجود، خیلی به کلیت پروسه‌های دیزاینی که همه می‌شناسند پایبند نبودم و واقعیت‌های بازار کار باعث شد تا بعضی از از متدهایی که در کلاس‌های آموزشی در موردش صحبت میشه رو رد کنیم. پس این کیس استادی احتمالا با بقیه‌ی کیس استادی‌هایی که خوندید، تفاوت‌هایی در ساختار و پروسه داره و صرفا براساس فیدبک‌های مثبتی که دیزاین نهایی گرفت، تصمیم بر این شد که مسیر طی شده رو با شما به اشتراک بذارم.
به عنوان طراح محصول، درک صحیح و کامل نسبت به مسئله‌ای هست که قراره حل بشه، بسیار مهمه. برای همین سعی کردم با صحبت و پرسیدن سوال‌های مختلف از آرش که مدیر محصول لاین پروداکتی Reward - Payment هست، درک صحیحی نسبت به مسئله داشته باشم و نقاط مبهمی که در ذهنم بود رو به مرور روشن‌تر و واضح‌تر کنم.
عملکرد فیچر QR کد به این شکله که پرداخت‌کننده بعد از اسکن QR کد، باید مبلغ مورد نظرش رو وارد و پرداخت کنه و انتقال پول رو انجام بده.
اما یکسری کاربران از جمله فروشگاه‌های آنلاین، تاکسی‌های خطی، مدیران ساختمان و بعضی سرویس‌دهنده‌ها که خدماتی با قیمت ثابت دارند، نیاز داشتند که QR کدهای منحصربه‌فرد، براساس مبلغ مدنظرشون بسازن و اون رو با بقیه به اشتراک بذارن.
بعد از صحبت با مدیر محصول و درک کامل نیازمندی، سراغ بنچمارک رفتم تا با رفتار اپلیکیشن‌های مختلف آشنا بشم.
برای اینکه خروجی درستی داشته باشیم، فقط به آنالیز اپلیکیشن‌هایی که در صنعت ما بودن مثل Paypal و Google Pay اکتفا نکردم و سراغ اپ‌های قابل اعتمادی که فیچر QR و یا رفتاری مشابه رو داشتن رفتم. از Trust Wallet و Atomic Wallet گرفته تا Instagram و Telegram و حتی Clash of Clans.
نکته‌ی مهمی که باید بهش دقت می‌کردم، چک کردن پترن‌های مشابه در اپلیکیشن بلوبانک بود تا دیزاین نهایی از لحاظ Consistency با سایر جاهای بلوبانک مغایرت نداشته باشه.
اسکچ روی کاغذ و سپس فیگما
بعد از بنچمارک و بررسی‌های بسیار، ایده‌هایی که داشتم رو روی کاغذ پیاده کردم.
تلاشم بر این بود که خیلی سخت‌گیری خاصی نداشته باشم و تمام ایده‌هایی که دارم رو بدون توجه به محدودیت‌های فنی و وابستگی‌هایی که ممکنه به بقیه تیم‌ها داشته باشیم، روی کاغذ بیارم و در این مرحله، فیدبک‌هایی از هم‌تیمی‌هام بگیرم و ایده‌هایی که به‌نظر بهتر می‌اومدند رو یک مرحله جلوتر ببرم.
با توجه به محدویت‌های زمانی سراغ صفحه‌ی وایرفریم در فایل دیزاین رفتم و با استفاده از بلوکیت (دیزاین سیستم بلو) ایده‌هایی که روی کاغذ آورده بودم رو با فلوی مربوطه تبدیل به UI کردم.
عملا اتفاقی که اینجا می‌افته این هست که وایرفریم Low-Fidelity در فیگما رو با استفاده از دیزاین سیستم اسکیپ کردیم و حالا چندین دیزاین UI داریم که باید که با اعضای تیم دیزاین، لید دیزاین و مدیر محصول به اشتراک بذاریم و از اون‌ها فیدبک بگیریم.
با گرفتن فیدبک از تیم، نقاط ضعف و قوت ایده‌های که داشتیم رو بررسی کردیم و دیزاین‌هایی که از نظرمون مناسب نبودند رو کنار گذاشتیم و کم‌کم به دیزاین نهایی نزدیک و نزدیک‌تر شدیم.
بعدش دیزاین رو با تیم فنی به اشتراک گذاشتیم و فیدبک‌هایی که از سمت اون‌ها مطرح شد، باعث شد تغییراتی جزئی در دیزاین داشته باشیم.
مثلا در نسخه PWA نمی‌تونستیم روی کامپوننت Bottom Sheet، کامپوننت Text Input داشته باشیم، پس به این سمت رفتیم تا Text Input رو در یک صفحه‌ی جداگونه داشته باشیم.
در نهایت به دیزاینی رسیدیم که از نظر خودمون به راحت‌ترین شکل ممکن نیازهای کاربر رو برآورده می‌کرد. حالا وقت اون بود که کاربردپذیری اون رو بسنجیم.
الان نوبت این بود که ببینیم آیا یوزر هم با ما هم‌نظر هست و می‌تونه نیازش رو برطرف کنه یا نه.
به همین دلیل پروتوتایپ رو آماده کردیم، سناریوی تست رو نوشتیم و سعی کردیم با پنج نفر از کارمندان شرکت که در جریان این تسک نبودند، تست کاربردپذیری داشته باشیم.
سناریوی تست:
۱- فرض کن مدیر ساختمون هستی و میخوای برای دریافت شارژ ساختمون از ساکنین، یه QR کد با مبلغ ۵۰۰٬۰۰۰ تومان بسازی و پرینت کنی و بچسبونی به دیوار. چطور این کار رو انجام می‌دی؟
۲- فرض کن میخوای مبلغ QR کد خودت رو تغییر بدی به ۲۰۰٬۰۰۰. چطور این کار رو انجام می‌دی؟
۳- حالا میخوای مبلغ QR کد رو حذف کنی. چطور این کار رو انجام می‌دی؟
یکی از واقعیت‌های بازار کار اینه که شما برای تست گرفتن، همیشه به یوزرهاتون دسترسی ندارید و این کار هزینه زمانی و مالی داره، بنابراین یکی از راه‌های خوب، تست گرفتن از همکارانی هستش که سوگیری خاصی ندارند و اصطلاحا "Biased" نیستند.
با تستی که از همکارانمون گرفتیم، متوجه شدیم که دیزاین به خوبی کار میکنه و نرخ موفقیت چیزی نزدیک به ۱۰۰٪ بود.
الان نوبت اینه که پروتوتایپ رو کامل کنیم و تمامی فلوهای مختلف رو نشون بدیم تا هندآف درستی داشته باشیم تا دولوپرها درکی صحیح و کامل از دیزاین و در نهایت پیاده‌سازی مطابق با اون داشته باشند تا باگ‌های کمتری داشته باشن.
سایر موارد
با تست و فیدبک‌هایی که از یوزرها گرفتیم، متوجه شدیم که نیازه یه‌سری بهبودهای دیگه‌ای هم داشته باشیم.
۱- اسم فیچر «بلوپی» یا «blu Pay» بود که به اشتباه «blu pi» خونده می‌شد و خیلی برای یوزرها واضح نبود.
تصمیم گرفتیم تا اسم مناسب‌تری برای فیچر انتخاب کنیم و با بنچمارک و ایده‌پردازی به چند کاندید رسیدیم و با تستی که از یوزرها گرفتیم، به اسم «QR کد من» رسیدیم.
۲- براساس فیدبک‌هایی که توی تست دریافت کرده بودیم، آیکن‌هایی که در منوی اشتراک‌گذاری بودند رو تغییر دادیم تا کاربر تجربه بهتری داشته باشه.
اهمیت همکاری تیمی:
فهمیدم که همکاری نزدیک با تیم‌های مختلف چقدر می‌تونه به بهبود نتیجه کمک کنه و دریافت فیدبک از هم‌تیمی‌ها کمک کرد تا نقاط ضعف و قوت طراحی رو بهتر بشناسم و دیزاین نهایی رو بهبود ببخشیم.
ارزش تحلیل رقبا:
بررسی و یادگیری از اپلیکیشن‌های مختلف همیشه ایده‌های خوبی به ما می‌ده، چه این اپلیکیشن‌ها در صنعت ما باشن و چه نباشن.
ضرورت تست با کاربران:
تست‌های مکرر با کاربران و گرفتن فیدبک از اون‌ها خیلی مهمه و کمک میکنه مطمئن بشیم که دیزاین نهایی کارآمده و در غیر این‌صورت، اون رو اصلاح کنیم.
ممنون که تا اینجا همراه من بودید!
من سعی کردم مسیری که طی کردم رو با شما به اشتراک بذارم و به‌نظرم این کیس استادی تاحدودی می‌تونه تفاوت بین مطالبی که در دوره‌های آموزشی ارائه میشه و بازار کار رو نشون بده.
خوشحال می‌شم نظرات شما رو در مورد این کیس استادی بخونم.
لطفا اگه خوشتون اومد، با دوستانتون به اشتراک بذارید.
راه‌های ارتباطی با من:
