سایت کلینیک پوست و مو درسا

نمونه‌ی مفهومی. این پروژه را استودیو لوزی برای نمایش روش کارش طراحی کرده است؛ نام‌ها و داده‌ها واقعی نیستند و بخش «اثر» فقط هدف و برنامه‌ی سنجش را نشان می‌دهد.

خلاصه

صنعت	کلینیک پوست، مو و زیبایی
نقش لوزی	UX رزرو، UI، توسعه
پلتفرم	وردپرس + JetEngine + المنتور پرو
دامنه	خانه، خدمات و تعرفه، پروفایل پزشک و رزرو، اطلاعات و بیعانه + ۳ صفحه‌ی موبایل
زمان‌بندی	۸ هفته

چالش

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

هدف‌ها و معیار موفقیت

1. رزرو در ۳ قدم بدون ثبت‌نام اجباری. معیار: سهم نوبت‌های آنلاین از کل نوبت‌ها.
2. تعرفه‌ی شفاف پیش از تصمیم. معیار: تماس‌های «قیمت چند است؟».
3. کاهش غیبت با بیعانه و پیامک یادآوری. معیار: نرخ عدم حضور.

کاربر و مسیر اصلی

مراجعه‌کننده‌ی جدید، شب و با موبایل: «زودترین نوبت لیزر کی است و چقدر می‌شود؟» مسیر: ویجت رزرو در هیرو ← پزشک و ساعت خالی ← اطلاعات و بیعانه ← تأیید.

معماری اطلاعات

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

سیستم طراحی

• رنگ: پالت Teal؛ حس تمیزی و آرامش درمانی بدون سرمای آبی بیمارستانی. سطوح هیرو روی Teal 25، کارت‌های آمار روی Teal 25 با حاشیه‌ی Teal 100.
• دسترس‌پذیری: سفید روی Teal 600 3.80:1 است و برای برچسب ۱۴–۱۶px دکمه کافی نیست؛ دکمه‌ها و تراشه‌ی ساعتِ انتخاب‌شده روی Teal 700 (5.57:1). متن Teal 700 روی سطح Teal 25 هم 5.44:1 است، پس برچسب‌های رنگی روی سطوح روشن هم AA را پاس می‌کنند.
• تایپوگرافی: Display xl برای تیتر هیرو؛ ساعت‌ها با Text sm DemiBold و ارقام فارسی تا در یک نگاه خوانده شوند.
• چیدمان: ویجت رزرو کامل در هیرو (انتخاب خدمت + تاریخ + دکمه)، کارت پزشک با ردیف تراشه‌ی ساعت، جدول تعرفه با ردیف ۵۶px.

معماری کامپوننت

• دکمه‌ها: Primary «جستجوی نوبت / ادامه و پرداخت بیعانه»؛ Secondary «همه‌ی خدمات و تعرفه‌ها»؛ تراشه‌ی ساعت به‌عنوان Button sm با دو حالت (خالی = Secondary، انتخاب‌شده = Primary).
• کامپوننت‌های کلیدی: ویجت رزرو سریع، تقویم ماهانه (روز انتخاب‌شده، روز تعطیل غیرفعال)، Stepper سه‌مرحله‌ای (کامل/فعال/بعدی)، رادیو-کارت روش پرداخت، خلاصه‌ی نوبت چسبان.
• حالت‌ها: روز تعطیل fg-disabled، ساعت پرشده حذف می‌شود (نه غیرفعال، تا شلوغی ایجاد نکند)، دکمه‌ی پرداخت با حالت loading، پیام قانون لغو کنار چک‌باکس تأیید.

صفحه‌های کلیدی

1. فرم رزرو بالای صفحه: اولین چیزی که مراجعه‌کننده می‌خواهد نوبت است، نه معرفی کلینیک؛ «نزدیک‌ترین نوبت خالی» زیر ویجت.
2. جدول تعرفه: مدت جلسه و قیمت کنار هر خدمت با دکمه‌ی رزرو در همان ردیف؛ پکیج‌ها در ستون کناری.
3. پروفایل پزشک: معرفی، آمار و نظرات کنار ویجت رزرو با تقویم و ساعت‌های خالی؛ «ساعت خالی را نشان بده، نه فرم خالی».
4. اطلاعات و بیعانه: مبلغ کل، بیعانه و قانون لغو (تا ۲۴ ساعت قبل، بیعانه برمی‌گردد) پیش از پرداخت روشن است.

موبایل

رزرو مرحله‌به‌مرحله با نوار پیشرفت بالای صفحه، انتخاب پزشک و روز با کارت‌های لمسی بزرگ، خلاصه و دکمه‌ی پرداخت در نوار پایین ثابت؛ صفحه‌ی تأیید با «افزودن به تقویم» و «مسیریابی».

تحویل و پیاده‌سازی

پزشکان، خدمات و نوبت‌ها سه پست‌تایپ JetEngine با رابطه‌ی چندبه‌چند؛ ساعت‌های خالی از جدول نوبت‌ها خوانده می‌شوند. درگاه پرداخت بیعانه و پیامک یادآوری از طریق وب‌سرویس پیامکی. توکن‌های Teal در Global Colors.

اثر

تحویل‌شده: ۴ قالب دسکتاپ، ۳ صفحه‌ی موبایل، ۱۲ قالب در دامنه‌ی کامل، مدل داده‌ی نوبت‌دهی.

برنامه‌ی اندازه‌گیری: سهم رزرو آنلاین، نرخ عدم حضور، تماس‌های قیمت، زمان تکمیل رزرو. [جای نتایج واقعی]