فروشگاه آنلاین قهوه ارس

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

خلاصه

صنعت	برشت و فروش قهوه‌ی تخصصی
نقش لوزی	UX خرید، UI، توسعه‌ی ووکامرس
پلتفرم	ووکامرس + المنتور پرو
دامنه	خانه، فروشگاه، صفحه‌ی محصول، تسویه‌حساب + موبایل
زمان‌بندی	۱۰ هفته

چالش

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

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

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

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

قهوه‌خور خانگی که V60 یا موکاپات دارد: «کدام قهوه مال من است؟» مسیر: فروشگاه (فیلتر روش دم‌آوری) ← محصول (پروفایل طعم) ← سبد ← پرداخت.

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

فروشگاه و اشتراک ماهانه دو ستون اصلی‌اند؛ راهنماهای دم‌آوری مشتری را دوباره به محصول مناسب برمی‌گردانند. هر صفحه حداکثر با دو کلیک به سبد می‌رسد.

سیستم طراحی

• رنگ: پالت Orange با پس‌زمینه‌ی کرم (Orange 25/50) که حال‌وهوای برشت‌خانه را می‌سازد؛ قهوه‌ای عمیق Orange 900 برای سطوح تیره.
• دسترس‌پذیری: سفید روی Orange 600 3.96:1 است؛ دکمه‌ی «افزودن به سبد» روی Orange 700 (5.77:1). قیمت‌ها با text-primary و نه با رنگ برند، تا خوانایی عدد حفظ شود.
• تایپوگرافی: Display lg برای نام محصول، Text md برای توضیح طعم، Text sm Medium برای برچسب‌های فیلتر.
• چیدمان: گرید محصول ۳ ستونه، ستون فیلتر ۲۸۰px، سیستم فاصله‌ی ۴px.

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

• دکمه‌ها: Primary «افزودن به سبد»؛ Secondary برای انتخاب وزن (گروه دکمه‌ی تکی با حالت انتخاب‌شده)؛ رادیو-کارت برای «خرید یک‌باره / اشتراک».
• کامپوننت‌های کلیدی: کارت محصول، نوار پروفایل طعم (اسیدیته، شیرینی، بدنه، تلخی)، چیپ فیلتر قابل حذف، خلاصه‌ی سفارش چسبان.
• حالت‌ها: چیپ فعال/غیرفعال، رادیو-کارت انتخاب‌شده با حاشیه‌ی ۲px برند، دکمه‌ی loading هنگام افزودن به سبد.

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

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

موبایل

نوار پایین با سبد خرید، دکمه‌ی خرید ثابت در صفحه‌ی محصول، فیلترها در یک Bottom Sheet.

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

ووکامرس با ویژگی‌های محصول (خاستگاه، برشت، وزن، آسیاب) به‌عنوان attribute برای فیلتر؛ پروفایل طعم با فیلدهای سفارشی؛ اشتراک با افزونه‌ی Subscriptions. توکن‌ها در Global Colors المنتور.

اثر

تحویل‌شده: ۴ قالب صفحه، موبایل، مدل داده‌ی محصول برای فیلتر.

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