پرش به محتوای اصلی
Case Study · وب‌سایت مقایسه و استعلام بیمه

فرم‌های بیمه‌ای پیچیده، به یک مسیر مرحله‌ای و قابل فهم تبدیل شدند

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

InsuranceQuoteComparisonUX
بیمه‌یار
نتیجه کلیدیاستعلام مرحله‌ای بدون فرم بلند
مشتری / برندکارگزاری بیمه فرضی
مدت اجرا۹ هفته
شروع پروژه
لانچ / تحویل
تعداد صفحات
وضعیتدموی کامل پورتفولیو
نمای کلی

پروژه از چه مسئله‌ای شروع شد؟

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

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

Scope پروژه

استعلام، مقایسه، خرید و پیگیری

چالش

چالش اصلی پروژه

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

راهکار

راهکار طراحی‌شده

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

اهداف پروژه

خروجی‌هایی که باید واقعاً به دست می‌آمدند

01

کاهش پیچیدگی فرم

نمایش سؤال فقط در زمان لازم.

02

کاهش خطای ورودی

راهنمای اصطلاح و اعتبارسنجی.

03

مقایسه شفاف

نمایش تفاوت پوشش و قیمت.

04

پیگیری درخواست

Timeline وضعیت برای کاربر.

۵نوع بیمهبا فرم مستقل
شرطیمنطق سؤال‌هابر اساس پاسخ کاربر
۴مرحله خریداستعلام، مقایسه، مدارک، پرداخت
۱پنل پیگیریبرای درخواست‌ها
Product Design Process

از Site Map و Wireframe تا UI/UX و Development

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

۰۱
PROCESS

کشف و معماری

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

۰۲
PROCESS

UX و وایرفریم

User Flowهای اصلی به وایرفریم تبدیل شدند؛ سناریوهای موبایل در اولویت قرار گرفتند و نقاط اصطکاک قبل از طراحی بصری اصلاح شدند.

۰۳
PROCESS

UI و Design System

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

۰۴
PROCESS

توسعه و یکپارچه‌سازی

Front-end و Back-end/WordPress پیاده‌سازی، اتصال سرویس‌ها انجام و داده نمونه نزدیک به حالت واقعی وارد شد.

۰۵
PROCESS

تست و انتشار

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

Feature List

قابلیت‌های کلیدی نسخه اجراشده

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

فرم استعلام شرطی

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

ذخیره و ادامه بعدی

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

مقایسه پوشش و قیمت

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

بارگذاری امن مدارک

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

پنل وضعیت درخواست

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

FAQ متناسب با نوع بیمه

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

Technology Stack

فناوری‌ها و ابزارهای استفاده‌شده در پروژه

Tech Stack به تفکیک نقش در طراحی، توسعه، زیرساخت، سئو و یکپارچه‌سازی نمایش داده می‌شود.

Next.jsTechnology
Form EngineTechnology
Node.jsTechnology
PostgreSQLTechnology
Object StorageTechnology
OTPTechnology
Payment APITechnology
Audit LogTechnology
نتیجه پروژه

آنچه بعد از اجرا بهتر شد

  • مسیرهای اصلی کاربر از ورود تا اقدام نهایی به‌صورت واضح و قابل اندازه‌گیری طراحی شدند.
  • محتوا و داده‌های کلیدی به مدل‌های قابل مدیریت تبدیل شدند تا تیم داخلی برای تغییرات روزمره وابسته به توسعه‌دهنده نباشد.
  • نسخه موبایل به‌عنوان یک تجربه مستقل بررسی شد و CTA، فرم و اجزای مهم برای لمس و خوانایی بهینه شدند.
  • رویدادهای مهم محصول و بازاریابی برای تحلیل رفتار و تصمیم‌گیری بعدی تعریف شدند.
  • ساختار فنی و Design System امکان توسعه صفحات و قابلیت‌های بعدی را بدون بازطراحی کامل فراهم می‌کند.
نتیجه کلیدیاستعلام مرحله‌ای بدون فرم بلند

جزئیات نتیجه بر اساس داده واقعی پروژه در پیشخوان Case Study قابل ویرایش است.

کارشناس مشاوره و پشتیبانی Nemove پاسخ‌گویی و بررسی پروژه
مشاوره تخصصی Nemove

پروژه‌ای با نیاز مشابه دارید؟

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

بررسی نیازها پیشنهاد مسیر اجرا پاسخ‌گویی سریع