موکاپ سینمایی دسکتاپ از صفحه اصلی بازطراحی‌شده ترنج کپیتال

بازطراحی وب‌سایت ترنج کپیتال

نقش
طراح محصول
مدت پروژه
۵ ماه
تیم
طراح محصول، مدیر محصول و دو توسعه‌دهنده
وضعیت
در انتظار انتشار
موکاپ سینمایی دسکتاپ از صفحه اصلی بازطراحی‌شده ترنج کپیتال

01زمینه و چالش

پیدا کردن خدمات در سایت قبلی آسان نبود

  1. 01محصولات سرمایه‌گذاری
  2. 02سبدگردانی
  3. 03خدمات سازمانی
  4. 04سنجش ریسک

از ساختار سایت تا پروتوتایپ

مسئولیت‌های من:

  • معماری اطلاعات
  • جریان‌های کاربر
  • طراحی تجربه کاربر
  • طراحی رابط کاربری
  • دیزاین سیستم
  • طراحی واکنش‌گرا
  • پروتوتایپ
  • بازطراحی تجربه سنجش ریسک
  • بازطراحی منطق سنجش ریسک

چه چیزی در بازطراحی تغییر کرد

01

صفحه اصلی

وب‌سایت پیشین

صفحه اصلی در وب‌سایت پیشین ترنج کپیتال

بازطراحی

صفحه اصلی در بازطراحی فعلی ترنج کپیتال
02

محصول سرمایه‌گذاری

وب‌سایت پیشین

محصول سرمایه‌گذاری در وب‌سایت پیشین ترنج کپیتال

بازطراحی

محصول سرمایه‌گذاری در بازطراحی فعلی ترنج کپیتال
03

سنجش ریسک

وب‌سایت پیشین

سنجش ریسک در وب‌سایت پیشین ترنج کپیتال

بازطراحی

سنجش ریسک در بازطراحی فعلی ترنج کپیتال

ساختار براساس نیاز کاربر

خانه
  • گزاره ارزش و اعتماد
  • خدمات براساس مخاطب
  • راهنمای سرمایه‌گذاری
  • کشف صندوق
  • معرفی شرکت
  • خبر و تماس
محصولات سرمایه‌گذاری
  • کشف و مقایسه صندوق
  • قالب صفحه محصول
  • اطلاعات اصلی و اقدام‌ها
  • ریسک و دارایی پایه
  • عملکرد
  • آموزش
  • ترکیب دارایی و تناسب
  • مقایسه و محاسبه‌گر
  • اسناد و پرسش‌ها
  • خرید یا مشاوره
خدمات مالی
  • سبدگردانی اختصاصی
  • بازارگردانی
  • تأمین مالی شرکتی
  • سرمایه‌گذاری جسورانه
سنجش ریسک
  • پرسش‌های ارزیابی
  • منطق امتیازدهی
  • پیشنهاد
شرکت
  • درباره و روش کار
  • تیم
  • اعتبارها
  • فرصت‌های شغلی
خبر و آموزش
  • محتوای تحریریه
اطلاعیه‌ها
  • اطلاعیه‌های قانونی
تماس
  • راه‌های تماس

شروع از هدف مشتری

کاربر ابتدا هدفش را انتخاب می‌کند، نوع سبد پیشنهادی را می‌بیند، سنجش ریسک را انجام می‌دهد و بعد برای مشاوره درخواست می‌دهد.

01

انتخاب هدف

02

مرور تیپ پیشنهادی سبد

03

تکمیل سنجش ریسک

04

درخواست مشاوره

سنجش ریسک در پنج مرحله

کاربر قدم‌به‌قدم اطلاعات لازم را وارد می‌کند و در پایان پیشنهاد متناسب را می‌بیند.

مسیر پیشنهاد

ورودی‌ها

ابعاد ارزیابی

پروفایل ریسک

پیشنهاد

شواهد رابط

  • هدر متمرکز و بازگشت به سایت
  • نشانگر پیشرفت پنج‌مرحله‌ای
  • ورودی مبلغ سرمایه‌گذاری
  • پرسش‌های انتخابی
  • سناریوی زیان رفتاری و فشار نقدشوندگی
  • ناوبری رفت و برگشت

