آملون چیه؟
آملون با شعار "زمین سبز، انسان های سالم" با هدف تولید محصولات گیاهی یکبار مصرف در سال 2005 تاسیس شد.
اهداف پروژه
طراحی مجدد وب سایت آملون توسط مجموعه ای واضح از اهداف با هدف ارتقای اگاهی جامعه از این برند و اگاهی رسانی در مورد تعهد عمیق شرکت به پایداری و سلامت انسان انجام شد. سعی کردیم کاستی‌های وب‌سایت قبلی رو در طراحی جدید برطرف کنیم، که با مأموریت اصلی آملون برای ارتقای سازگاری با محیط‌زیست و رفاه هم هماهنگ بود.
برجستگی ابتکارات پایداری
برجسته کردن تمرکز بر سلامت انسان
پرورش صدای برند منسجم
جذب مخاطب گسترده تر
طراحی و تجربه کاربری
پس از مرحله ای از همسویی، ما با استفاده از پرسشنامه و مصاحبه با استراتژی خود بر اساس داده های جمع آوری شده، به درک عمیق شرکت پرداختیم.
تحلیل رقابتی
برای شروع، ما یک تحلیل کامل از چشم انداز رقابتی انجام دادیم. ما وب‌سایت‌های رقبا و رهبران صنعت رو بررسی کردیم تا بینشی در مورد روند طراحی، تجربه کاربر و ویژگی‌های نوآورانه به دست بیاریم. این مرحله به ما امکان داد تا بهترین شیوه ها و زمینه هایی رو که وب سایت ما می تونه خودش رو متمایز کنه، شناسایی کنیم.
ما یک مطالعه رقابتی جامع رو ارائه کردیم، که هم تحلیل مستقیم و هم غیرمستقیم رقبای آملون رو ارائه می‌کرد. این ابتکار در تقویت استراتژی طراحی، به ویژه با توجه به توزیع محصولات آملون در سرتاسر ایران و 16 کشور دیگر، بسیار مفید بود، زیرا اونها همچنان به گسترش دسترسی خود با ظروف غذاخوری مبتنی بر ذرت زیست تخریب پذیر ادامه می دهند.
مصاحبه با سهامداران
ما در گفتگوهای عمیق با سهامداران کلیدی، و همچنین مشتریان، اعضای تیم، و کاربران نهایی استفاده کردیم تا دیدگاه های ارزشمندی رو در مورد اهداف پروژه، انتظارات کاربر، و الزامات منحصر به فرد این پروژه جمع آوری کنیم. این بینش ها به ما کمک کرد تا اهداف پروژه و نیازهای اصلی کاربر رو تعریف کنیم.
تجزیه و تحلیل وب سایت موجود
ما وب سایت فعلی رو، ارزیابی کردیم تا نقاط قوت و ضعفش رو شناسایی کنیم. این تجزیه و تحلیل شامل بررسی داده های ترافیک کاربر، بازخورد کاربر و نتایج تست کاربرد پذیری بود. درک اینکه چه چیزی در حال حاضر خوب کار می کنه و چه چیزی نیاز به بهبود داره برای فرآیند طراحی مجدد بسیار مهم است.
معماری اطلاعات
بر اساس بینش حاصل از تجزیه و تحلیل رقابتی و مصاحبه با سهامداران، ما یک معماری اطلاعاتی ایجاد کردیم که ساختار و سلسله مراتب محتوای سایت رو مشخص می کرد. این مرحله تضمین می‌کنه که محتوا و ویژگی‌های وب‌سایت به شیوه‌ای کاربرپسند و منطقی سازماندهی شده.
طراحی
با یک پایه محکم، ما اقدام به ایجاد وایرفریم ها کردیم. اوایرفریم ها به عنوان نمایش‌های ساده‌شده و طرح‌واره‌ای از طرح‌بندی وب‌سایت که قرارگیری عناصر کلیدی مانند منوهای پیمایش، بخش‌های محتوا، فرم‌ها و فراخوان‌ها به ما کمک کردن که به عنوان یک راهنمای بصری برای ساختار و عملکرد وب سایت ازشون استفاده کنیم.
فناوری GSAP
GSAP که به خاطر قابلیت‌های انیمیشن‌سازی‌اش شناخته می‌شه، برای ایجاد انیمیشن‌های روان و جذاب بصری استفاده شد و اون رو به انتخابی ایده‌آل برای افزایش تعامل کاربر با عناصر سه‌بعدی تبدیل کرد.
دکمه تعاملی برای مقیاس بندی با "قوطی کوکاکولا"
برای اینکه کاربران بتونن اندازه ظروف غذاخوری رو به روشی آشنا در سطح بین المللی مقایسه کنن، یک دکمه تعاملی پیاده سازی کردیم. این دکمه به کاربران اجازه می‌ده تا یه قوطی کوکاکولا را غیب یا ظاهر کنن، از قوطی کوکا کولا به عنوان مرجع مقیاس‌بندی جهانی استفاده کردیم. کاربران می‌تونن قوطی رو ظاهر یا ناپدید کنن و به راحتی می‌تونن اندازه ظروف غذاخوری رو با یک شی شناخته شده مقایسه کنن. ما از یه اسلایدر برای کنترل باز و بسته شدن در ظروف استفاده کردیم. برای ساخت تمام کامپوننت های استفاده شده در این پروژه به اضافه ی همین اسلایدر از اخرین نسخه ی متریال دیزاین استفاده کردیم.
هدف ادغام این ویژگی ها به حداقل رساندن پیچیدگی برای کاربران با ارائه یه تجزیه و تحلیل کامل و کاربرپسنده. کاربران می تونن جزئیات محصول رو از نزدیک بررسی کنن، اندازه ها رو به راحتی مقایسه کنن، و از انیمیشن های جذاب بصری ارائه شده توسط فایل های Lottie لذت ببرن، و اطمینان حاصل کنن که قبل از خرید عمده درک کاملی از محصولات دارن.با توجه به اینکه پیمایش استاندارد در بخش سه بعدی نمایش محصول ممکنه به دلیل پیچیدگی مدل‌های سه‌بعدی غیرممکن باشه، در نظر گرفتیم که برای بزرگنمایی دکمه ی مشخصی پیاده سازی کنیم. این ویژگی به کاربران امکان بزرگنمایی و کوچک نمایی رو می ده و بررسی دقیق تری از ظروف غذاخوری ارائه می ده.
سهولت خرید عمده
این رویکرد سه بعدی تعاملی می تونه به ویژه برای مشتریان B2B که به دنبال خرید ظروف غذاخوری به صورت عمده هستند، ارزشمند باشه. این مشتریان می تونن محصولات رو بدون نیاز به نمونه های فیزیکی به طور کامل تجزیه و تحلیل کنند و فرآیند تصمیم گیری رو ساده کنن
رابط کاربر پسند
این رابط به گونه‌ای طراحی شده که با دکمه‌ها، اسلایدرها و انیمیشن‌هایی که به وضوح برچسب‌گذاری شده‌اند، بهترین تجربه ی کاربری رو خلق کنه.
نتیجه
با هدف افزایش تجربه کاربر و ساده‌سازی فرآیند تصمیم‌گیری، به‌ویژه برای خرید عمده، ما از یک رویکرد نوآورانه استفاده کردیم که مدل‌سازی سه بعدی رو با طراحی وب سایت ادغام می‌کنه. تصمیم به استفاده از Three.js برای مدل‌سازی سه‌بعدی امکان نمایش جامع‌تری از محصولات ظروف غذاخوری رو فراهم کرد و درک کاربر از ابعاد و طراحی اونها رو افزایش داد. فناوری GSAP به انیمیشن‌های روان و جذاب کمک می‌کنه و تعامل یکپارچه با عناصر سه بعدی رو تضمین می‌کنه.