لندینگپیج تعاملی مسابقه «کیف آرایش» خانومی؛ پیادهسازی فرانتاند موبایلمحور با تمرکز بر وایرالمارکتینگ و تجربه کاربری یکپارچه.
نگاه کلی (Overview)
فروشگاه «خانومی» به عنوان شماره یک فروش لوازم آرایشی و بهداشتی در ایران، همواره کمپینهای دیجیتال نوآورانهای را اجرا میکند. این پروژه، پیادهسازی فرانتاند کمپین خلاقانه «کیف آرایش من» بود. مسابقهای تعاملی که در آن کاربران پس از ورود به لندینگپیج، لوازم آرایشی دلخواهشان را انتخاب و به کیف مجازی خود اضافه میکردند و با اشتراکگذاری این خروجی شخصیسازیشده در شبکههای اجتماعی و جمعآوری لایک، وارد قرعهکشی میشدند.
کارفرماوبسایت خانومی (رهبر بازار و بزرگترین فروشگاه آنلاین لوازم آرایشی ایران)
حوزه فعالیتتجارت الکترونیک (E-commerce) / آرایشی و بهداشتی
پلتفرملندینگپیج و پنل کاربری کمپین (Mobile-First)
نقش منطراحی و پیادهسازی کامل رابط کاربری (Frontend) لندینگ و پنل تعاملی مسابقه
هدف پروژهخلق یک بستر به شدت درگیرکننده (Engaging) روی موبایل جهت انتخاب مجازی آیتمهای کیف آرایش، تسهیل اشتراکگذاری در شبکههای اجتماعی و ایجاد موج وایرال برای برند خانومی
سال اجرا2022
فرایند توسعه پروژه (Project Development Process)
پرسونای کمپین و تارگتینگ
فرانک20 ساله - خانم - دانشجو
کیوان40 ساله - آقا - بیزینس من
محسن19 ساله - آقا - محصل
معماری تبدیل و گیمیفیکیشن
طراحی رابط کاربری
تستهای نهایی و تحمل بار
توسعه و جذب لید
ترکینگ و تحلیل داده
بهینهسازی مداوم (A/B Test)
می توانید صفحات مختلف این پروژه را اینجا مشاهده کنید:
برای سایتی با این مقیاس و ترافیک عظیم کاربری، هر کمپین به معنای ورود سیلآسای مخاطبان است. چالش اصلی در بخش فرانتاند، خلق یک رابط کاربری پویا بود که انتخاب آیتمها و ساختن کیف آرایش روی نمایشگرهای کوچک موبایل، بدون کوچکترین باگ یا کندی انجام شود. از طرفی، چون منطق این کمپین بر پایه User Generated Content (تولید محتوا توسط کاربر) و وایرال شدن بنا شده بود، مسیر کاربر از انتخاب آیتمها در پنل تا لحظه تولید لینک و اشتراکگذاری در سوشال مدیا، باید کاملاً روان، وسوسهکننده و بدون اصطکاک (Frictionless) طراحی میشد.
رویکرد اجرایی (Approach)
با علم به اینکه اکثریت قاطع ترافیک کمپینهای اینستاگرامی و سوشال از طریق موبایل تامین میشود، معماری فرانتاند و پنل کاربری کاملاً با اولویت Mobile-First پیادهسازی شد. کدهای تعاملی برای انتخاب محصولات و پیشنمایش لحظهایِ کیف آرایش بهینهسازی شدند تا سرعت پاسخدهی (Response Time) در مرورگرهای موبایل مشابه یک اپلیکیشن بومی (Native) باشد. طراحی پنل لندینگ به گونهای انجام شد که کاربر در هر قدم، مسیر مشخصی را برای رسیدن به مرحله نهایی (Share کردن) طی کند.
خروجی و نتیجه (Outcome)
نتیجه این پیادهسازی، یک پلتفرم کمپین سبک، پایدار و به شدت وایرالپذیر بود که دقیقاً در قد و قواره برند بزرگی مثل «خانومی» ظاهر شد. این لندینگپیج با ارائه یک تجربه کاربری (UX) شیرین و بینقص روی موبایل، توانست نرخ تبدیل و مشارکت کاربران برای اشتراکگذاری در شبکههای اجتماعی را به حداکثر رسانده و نقش کلیدی در موفقیت این کمپین بزرگ ایفا کند.
آنچه این پروژه را ساخته است
Bootstrap
رابط کاربری سریع، منظم و سازگار با هر نمایشگر
JavaScript
تعاملاتی که تجربهی کاربر را زنده نگه میدارند
AJAX
تعامل سریع، بدون وقفه و بدون بارگذاری مجدد
RESTAPI
ارتباط هوشمند میان وبسایت و سرویسهای دیگر
پشت صحنهی این پروژه
طراحی رابط کاربری
طراحی تجربهای که مسیر کاربر را سادهتر میکند
بهینهسازی سرعت
هر میلیثانیه کمتر، یک تجربهی بهتر
طراحی ریسپانسیو
تجربهای یکپارچه، از موبایل تا نمایشگرهای بزرگ
اتصال API
یکپارچهسازی سرویسها، بدون ایجاد پیچیدگی
مسیر رشد دیجیتال، با یک انتخاب درست آغاز میشود.
از طراحی و توسعه وبسایت تا سئو و استراتژی دیجیتال، تمرکز روی ساخت راهکارهایی است که امروز عملکرد خوبی داشته باشند و فردا هم آمادهی رشد باشند.