اپ ترنج (بیمه)

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

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

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

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

محصول تمام مسیر مرتبط با این طرح‌ها را پوشش می‌دهد: آشنایی و انتخاب، تعیین مبلغ، تکمیل اطلاعات هویتی و پستی، مرور پیش‌فاکتور، پرداخت، مشاهده سبد، جزئیات بیمه‌نامه، افزایش سرمایه، برداشت، تراکنش‌ها و مدیریت حساب بانکی.

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

خرید پیچیده را ساده و قابل‌فهم کنیم

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

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

طراحی محصول از معماری تا تحویل

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

  • معماری اطلاعات
  • طراحی جریان‌های کاربر
  • طراحی تجربه کاربر
  • طراحی رابط کاربری
  • دیزاین سیستم
  • پروتوتایپ
  • UX Writing
  • Design QA
  • همکاری با توسعه‌دهندگان و تحویل طراحی

سه مرحله مرتبط حول چرخه عمر بیمه‌نامه

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

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

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

از مشاهده طرح تا بیمه‌نامه فعال

01

مشاهده طرح‌ها

بررسی رز ترنج و افران.

02

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

بارگذاری وضعیت خرید مرتبط با طرح.

03

ورود مبلغ سرمایه‌گذاری

قالب‌بندی مبلغ و نمایش حداقل و واحد تقریبی.

04

تکمیل اطلاعات هویتی

اعتبارسنجی کد ملی، تاریخ تولد و مالکیت موبایل در صورت نیاز.

05

تکمیل اطلاعات پستی

اعتبارسنجی کد پستی ده‌رقمی و دریافت یا به‌روزرسانی آدرس.

06

مرور پیش‌فاکتور

بررسی هزینه‌ها و مبلغ با امکان ویرایش.

07

آماده‌سازی پرداخت

به‌روزرسانی جزئیات پرداخت و دریافت شناسه.

08

درگاه پرداخت

اتصال به درگاه پرداخت.

09

بیمه‌نامه فعال

پس از پردازش موفق، بیمه‌نامه در سبد نمایش داده می‌شود.

پیش از ایجاد پیش‌فاکتور، حداقل مبلغ، اطلاعات هویتی ضروری و کد پستی اعتبارسنجی می‌شوند. پیش‌فاکتور در انتظار پرداخت همچنان قابل‌ویرایش است تا کاربر بتواند جزئیات مالی را مرور یا مبلغ را پیش از پرداخت اصلاح کند.

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

ساختار، پیش از پرداخت بصری

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

9:41
ورود امن

ورود و OTP

برند، پیشرفت، عنوان و راهنما
شماره موبایل و OTP
دریافت کد / تأیید
اعتبار، ارسال مجدد و خطا
۰۱ورود و OTP
9:41
مقایسه طرح‌ها

کشف طرح

ناوبری و معرفی طرح
جابه‌جایی رز / افران
خلاصه مالی
شروع خرید
۰۲کشف طرح
9:41
مبلغ و شرایط

مبلغ سرمایه‌گذاری

طرح منتخب
مبلغ و واحد تقریبی
حداقل و شرایط
ادامه / بازخورد
۰۳مبلغ سرمایه‌گذاری
9:41
الزامات شرطی

هویت و اطلاعات پستی

توضیح الزامات
کد ملی و تاریخ تولد
کد پستی
تأیید / ذخیره
۰۴هویت و اطلاعات پستی
9:41
مدیریت بیمه‌نامه

داشبورد دارایی

ارزش کل و پنهان‌سازی
تعداد و کارت بیمه‌نامه
اقدامات اصلی
بارگذاری / خطای شبکه
۰۵داشبورد دارایی
9:41
واحد و سپس حساب

برداشت دومرحله‌ای

واحد و برآورد
اسلایدر و میان‌بر
حساب مقصد
ثبت / بازخورد
۰۶برداشت دومرحله‌ای
9:41
بیمه‌نامه فعال

جزئیات بیمه‌نامه

وضعیت، ارزش و واحد
تاریخ و جزئیات مالی
بیمه و تخصیص
واریز / برداشت
۰۷جزئیات بیمه‌نامه

منطق طراحی از نگاه امروز

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

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

رز با رنگ زرشکی و سرمایه‌گذاری مبتنی بر طلا معرفی می‌شود. افران از رنگ آبی و مفهوم درآمد ثابت استفاده می‌کند. ساختار خرید و مدیریت در هر دو یکسان است.

