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

01زمینه و چالش
پیدا کردن خدمات در سایت قبلی آسان نبود
- 01محصولات سرمایهگذاری
- 02سبدگردانی
- 03خدمات سازمانی
- 04سنجش ریسک
از ساختار سایت تا پروتوتایپ
مسئولیتهای من:
- معماری اطلاعات
- جریانهای کاربر
- طراحی تجربه کاربر
- طراحی رابط کاربری
- دیزاین سیستم
- طراحی واکنشگرا
- پروتوتایپ
- بازطراحی تجربه سنجش ریسک
- بازطراحی منطق سنجش ریسک
چه چیزی در بازطراحی تغییر کرد
صفحه اصلی
وبسایت پیشین

بازطراحی

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

بازطراحی

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

بازطراحی

ساختار براساس نیاز کاربر
- گزاره ارزش و اعتماد
- خدمات براساس مخاطب
- راهنمای سرمایهگذاری
- کشف صندوق
- معرفی شرکت
- خبر و تماس
- کشف و مقایسه صندوق
- قالب صفحه محصول
- اطلاعات اصلی و اقدامها
- ریسک و دارایی پایه
- عملکرد
- آموزش
- ترکیب دارایی و تناسب
- مقایسه و محاسبهگر
- اسناد و پرسشها
- خرید یا مشاوره
- سبدگردانی اختصاصی
- بازارگردانی
- تأمین مالی شرکتی
- سرمایهگذاری جسورانه
- پرسشهای ارزیابی
- منطق امتیازدهی
- پیشنهاد
- درباره و روش کار
- تیم
- اعتبارها
- فرصتهای شغلی
- محتوای تحریریه
- اطلاعیههای قانونی
- راههای تماس
شروع از هدف مشتری
کاربر ابتدا هدفش را انتخاب میکند، نوع سبد پیشنهادی را میبیند، سنجش ریسک را انجام میدهد و بعد برای مشاوره درخواست میدهد.
انتخاب هدف
مرور تیپ پیشنهادی سبد
تکمیل سنجش ریسک
درخواست مشاوره
سنجش ریسک در پنج مرحله
کاربر قدمبهقدم اطلاعات لازم را وارد میکند و در پایان پیشنهاد متناسب را میبیند.
مسیر پیشنهاد
ورودیها
ابعاد ارزیابی
پروفایل ریسک
پیشنهاد
شواهد رابط
- هدر متمرکز و بازگشت به سایت
- نشانگر پیشرفت پنجمرحلهای
- ورودی مبلغ سرمایهگذاری
- پرسشهای انتخابی
- سناریوی زیان رفتاری و فشار نقدشوندگی
- ناوبری رفت و برگشت
اول ساختار، بعد ظاهر
مسیر انتخابشدهسرمایهگذاری خرد
کشف در صفحه اصلی
آناتومی محصول
انتخابگر سبد
قالب خدمات سازمانی
سنجش ریسک
بازچینی واکنشگرا
تصمیمهای مهم طراحی
ساختار براساس نیاز
سرمایهگذاری و خدمات مالی دو مسیر اصلی سایت هستند.
مسیر جدا برای هر مخاطب
سرمایهگذار، متقاضی سبدگردانی، ناشر و کسبوکار از یک مسیر عمومی عبور نمیکنند.
نمایش تدریجی اطلاعات
اول اطلاعات لازم برای تصمیمگیری دیده میشود؛ آموزش و اسناد در ادامه میآیند.
پیشنهاد سبد براساس هدف
هدف کاربر او را به نوع سبد مرتبط هدایت میکند.
راهنمای انتخاب روش تأمین مالی
کسبوکار پیش از دیدن فرم، روشهای مناسب تأمین مالی را بررسی میکند.
تمرکز در سنجش ریسک
پرسشهای سنجش ریسک از محتوای تبلیغاتی سایت جدا شدهاند.
اقدام مشخص برای هر صفحه
هر صفحه اقدام متناسب خودش را دارد: خرید، مشاوره، درخواست یا شروع سنجش.
اطلاعات لازم برای اعتماد
مجوزها، روش کار، اسناد و راه تماس کنار تصمیم کاربر قرار گرفتهاند.
صفحههای اصلی طراحی نهایی
حفظ اولویتها در دسکتاپ و موبایل
در موبایل، محتوای مهم بالاتر میآید، ستونهای کناری به بخشهای پشتسرهم تبدیل میشوند و اقدام اصلی در دسترس میماند.
یک سیستم رابط برای همه صفحات
تایپوگرافی، رنگها و اجزای مشترک در همه صفحات ثابتاند و هر محصول رنگ مخصوص خودش را دارد.