اول ساختار، بعد ظاهر

مسیر انتخاب‌شدهسرمایه‌گذاری خرد

01خانه02کشف صندوق03مقایسه یا فیلتر04محصول05ریسک و عملکرد06اسناد یا آموزش07خرید یا مشاوره
بازسازی‌شده برای مستندسازی کیس‌استادی

کشف در صفحه اصلی

گزاره ارزش و اعتماد
خدمات با برچسب مخاطب
راهنمای سرمایه‌گذاری
کشف صندوق
01کشف در صفحه اصلی
بازسازی‌شده برای مستندسازی کیس‌استادی

آناتومی محصول

اطلاعات اصلی و اقدام
ریسک و عملکرد
ترکیب و تناسب
اسناد و خرید
02آناتومی محصول
بازسازی‌شده برای مستندسازی کیس‌استادی

انتخاب‌گر سبد

انتخاب هدف
تیپ پیشنهادی
شواهد و فرایند
سنجش و مشاوره
03انتخاب‌گر سبد
بازسازی‌شده برای مستندسازی کیس‌استادی

قالب خدمات سازمانی

گزاره خدمت
مسیر‌یاب
روش و شواهد
فرایند و فرم
04قالب خدمات سازمانی
بازسازی‌شده برای مستندسازی کیس‌استادی

سنجش ریسک

پیشرفت
پرسش یا ورودی
راهنمای زمینه‌ای
قبلی و بعدی
05سنجش ریسک
بازسازی‌شده برای مستندسازی کیس‌استادی

بازچینی واکنش‌گرا

گرید دسکتاپ
تبلت سیال
چیدمان موبایل
حفظ اقدام اصلی
06بازچینی واکنش‌گرا

تصمیم‌های مهم طراحی

ساختار براساس نیاز

سرمایه‌گذاری و خدمات مالی دو مسیر اصلی سایت هستند.

مسیر جدا برای هر مخاطب

سرمایه‌گذار، متقاضی سبدگردانی، ناشر و کسب‌وکار از یک مسیر عمومی عبور نمی‌کنند.

نمایش تدریجی اطلاعات

اول اطلاعات لازم برای تصمیم‌گیری دیده می‌شود؛ آموزش و اسناد در ادامه می‌آیند.

پیشنهاد سبد براساس هدف

هدف کاربر او را به نوع سبد مرتبط هدایت می‌کند.

راهنمای انتخاب روش تأمین مالی

کسب‌وکار پیش از دیدن فرم، روش‌های مناسب تأمین مالی را بررسی می‌کند.

تمرکز در سنجش ریسک

پرسش‌های سنجش ریسک از محتوای تبلیغاتی سایت جدا شده‌اند.

اقدام مشخص برای هر صفحه

هر صفحه اقدام متناسب خودش را دارد: خرید، مشاوره، درخواست یا شروع سنجش.

اطلاعات لازم برای اعتماد

مجوزها، روش کار، اسناد و راه تماس کنار تصمیم کاربر قرار گرفته‌اند.

صفحه‌های اصلی طراحی نهایی

رابط کاربری
00:34
دموی تعاملی صفحهٔ اصلی

حرکت، تغییر وضعیت‌ها و مسیرهای اصلی صفحه را در یک نمایش کوتاه ببینید.

حفظ اولویت‌ها در دسکتاپ و موبایل

در موبایل، محتوای مهم بالاتر می‌آید، ستون‌های کناری به بخش‌های پشت‌سرهم تبدیل می‌شوند و اقدام اصلی در دسترس می‌ماند.

۱۴۴۰ پیکسلدسکتاپ
نمای کاملجزئیات و مقایسه کنار هم
۷۶۸ پیکسلتبلت
چیدمان تطبیقیمحتوا در ستون‌های فشرده
۳۹۰ پیکسلموبایل
اقدام در اولویتمسیر اصلی، سریع و متمرکز

یک سیستم رابط برای همه صفحات

تایپوگرافی، رنگ‌ها و اجزای مشترک در همه صفحات ثابت‌اند و هر محصول رنگ مخصوص خودش را دارد.

