صفحهی اصلی از بالا تا پایین، همانطور که روی سایت زنده دیده میشود؛ نسخهی دسکتاپ و موبایل کنار هم.
sha-jahan.com
داخل قاب اسکرول کنید۰٪این صفحه به اندازهی ۱۷ صفحهنمایش طراحی شده
خلاصهی پروژه The brief
قراربودچهکاریانجامشود
فروشگاه اینترنتی تجهیزات کوهنوردی و کمپینگ با بیش از هزار کالا
هدفها
01خریدار بر اساس نوع سفر، تجهیزات مناسب را پیدا کند.
02مرور بیش از هزار کالا با دسته و برند ساده باشد.
03کمپینها و پیشنهادهای ویژه برجسته شوند.
04خرید روی موبایل سریع و راحت باشد.
چه چیزی تحویل داده شد
طراحی رابط کاربری فروشگاه برای دسکتاپ و موبایل
مگامنوی دستهها و خرید بر اساس برند
راهنمای انتخاب تجهیزات بر اساس سفر و فصل
صفحهی محصول، سبد خرید و پرداخت
کمپینها و پیشنهاد روز
پنل مدیریت فروشگاه
شرح پروژه Case study
ازمسئلهتاتحویل
01
چالش
شاجهان صدها برند و بیش از هزار کالا دارد — از چادر و کیسهخواب تا کفش، پوشاک و ابزار فنی. خریدار تجهیزات کوهنوردی معمولاً نمیداند برای سفر بعدیاش دقیقاً چه لازم دارد؛ فروشگاه باید هم مرور بر اساس دسته و برند را ساده کند و هم در انتخاب راهنمایی کند.
02
راهحل
علاوه بر دستهبندی و خرید بر اساس برند، «راهنمای انتخاب تجهیزات» ساخته شد: خریدار نوع سفر و فصل را انتخاب میکند و فهرست پیشنهادی از کالاهای موجود فروشگاه را میبیند. کمپینها، پیشنهاد روز و مگامنوی دستهها هم کنار آن قرار گرفت.
03
طراحی
زرد و مشکی پرانرژی با عکاسی کوهستان؛ کارتهای ششضلعی در صفحهی اول، آمار کالا، برند و دسته، و نوار پایین موبایل برای دسترسی سریع به سبد و دستهها.
قابلیتها What we built
چهچیزیساختهشد
کارهایی که این محصول میتواند انجام دهد و پیش از این نمیتوانست.
01راهنمای انتخاب تجهیزات
نوع سفر و فصل را انتخاب کنید؛ فهرست پیشنهادی از کالاهای موجود ساخته میشود.
02مگامنو و برندها
دستهها و دهها برند — هیمالیا، اسنوهاک، فایرمپل و دیگران — در یک منو.
03کمپین و پیشنهاد روز
تخفیفها، بلکفرایدی و پیشنهاد روز در صفحهی اول.
04خرید موبایلی
نوار پایین موبایل برای دسترسی سریع به جستوجو، دستهها و سبد.
مسیر پروژه How it ran
مرحلهبهمرحله
همان مسیری که واقعاً طی شد، با زمان هر مرحله.
01Phase 01شناخت و معماری محتوا
بررسی کسبوکار، مخاطب و رقبا و چیدن نقشهی صفحهها پیش از هر طراحی.
02Phase 02طراحی در فیگما
طراحی صفحهی اول، مگامنو، راهنمای انتخاب و صفحهی محصول در هویت زرد و مشکی.
03Phase 03برنامهنویسی
پیادهسازی با لاراول: کاتالوگ، برندها، راهنمای انتخاب، سبد و پرداخت و پنل مدیریت.
04Phase 04انتشار و پشتیبانی
راهاندازی روی سرور، تنظیمات سئوی فنی، آموزش پنل به تیم کارفرما و پشتیبانی پس از انتشار.
تکنولوژی Stack
باچهچیزیساختهشد
ابزارهایی که این پروژه رویشان بنا شده و امروز هم روی همانها میچرخد.
Figma
Laravel
MySQL
امروز Where it stands
این پروژه حالا کجاست
شاجهان تجهیزات کوهنوردی و کمپینگ را با همین فروشگاه و راهنمای انتخابش آنلاین میفروشد.