طیف وزنهای Peyda برای ساخت سلسلهمراتبی روشن و خوانا در رابط فارسی.
- اصلیاقدامها و تأکید
#5FC970 - ثانویهاطلاعات مکمل
#5C93D4 - پسزمینه تیرهسطح اصلی تیره
#1C1C1C - متن روشنمتن روی زمینه تیره
#E2E8F0
چه چیزهایی بررسی شد و چه چیزهایی باقی مانده
نقاط قوت موجود
- یک H1 در هرکدام از ۹ مسیر بررسیشده
- نبود alt خالی در تصاویر شمارششده
- قواعد :focus-visible
- پشتیبانی prefers-reduced-motion
- نبود سرریز افقی در صفحه اصلی موبایل بررسیشده
- ساختار معنایی توکنهای تم و وضعیت
نیازهای باقیمانده
- کنترلهای کوچکتر از اندازه پیشنهادی ۴۴×۴۴ پیکسل
- کنترلهای بدون نام در خانه، محصول و سنجش ریسک
- لینکهای موبایل با ارتفاع ۲۶ پیکسل
- داراییهای خراب در خانه، محصول و سنجش ریسک
- بازچینی ضعیف تبلت
- ورودی و ناوبری کوچک سنجش ریسک
- مستندنشدن خطا و بازیابی فرم
- نیاز به تست Screen Reader، صفحهکلید، کنتراست، زوم، reflow و خطا
ساختار آماده است؛ آزمون هنوز کامل نیست
در ساختار جدید، سرمایهگذاری، سبدگردانی، خدمات کسبوکار و سنجش ریسک جای مشخصی دارند.
شواهد فعلی کیفیت طراحی و هماهنگی سیستم را نشان میدهند. کاربردپذیری، دسترسپذیری و اثر کسبوکار باید پس از انتشار سنجیده شوند.
اگر امروز دوباره طراحی میکردم
برای تبلت یک گرید میانی طراحی میکردم تا صفحه شبیه نسخه باریک موبایل نباشد.
وابستگی به فایلهای جداگانه دسکتاپ و موبایل صفحه اصلی را کمتر میکردم.
برای نمودارها، جدولها و اعداد مالی قواعد واکنشگرای دقیقتری مینوشتم.
رفتار دکمه ثابت را در ارتفاع کم و حالت بزرگنمایی بررسی میکردم.
ناوبری، فرمها و سنجش ریسک را با صفحهکلید، لمس و تغییر جهت دستگاه آزمایش میکردم.
قبل از ثبت تصاویر نهایی، فایلهای خراب و کنترلهای بدون نام را اصلاح میکردم.
در انتظار انتشار
هنوز شاخص تأییدشدهای از محصول یا کسبوکار نداریم.
خروجی پروژه شامل ساختار سایت، قالب صفحات، نسخههای واکنشگرا، اجزای مشترک و سنجش ریسک بازطراحیشده است.
چیزهایی که از پروژه یاد گرفتم
ساختار یک شرکت مالی باید براساس نیاز مخاطب باشد، نه چارت داخلی شرکت.
خدمات مرتبط میتوانند اجزای مشترک داشته باشند، اما لازم نیست همه به یک فرم ختم شوند.
نمایش مرحلهای اطلاعات، صفحه را خلوتتر میکند بدون اینکه دادههای مهم پنهان شوند.
طراحی واکنشگرا فقط نسخه دسکتاپ و موبایل نیست؛ تبلت هم به تصمیم جداگانه نیاز دارد.
وقتی پروژه هنوز منتشر نشده، جدا کردن واقعیتها از فرضها روایت را قابلاعتمادتر میکند.