تشخیص دو طرح بدون نیاز به یادگیری دو رابط متفاوت.مرز رنگ‌های اختصاصی طرح با اقدامات عمومی باید دقیق باشد.

ارزش روز، مبلغ پرداخت، تعداد واحد و مبلغ قابل برداشت نسبت به اطلاعات ثانویه برجستگی بیشتری دارند.

اعداد تصمیم‌ساز سریع‌تر دیده می‌شوند.صفحات جزئیات همچنان می‌توانند پرتراکم باشند.

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

زمینه طرح یا بیمه‌نامه حفظ می‌شود.عملیات طولانی در فضای دراور به کنترل دقیق نیاز دارند.

تعداد واحد قابل فروش و انتخاب حساب مقصد در دو مرحله جدا قرار گرفته‌اند.

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

برداشت تنها به حساب بانکی ثبت‌شده و تأییدشده انجام می‌شود.

ریسک انتقال به حساب نامرتبط کاهش می‌یابد.برداشت نخست ممکن است نیازمند ثبت حساب باشد.

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

خطاهای قابل‌پیشگیری پیش از ثبت درخواست مالی نمایش داده می‌شوند.

متن فارسی راست‌به‌چپ است؛ اما شماره موبایل، شبا، تاریخ، مبلغ و شناسه‌ها قالب مناسب عددی خود را حفظ می‌کنند.

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

ساختار موبایلی مشترک با هویت مستقل هر طرح

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

تعامل‌های مناسب برای نمایش

  • 01

    ورود OTP، حالت غیرفعال و زمان ارسال مجدد

  • 02

    پیشرفت آنبوردینگ

  • 03

    جابه‌جایی میان رز و افران

  • 04

    ورود و قالب‌بندی مبلغ

  • 05

    اعتبارسنجی هویت و انتخاب تاریخ شمسی

  • 06

    ویرایش پیش‌فاکتور و آماده‌سازی پرداخت

  • 07

    نمایش و پنهان‌کردن موجودی

  • 08

    فیلتر تراکنش‌ها

  • 09

    اعتبارسنجی واریز

  • 10

    انتخاب واحد و میان‌برهای درصدی برداشت

  • 11

    انتخاب حساب مقصد

  • 12

    بازخورد بارگذاری، خطا و موفقیت

الگوهای قابل‌استفاده مجدد

تایپوگرافی محصول بر پایه Peyda است و محتوا در قابی موبایلی با عرض حداکثر ۴۴۰ پیکسل قرار می‌گیرد.

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

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

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

رنگ‌هاهویت مشترک، تمایز محصول
  • #006B54
    سبز ترنجاقدامات عمومی
  • #8E3F4C
    زرشکی رزهویت طرح طلا
  • #1769AA
    آبی افرانهویت درآمد ثابت
  • #E9EEF3
    خاکستری رابطسطوح و اطلاعات

فراتر از مسیر ایده‌آل خرید

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

جمع‌بندی تجربه نهایی

نقاط قوت

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

فرصت‌ها

  • افزایش اندازه و کنتراست متن‌های ثانویه
  • جداسازی روشن‌تر خلاصه مالی از جزئیات فنی
  • کاهش تنوع کارت‌ها و سطوح
  • تعریف دقیق‌تر رنگ اقدامات عمومی و اختصاصی
  • استانداردسازی کنترل‌های کوچک و قاب آیکون‌ها

ریسک‌ها

  • تراکم اطلاعات بیمه‌نامه در نمایشگرهای کوچک
  • نیاز کنترل‌های کوچک به ارزیابی لمس‌پذیری
  • نیاز اطلاعات ترکیبی RTL و LTR به تست دسترس‌پذیری
  • انجام‌نشدن ارزیابی رسمی کنتراست، فوکوس، صفحه‌کلید، Screen Reader و بزرگ‌نمایی

اصولی که این پروژه تقویت کرد

  • وضعیت‌های میانی به‌اندازه شروع و پایان موفق اهمیت دارند.
  • الزامات بیمه و احراز هویت باید حول وظیفه اصلی کاربر مرحله‌بندی شوند.
  • دو محصول مالی می‌توانند هویت متفاوت اما الگوی تعامل مشترک داشته باشند.
  • رابط مالی موبایل به مرز روشن میان خلاصه و جزئیات فنی نیاز دارد.
  • محدودیت‌ها و برآوردهای واریز و برداشت باید پیش از ثبت نمایش داده شوند.
  • محصول مالی فارسی نیازمند مدیریت آگاهانه محتوای RTL و شناسه‌های LTR است.