محصول: نمادنو
پلتفرم: موبایل (iOS / Android)
نقش: طراح محصول (مالکیت کامل)
وقتی به پروژه پیوستم، سوپراپ در وضعیت پیچیدهای بود:
چالش دوگانه بود:
چالش کاربران: تجربه پراکنده و گیجکننده، عدم درک سریع از وضعیت مالی و خدمات
چالش تیم / شرکت: نبود داده و طراحی، پروژه ناکارآمد گذشته، نیاز به تصمیمگیری مستقل
از این آشفتگی شروع کنم و MVP قابل اعتماد و مقیاسپذیر بسازم که تجربه کاربری ساده، واضح و قابل اعتماد ارائه دهد.
در شروع پروژه، هیچ داده کاربری، گزارش استفاده، یا تحقیق قبلی در دسترس نبود. بنابراین فاز Discovery را با تمرکز روی همراستاسازی ذینفعان و استخراج دانش ضمنی تیم شروع کردم.
به جای توقف به دلیل نبود دیتا، یک مسیر تحقیق عملیاتی تعریف کردم.
اقدامات انجامشده:
از آنجا که داده کاربر واقعی در دسترس نبود، تحلیل الگو و مقایسه رقبا مبنای تصمیمسازی شد.
تمرکز تحلیل روی این موارد بود:
هدف: استخراج الگوهای پایدار و پرهیز از تکرار خطاهای تجربه پراکنده.
خروجی فاز Discovery چند الگوی تکرارشونده را نشان داد:
در واقع مسئله فقط طراحی چند سرویس مالی نبود مسئله طراحی یک مدل ذهنی واحد برای استفاده از چند سرویس در یک اپ بود.
بعد از فاز Discovery، مشخص شد مشکل اصلی فقط تعدد سرویسها نیست، بلکه نبود یک نقطه مرجع قابل فهم برای کاربر است. کاربران نیاز داشتند قبل از هر اقدام، وضعیت مالی خود را یکجا ببینند.
بنابراین جهت طراحی محصول را بر پایه یک مدل Dashboard-centric تعریف کردم — جایی که کاربر ابتدا تصویر تجمیعشدهای از دارایی و وضعیت مالی خود میبیند و سپس وارد سرویسها میشود.
این تصمیم باعث شد تجربه به جای “لیست سرویسها”، حول “وضعیت کاربر” شکل بگیرد.
ساختاری که تعریف کردم:
ساختار صفحه اصلی به این صورت تعریف شد:
هدف این ساختار:
اصول طراحی که منجر به این تصمیمات شد:
برای جلوگیری از بازتولید تجربه پراکنده قبلی، چند اصل طراحی را مبنا قرار دادم:
با توجه به نبود ساختار قبلی قابل استفاده، معماری اطلاعات را از پایه طراحی کردم.
هدف این بود که چند سرویس مالی ناهمگون، در قالب یک تجربه منسجم و قابل پیشبینی قرار بگیرند.
به جای طراحی هر سرویس بهصورت جداگانه، ابتدا یک چارچوب ساختاری مشترک تعریف کردم.
معماری محصول را در سه لایه تعریف کردم:
1. نگاه کلی (Overview)
نمای تجمیعشده وضعیت مالی کاربر: نقطه ورود و مرجع تصمیمگیری
2. خدمات اصلی
۶ سرویس اصلی با بیشترین اولویت و استفاده : دسترسی مستقیم و سریع
3. خدمات فرعی یا خرد
سرویسهای کمتکرار یا مکمل : دسترسی بدون ایجاد شلوغی شناختی
این لایهبندی کمک کرد که از ازدحام سرویسها در صفحه اصلی جلوگیری شود، مقیاسپذیری برای سرویسهای آینده حفظ شود و ساختار ذهنی مشخصی برای کاربر شکل بگیرد.
طراحی تجربه کاربری یکپارچه برای خدمات
با توجه به اینکه تمام سرویسها زیر یک تیم توسعه بودند، امکان تعریف یک الگوی جریان مشترک فراهم بود. برای همین، یک الگوی ثابت برای سرویسها تعریف کردم:
این الگو باعث شد:
تصمیم های کلیدی (Trade Off)
نمایش همزمان همه سرویسها در صفحه اول را رد کردم : به دلیل افزایش بار شناختی
تنوع بصری برای هر سرویس را محدود کردم: برای حفظ یکپارچگی تجربه
اطلاعات بیشازحد در داشبورد را حذف کردم : برای جلوگیری از تبدیل شدن آن به یک صفحه گزارش پیچیده
اعتمادسازی از لوگو
از گرادینت لوگو شروع کردم و آن را به یک سیستم تبدیل کردم:
هدف این بود که:
جداسازی کارت اصلی داشبورد
در داشبورد، یک کارت تجمیعی وجود دارد که موارد زیر را نمایش میدهد:
تصمیم گرفتم این کارت را از نظر بصری غالب کنم و از بقیه عناصر جدا کنم چون:
این یک تصمیم زیباییشناسانه نبود؛ یک تصمیم شناختی بود.
ساختار 6 خدمت اصلی
6 خدمت اصلی بر اساس نکات زیر چیدم:
از الگوی Grid متقارن استفاده کردم تا:
میکروسرویسها را در لایه پایینتر نگه داشتم تا:
از همان ابتدای پروژه، دو تنش اصلی جهت تصمیمهای طراحی را مشخص کردند. هر تصمیمی که گرفتم، پاسخی به یکی از این دو بود.
چالش 1: جامعیت در برابر سادگی
این محصول یک سوپراپ مالی بود. و سوپراپها یک مشکل کلاسیک دارند: هرچه سرویسهای بیشتری داشته باشی، خطر از دست دادن وضوح بیشتر میشود.
اگر همه سرویسها را در صفحه اول نشان میدادیم:
اما اگر تعداد کمی سرویس نمایش داده میشد:
راه حل من
به جای اضافه یا حذف سرویسها، ساختار را لایهبندی کردم:
کارت تجمیعی به عنوان نقطه ثبات شناختی عمل میکرد.
کاربر اول وضعیت خود را میدید،
بعد تصمیم میگرفت چه اقدامی انجام دهد.
این ترتیب، تجربه را از «لیست سرویسها»
به «تصمیم مالی آگاهانه» تبدیل کرد.
چالش ۲: یکپارچگی در رفتارهای مالی مختلف
سرویسها از نظر ماهیت بسیار متفاوت بودند به طور مثال:
اگر هر کدام تجربه مخصوص خودشان را داشتند، کاربر باید هر بار الگوی جدیدی یاد میگرفت. در یک محصول مالی، این یعنی اصطکاک.
راه حل من
یک الگوی جریان مشترک تعریف کردم و این الگو در همه سرویسها اعمال شد:
Entry → Input → Review → Confirmation → Success
کاربر بعد از استفاده از یک سرویس، بقیه را بدون استرس استفاده میکرد.
هدف این پروژه فقط بازطراحی UI نبود. هدف، ساختن وضوح در یک محیط مالی چندسرویسی بود.
مدل ذهنی واضح تر
قبل از این ساختار، سرویسها به شکل پراکنده دیده میشدند. بعد از لایهبندی:
این تغییر ترتیب، تجربه را از “feature browsing” به “financial decision-making” تبدیل کرد.
فنداسیون طراحی مقیاس پذیر
سیستم بصری که تعریف شد:
اعتماد سازی قویتر
هویت بصری یکپارچه و رفتار قابل پیشبینی:
در فینتک، Perception خودش یک KPI است.
کاهش اصطکاک شناختی
الگوی جریان مشترک باعث شد:
در محصولات مالی، کاهش اصطکاک شناختی = افزایش اعتماد.
طراحی بدون دیتا بهم یاد داد که روی ساختار تمرکز کنم
وقتی وارد پروژه شدم، نه داده رفتاری داشتیم، نه ریسرچ مستند، نه حتی یک نسخه موفق قبلی.
در چنین شرایطی، وسوسه این است که سریع UI بسازی و جلو بروی.
اما این پروژه به من یاد داد:
وقتی داده نداری، باید ساختار بسازی.
به جای اتکا به اعداد، روی اصول پایدار تمرکز کردم:
اما حتی بدون اینها، ساختن یک فاندیشن منسجم باعث شد محصول از حالت پراکنده به یک سیستم قابل رشد تبدیل شود.
این پروژه برای من فقط طراحی یک سوپراپ نبود. تمرینی بود در:
در مرحله بعد، اولویتبندی را از طریق دادههای رفتاری اعتبارسنجی میکنم و بر اساس فراوانی استفاده، اهمیت خدمات را اصلاح میکنم.