نمونه وزن‌های مختلف تایپ‌فیس Peyda از Thin تا ExtraBlack
تایپوگرافی محصول
Peyda

طیف وزن‌های Peyda برای ساخت سلسله‌مراتبی روشن و خوانا در رابط فارسی.

02پالت رابط کاربری
  • اصلیاقدام‌ها و تأکید#5FC970
  • ثانویهاطلاعات مکمل#5C93D4
  • پس‌زمینه تیرهسطح اصلی تیره#1C1C1C
  • متن روشنمتن روی زمینه تیره#E2E8F0

چه چیزهایی بررسی شد و چه چیزهایی باقی مانده

نقاط قوت موجود

  • یک H1 در هرکدام از ۹ مسیر بررسی‌شده
  • نبود alt خالی در تصاویر شمارش‌شده
  • قواعد :focus-visible
  • پشتیبانی prefers-reduced-motion
  • نبود سرریز افقی در صفحه اصلی موبایل بررسی‌شده
  • ساختار معنایی توکن‌های تم و وضعیت

نیازهای باقی‌مانده

  • کنترل‌های کوچک‌تر از اندازه پیشنهادی ۴۴×۴۴ پیکسل
  • کنترل‌های بدون نام در خانه، محصول و سنجش ریسک
  • لینک‌های موبایل با ارتفاع ۲۶ پیکسل
  • دارایی‌های خراب در خانه، محصول و سنجش ریسک
  • بازچینی ضعیف تبلت
  • ورودی و ناوبری کوچک سنجش ریسک
  • مستندنشدن خطا و بازیابی فرم
  • نیاز به تست Screen Reader، صفحه‌کلید، کنتراست، زوم، reflow و خطا

ساختار آماده است؛ آزمون هنوز کامل نیست

خروجی طراحی

در ساختار جدید، سرمایه‌گذاری، سبدگردانی، خدمات کسب‌وکار و سنجش ریسک جای مشخصی دارند.

گام اعتبارسنجی

شواهد فعلی کیفیت طراحی و هماهنگی سیستم را نشان می‌دهند. کاربردپذیری، دسترس‌پذیری و اثر کسب‌وکار باید پس از انتشار سنجیده شوند.

اگر امروز دوباره طراحی می‌کردم

  1. برای تبلت یک گرید میانی طراحی می‌کردم تا صفحه شبیه نسخه باریک موبایل نباشد.

  2. وابستگی به فایل‌های جداگانه دسکتاپ و موبایل صفحه اصلی را کمتر می‌کردم.

  3. برای نمودارها، جدول‌ها و اعداد مالی قواعد واکنش‌گرای دقیق‌تری می‌نوشتم.

  4. رفتار دکمه ثابت را در ارتفاع کم و حالت بزرگ‌نمایی بررسی می‌کردم.

  5. ناوبری، فرم‌ها و سنجش ریسک را با صفحه‌کلید، لمس و تغییر جهت دستگاه آزمایش می‌کردم.

  6. قبل از ثبت تصاویر نهایی، فایل‌های خراب و کنترل‌های بدون نام را اصلاح می‌کردم.

در انتظار انتشار

هنوز شاخص تأییدشده‌ای از محصول یا کسب‌وکار نداریم.

خروجی پروژه شامل ساختار سایت، قالب صفحات، نسخه‌های واکنش‌گرا، اجزای مشترک و سنجش ریسک بازطراحی‌شده است.

چیزهایی که از پروژه یاد گرفتم

  • ساختار یک شرکت مالی باید براساس نیاز مخاطب باشد، نه چارت داخلی شرکت.

  • خدمات مرتبط می‌توانند اجزای مشترک داشته باشند، اما لازم نیست همه به یک فرم ختم شوند.

  • نمایش مرحله‌ای اطلاعات، صفحه را خلوت‌تر می‌کند بدون اینکه داده‌های مهم پنهان شوند.

  • طراحی واکنش‌گرا فقط نسخه دسکتاپ و موبایل نیست؛ تبلت هم به تصمیم جداگانه نیاز دارد.

  • وقتی پروژه هنوز منتشر نشده، جدا کردن واقعیت‌ها از فرض‌ها روایت را قابل‌اعتمادتر می‌کند.