فیچر QR کد این امکان رو به کاربران میده که با اشتراکگذاری QR کد خودشون از طریق شخصبهشخص «P2P» یا پرینت کردن و چسباندن به مکانهای مختلف و … از دیگران پول دریافت کنند. شخص پرداختکننده هم باید با اسکن کردن QR کد و وارد کردن مبلغ مورد نظرش، پرداخت رو انجام بده.
در این کیس استادی میخوایم QR کد و مسیری که برای دیزاین کردن فیچر «مبلغ ثابت به QR کد» طی کردیم رو مرور کنیم.
نقش من
من به عنوان طراح محصول از مهر ۱۴۰۱ در لاینهای پروداکتی Reward – Payment – KYC مشغول به کار هستم و دیزاین کردن این فیچر یکی از اولین تسکهایی بود که در بلوبانک انجام دادم.
در مسیر طراحی این فیچر بنا به محدودیتهای موجود، خیلی به کلیت پروسههای دیزاینی که همه میشناسند پایبند نبودم و واقعیتهای بازار کار باعث شد تا بعضی از از متدهایی که در کلاسهای آموزشی در موردش صحبت میشه رو رد کنیم. پس این کیس استادی احتمالا با بقیهی کیس استادیهایی که خوندید، تفاوتهایی در ساختار و پروسه داره و صرفا براساس فیدبکهای مثبتی که دیزاین نهایی گرفت، تصمیم بر این شد که مسیر طی شده رو با شما به اشتراک بذارم.
این مطلب ابتدا در مدیوم و ویرگول منتشر شدهاست:
https://medium.com/design-bootcamp/case-study-adding-amount-to-qr-code-blu-bank-4916deb382e7
صحبت و طرح سوال برای فهم مسئله
به عنوان طراح محصول، درک صحیح و کامل نسبت به مسئلهای هست که قراره حل بشه، بسیار مهمه. برای همین سعی کردم با صحبت و پرسیدن سوالهای مختلف از آرش که مدیر محصول لاین پروداکتی Reward – Payment هست، درک صحیحی نسبت به مسئله داشته باشم و نقاط مبهمی که در ذهنم بود رو به مرور روشنتر و واضحتر کنم.
عملکرد فیچر QR کد به این شکله که پرداختکننده بعد از اسکن QR کد، باید مبلغ مورد نظرش رو وارد و پرداخت کنه و انتقال پول رو انجام بده.
اما یکسری کاربران از جمله فروشگاههای آنلاین، تاکسیهای خطی، مدیران ساختمان و بعضی سرویسدهندهها که خدماتی با قیمت ثابت دارند، نیاز داشتند که QR کدهای منحصربهفرد، براساس مبلغ مدنظرشون بسازن و اون رو با بقیه به اشتراک بذارن.
مزیتهای فیچر QR با مبلغ ثابت
- اطمینان: دریافتکننده پول میتونه مطمئن باشه مبلغ دریافتی کمتر از مبلغ مورد نظرش نیست و دیگه ارسالکننده نمیتونه سهوا یا عمدا، عدد اشتباهی رو وارد کنه و عملا یکی از نقاط درد (Pain Point) کاربران در پروسه پرداخت و انتقال، برطرف میشد.
- سرعت: 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 کد من» رسیدیم.
۲- براساس فیدبکهایی که توی تست دریافت کرده بودیم، آیکنهایی که در منوی اشتراکگذاری بودند رو تغییر دادیم تا کاربر تجربه بهتری داشته باشه.
خروجی نهایی
چیزهایی که یاد گرفتم
اهمیت همکاری تیمی:
فهمیدم که همکاری نزدیک با تیمهای مختلف چقدر میتونه به بهبود نتیجه کمک کنه و دریافت فیدبک از همتیمیها کمک کرد تا نقاط ضعف و قوت طراحی رو بهتر بشناسم و دیزاین نهایی رو بهبود ببخشیم.
ارزش تحلیل رقبا:
بررسی و یادگیری از اپلیکیشنهای مختلف همیشه ایدههای خوبی به ما میده، چه این اپلیکیشنها در صنعت ما باشن و چه نباشن.
ضرورت تست با کاربران:
تستهای مکرر با کاربران و گرفتن فیدبک از اونها خیلی مهمه و کمک میکنه مطمئن بشیم که دیزاین نهایی کارآمده و در غیر اینصورت، اون رو اصلاح کنیم.