مطالعه موردی · طراحی محصول مالی
طراحی رابط و تجربه کاربر ویستا
زمینه پروژه
ویستا یک اکوسیستم دیجیتال برای دسترسی به محصولات سرمایه‌گذاری، خدمات سازمانی، محتوا و آموزش، تصمیم‌یار و سنجش ریسک و حساب و ورود است.
دامنه طراحی، صفحه اصلی، صفحات صندوق‌ها، سبدگردانی، بازارگردانی و خدمات B2B، بلاگ، سنجش ریسک و جریان‌های ورود را دربر می‌گرفت.
چالش
چالش طراحی از هم‌پوشانی سه مسئله شکل می‌گرفت؛ بدون آنکه پیچیدگی واقعی خدمات مالی پنهان شود.
پیچیدگی خدمات
محصولات و خدمات متعدد، مخاطبان و زمینه‌های تصمیم متفاوتی دارند.
کشف‌پذیری
کاربر باید بدون مطالعه همه صفحات، نقطه شروع و خدمت مرتبط را تشخیص دهد.
اعتماد و وضوح
تجربه مالی به اطلاعات روشن، نشانه‌های معتبر و ناوبری قابل پیش‌بینی نیاز دارد.
بیان مسئلهچگونه می‌توان یک اکوسیستم مالی چندخدمتی را به تجربه‌ای منسجم، قابل‌فهم و قابل‌اقدام تبدیل کرد، بدون اینکه پیچیدگی واقعی خدمات مالی پنهان شود؟
نقش و محدوده
در نقش طراح UI/UX، مسئول تعریف ساختار تجربه و تبدیل آن به رابطی منسجم و واکنش‌گرا بودم؛ از معماری صفحات تا الگوهای قابل استفاده مجدد و تحویل طراحی.
مسئولیت‌های طراحی
- ساختار UX و سلسله‌مراتب صفحات
- معماری اطلاعات
- تعریف جریان‌های کاربر
- وایرفریم و اکتشاف چیدمان
- طراحی رابط واکنش‌گرا
- طراحی بصری UI
- الگوهای تعاملی و کامپوننتی
- تحویل طراحی و همکاری با توسعه
محدوده پروژه
- تجربه اصلی
- صفحه اصلی
- محصولات
- محصولات سرمایه‌گذاری
- خدمات سازمانی
- بازارگردانی و B2B
- تصمیم‌یار و سنجش ریسک
- جریان ارزیابی و نتیجه
- محتوا و آموزش
- بلاگ و مقاله
- حساب و ورود
- ورود سرمایه‌گذار و OTP
شناخت اکوسیستم
دامنه خدمات بر اساس نوع محتوا، تصمیم و مسیر دسترسی کاربر گروه‌بندی شد.
محصولات سرمایه‌گذاری
- صندوق‌های ویستا
- ثبات
- آکام
- بهین‌رو
- سبدگردانی / PMA
خدمات سازمانی
- بازارگردانی
- خدمات B2B
محتوا و آموزش
- درباره ویستا
- بلاگ
- محتوای آموزشی
تصمیم‌یار و سنجش ریسک
- پرسش‌ها
- پروفایل ریسک
- گام پیشنهادی
حساب و ورود
- ورود سرمایه‌گذار
- OTP
کاربران و نیازها
گروه‌های کاربری بر اساس نیاز و کاری که می‌خواهند انجام دهند تنظیم شدند.
سرمایه‌گذار در حال انتخاب
شناخت گزینه‌ها و انتخاب مسیر مناسب.
متقاضی مدیریت حرفه‌ای
درک سبدگردانی و شروع درخواست مشاوره.
کاربر تصمیم‌یار و سنجش ریسک
شناخت پروفایل ریسک و گام بعدی.
مشتری خدمات سازمانی
کشف خدمات سازمانی و ثبت درخواست.
کاربر محتوا و آموزش
دسترسی به آموزش و تحلیل پیش از تصمیم‌گیری.
جریان‌های اصلی کاربر
جریان‌های اصلی، مسیر حرکت از نقطه ورود تا اقدام مرتبط را نشان می‌دهند.
انتخاب صندوق
- 1خانه
- 2راهکارها
- 3صندوق‌ها
- 4جزئیات صندوق
- 5اقدام
سبدگردانی
- 1خانه
- 2سبدگردانی
- 3شناخت مزایا
- 4درخواست مشاوره
تصمیم‌یار و سنجش ریسک
- 1خانه
- 2سنجش
- 3پرسش‌ها
- 4نتیجه
- 5گام پیشنهادی
خدمات سازمانی
- 1خانه
- 2B2B / بازارگردانی
- 3جزئیات
- 4درخواست خدمت
تصمیم‌های کلیدی UX
ساختار مشترک صفحات خدمات
- مسئله
- محتوا متفاوت است، اما کاربر نباید ناوبری را دوباره یاد بگیرد.
- تصمیم
- الگوی سازگار Hero، مزایا، جزئیات و CTA.
- منطق
- کاهش تغییر زمینه ذهنی.
- ملاحظه
- برخی صفحات به ماژول اختصاصی نیاز دارند.
چند ورودی سرمایه‌گذاری
- مسئله
- کاربران با آگاهی و قصد متفاوت وارد می‌شوند.
- تصمیم
- نمایش صندوق‌ها، سبدگردانی و سنجش ریسک به‌صورت موازی.
- منطق
- اجتناب از یک قیف اجباری.
- ملاحظه
- گزینه‌های اولیه به سلسله‌مراتب قوی نیاز دارند.
سنجش ریسک به‌عنوان تصمیم‌یار
- مسئله
- انتخاب مالی می‌تواند از نظر شناختی سنگین باشد.
- تصمیم
- مراحل تدریجی و نتیجه روشن.
- منطق
- محدودکردن بار اطلاعاتی هر مرحله.
- ملاحظه
- اعتبار مدل مالی خارج از محدوده طراحی است.
محتوا درون اکوسیستم
- مسئله
- برخی کاربران پیش از اقدام به آموزش نیاز دارند.
- تصمیم
- یکپارچه‌کردن بلاگ با تجربه اصلی.
- منطق
- پشتیبانی از تصمیم آگاهانه.
- ملاحظه
- ارتباط محصول و محتوا نباید تبلیغاتی شود.
سنجش ریسک
این بخش منطق طراحی جریان را توضیح می‌دهد و درباره اعتبار مالی یا حقوقی نتیجه ادعایی ندارد.
فرم متراکم و یک‌مرحله‌ای می‌توانست درک سؤال‌ها و دنبال‌کردن مسیر را دشوار کند.
برای کاهش بار شناختی و هدایت مرحله‌ای تصمیم، سنجش ریسک به یک جریان چندمرحله‌ای تقسیم شد.
- 1ورود
- 2پرسش‌ها
- 3پیشرفت
- 4تکمیل
- 5پروفایل ریسک
- 6گام پیشنهادی
- یک تصمیم در هر مرحله
- پیشرفت قابل مشاهده
- حالت انتخاب روشن
- نتیجه قابل‌فهم
- CTA پس از نتیجه
نتیجه سنجش ریسک
حالت نهایی، جمع‌بندی پروفایل و گام پیشنهادی را در پایان جریان نمایش می‌دهد.
طراحی صفحات خدمات
سیستم صفحه توسعه‌پذیر، ساختار پایه را ثابت نگه می‌دارد و اجازه می‌دهد هر خدمت ماژول‌های متناسب با زمینه خود داشته باشد.
- 01Hero
- 02پیشنهاد ارزش
- 03توضیح پشتیبان
- 04مزایا
- 05اعتماد یا محتوا
- 06CTA
سبدگردانی / PMA
فرآیند و مشاوره
بازارگردانی
خدمت سازمانی
خدمات B2B
دامنه خدمات
صفحات صندوق
اطلاعات محصول
ترتیب ماژول‌ها، عمق توضیح و نوع CTA بر اساس زمینه خدمت تغییر می‌کند.
دو کاربرد از یک الگوی مشترک؛ ساختار ثابت می‌ماند و محتوا، عمق توضیح و اقدام متناسب با نوع خدمت تغییر می‌کند.
سبدگردانی اختصاصی / PMA
کاربرد الگوی صفحه خدمت برای معرفی فرایند و هدایت به درخواست مشاوره.
خدمات B2B
همان ساختار پایه با ماژول‌ها و اقدام متناسب با مخاطب سازمانی.
نمونه‌های نهایی رابط کاربری
دو صفحه جزئیات محصول، کاربرد یک ساختار تکرارپذیر را برای صندوق‌هایی با محتوای متفاوت نشان می‌دهند.
صندوق آکام
نمونه‌ای از ساختار صفحه جزئیات محصول برای صندوق آکام.
صندوق ثبات
همان ساختار تکرارپذیر با محتوای صندوق ثبات.
سیستم بصری و مبانی رابط کاربری
سیستم بصری، تایپوگرافی، رنگ‌های استفاده‌شده در رابط و قواعد پایه اجزای تکرارشونده را یکپارچه می‌کند.
فونت رابط کاربری
Yekan Bakh FaNum
Regular · SemiBold · Bold · ExtraBold · Blackرنگ‌های استفاده‌شده در رابط
- #374151
- #3A52A0
- #034EA2
- #01B69B
سلسله‌مراتب تایپ
سطوح مشخص برای عنوان، توضیح، داده، برچسب و اقدام.
فاصله و گرید
ریتم منظم برای صفحات محتوایی و ماژول‌های متراکم.
رنگ و کنتراست
تفکیک نقش رنگ‌های رابط، خنثی، بازخورد و حالت‌ها.
شکل و سطح
کارت‌ها، مرزها و سطوح با تزئین کنترل‌شده و هدفمند.
- Navbar
- Footer
- Cards
- Buttons
- Forms
- Fund patterns
- Responsive modules
دسترس‌پذیری
ملاحظات دسترس‌پذیری بر خوانایی و پیش‌بینی‌پذیری تعامل تمرکز داشتند.
کنتراست
تمایز متن، پس‌زمینه و کنترل‌ها.
سلسله‌مراتب خوانا
ساختار مناسب برای اسکن.
هدف لمسی
فضای کافی برای کنترل‌ها.
حالت‌های قابل مشاهده
انتخاب، تمرکز و وضعیت فرم.
برچسب فرم
عدم اتکا به placeholder.
ناوبری قابل پیش‌بینی
رفتار ثابت مسیرهای اصلی.
فراتر از رنگ
متن یا شکل در کنار رنگ.
ارزیابی بازنگرانه
به‌دلیل نبود داده آزمون کاربردپذیری، این بخش مرور تخصصی بازنگرانه است و نتیجه رفتاری اندازه‌گیری‌شده محسوب نمی‌شود.
- 01سازگاری
- 02وضعیت سیستم
- 03بازشناسی به‌جای یادآوری
- 04سلسله‌مراتب
- 05پیشگیری از خطا
- 06پیوستگی تجربه در اندازه‌های مختلف صفحه
نقاط قوت
- زبان تعاملی مشترک در کل اکوسیستم.
- مسیرهای موازی برای قصدهای متفاوت.
- تداوم ساختاری دسکتاپ و موبایل.
فرصت‌های بهبود
- کاهش تراکم بعضی صفحات خدمات.
- مقایسه مستقیم‌تر محصولات.
- پیشنهاد زمینه‌ای روشن‌تر پس از سنجش ریسک.
نتیجه و آموخته‌ها
خروجی طراحی، یک سیستم منسجم و واکنش‌گرا برای محصولات سرمایه‌گذاری، خدمات سازمانی، محتوا و آموزش، تصمیم‌یار و سنجش ریسک و حساب و ورود بود.
آموخته‌ها
- در تجربه مالی، وضوح پیش از پیچیدگی بصری است.
- سیستم صفحه توسعه‌پذیر از طراحی مستقل صفحات ارزشمندتر است.
- قصدهای متفاوت نباید به یک قیف واحد محدود شوند.
- جریان تصمیم‌یار به هدایت قوی‌تری نیاز دارد.
اگر امروز به پروژه برمی‌گشتم
- آزمون کاربردپذیری ساختاریافته
- ارزیابی قیف با analytics
- ابزار مقایسه صندوق‌ها
- شخصی‌سازی زمینه‌ای
- ممیزی رسمی دسترس‌پذیری