طراحی قالب های آماده وب وان
تجربه من در شرکت وب وان
من در ابتدای سال 1399 به تیم طراحی شرکت وب وان پیوستم؛ شرکتی که در زمینه طراحی سایتهای اختصاصی و ارائه قالبهای آماده فعالیت میکرد. و بیش از ده سال بود که فعالیتش رو اغاز کرده بود وب وان یک داشبورد اختصاصی دارد و از صفر تا صد پنل مدیریتی وب وان توسط تیم برنامه نمویسی این مجموعه نوشته شده و قالبهای open source استفاده نمیکرد در زمان آعاز به کار من در این شرکت مجموعه با چالشی مواجه شده بود: کاهش فروش قالبهای آماده.
روش های ارزیابی علل کاهش فروش قالب ها
مصاحبه با افرادی که از سایت بازدید کردند
در ابتدا برای ارزیابی دلایل کاهش فروش قالبهای اماده با هماهنگی تیم فروش و پشتیبانی مجموعه, اهداف مصاحبه و همچنین سوالاتی برای مصاحبه تلفنی با مشتریان فعلی وب وان آماده کردیم تا به درک درستی از نیازهای کاربران و آنچه باعث ناامیدی آنها شده برسیم.
در نتیجهی مصاحبه های انجام گرفته، متوجه شدیم که یکی از دلایل اصلی این کاهش فروش، قدیمی و غیرجذاب شدن طراحی سایت فروش و خود قالبها بود. بسیاری از مشتریانی که در ابتدا به خرید تمایل نشان میدادند، بهخاطر این مشکلات از خرید صرف نظر میکردند زیرا طرح ها جذابیت لازم برای جلب نظر کاربران را نداشت و همچنین دیزاین سایت اصلی فروش قالبها نیز گویای ظرفیت ها و توانایی های وب وان در خلق طرح های خلاقانه نبود.
همچنین از دید کاربران قالبهای اماده به اندازه کافی متنوع نبود و حوزه فعالیت آنها را در بر نمی گرفت .
تحلیل رفتار کاربران در سایت با Hotjar و google analytics
ما با کمک گرفتن از نقشه های حرارتی مشخص کردیم که کاربران بیشتر روی کدام بخشهای سایت کلیک میکنند یا روی کدام بخشها هیچگونه تعاملی ندارند. این اطلاعات به ما کمک کرد بفهمیم کدام قسمتهای سایت نیاز به بهبود دارد یا چرا کاربران از یک بخش به بخش دیگر منتقل نمیشوند. در واقع بعد از تحلیل رفتار کاربر در سایت متوجه شدیم بخش معرفی قالبهای اماده که اتفاقا مهمترین بخش سایت هست توجه کاربر رو جلب نمیکنه و بعضا کاربران از این بخش رد میشن و بعد از اینکه به انتهای سایت میرسیدند متوحه میشدن این بخش رو نتونستند پیدا کنند.
موردی دیگری که با تحلیل رفتار کاربر درسایت متوجه شدیم این بود که بخش های که درباره ویژگی های قالب های آماده توضیح داده شده متن زیادی دارند و کاربر با دیدن متن از این بخش رد میشود بنابراین بهتر است این ویژگی ها تنها به صورت موردی عنوان شود
نظرسنجی از کاربران (On-Site Surveys)
ما استفاده از ابزارهایی مانند Qualaroo یا Hotjar یک نظرسنجی کوتاه در سایت ایجاد کردیم. بهعنوان مثال، وقتی کاربر قصد ترک سایت را داشت یا مدتی در یک صفحه بدون اقدام خاصی میماند، یک نظرسنجی کوچک با سؤالهایی مانند “چه چیزی باعث شد از خرید منصرف شوید؟” یا “آیا قالبهای ما نیاز شما را برآورده نکرده است؟” نمایش داده می شد. این نظرسنجیها اطلاعات بسیار ارزشمندی در اختیار ما قرار داد.
تحلیل رقبا (Competitor Analysis)
ما همچنین برای درک بهتر نیاز کاربران به بررسی دقیق سایت های رقیب پرداختیم و نظرات وبازخوردهای مشتریان رقبا را در پلتفرمهای مختلف و حتی شبکه های اجتماعی بررسی کردیم و به این نتیجه رسیدیم که کاربران به دنبالهای طرح های مینیمال و مدرن برای سایت های خود هستند
بازطراحی سایت فروش قالب ها
بعد از ارزیابی های انجام شده برای درک علت ناامیدی کاربران در همان سال 1399، تصمیم بر این شد تا پلتفرم فروش قالبهای آماده شرکت، که مدتها با طراحی قدیمی در دسترس کاربران بود، بهطور کامل بازطراحی شود. هدف اصلی این تغییرات، بهبود تجربه کاربری و افزایش جذابیت بصری سایت . برطرف کردن نیازهایی بود که از طریق روش های توضیح داده شده دست یافته بودیم تا کاربران نهتنها با سادگی و سرعت بیشتری از خدمات استفاده کنند، بلکه از طراحی و حس زیبایی سایت نیز لذت ببرند. در این مسیر، مجموعهای از تغییرات اساسی در بخشهای مختلف سایت اعمال شد که در ادامه به جزئیات آن میپردازیم:
1. طراحی مجدد بخش هیرو (Hero Section)
- بخش هیرو بهعنوان اولین نقطه تماس کاربر با سایت، بسیار حیاتی است. در این بازطراحی، تلاش کردیم تصاویر زیبا و چشمنوازی را انتخاب کنیم که در عین حال کارکرد سایت و هدف آن را بهخوبی نشان دهد. انتخاب تصاویر بهگونهای بود که کاربر از لحظه ورود به سایت متوجه شود که در اینجا با طراحیهای خلاقانه و مدرن روبرو خواهد شد.
- برای افزایش جذابیت و جلب توجه بیشتر، از تکنیک انیمیشن پارالاکس استفاده کردیم. این انیمیشنها با حرکت صفحه هنگام اسکرول، حس پویایی و زندگی بیشتری به سایت دادند و توجه کاربر را به بخشهای مختلف جلب کردند.
2. ایجاد بخش راهنمای خرید سریع (Quick Purchase Path)
- یکی از نکاتی که در بازخورد کاربران به چشم میخورد، پیچیدگی مسیر خرید بود. بههمین دلیل، در طراحی جدید، یک بخش کوتاه و کارآمد برای نمایش مسیر خرید قالب اضافه کردیم.
- این بخش به کاربران کمک میکرد که بهصورت مرحلهبهمرحله و بدون پیچیدگیهای اضافه، در کمترین زمان ممکن قالب مورد نظر خود را پیدا و خریداری کنند. به این ترتیب، فرآیند خرید سریع و شفاف شد و کاربر به سادگی از طریق مراحل مختلف راهنمایی میشد.
3. نمایش منحصربهفرد قالبهای آماده (Template Showcase)
- یکی از چالشهای اصلی، ارائه قالبها بهصورت جذاب و تعاملی بود. بخش نمایش قالبهای آماده در پایین صفحه طراحی شد تا کاربر پس از آشنایی اولیه با سایت، به سمت این بخش هدایت شود.
- قالبهای آماده بهگونهای طراحی و نمایش داده شدند که کاربر در این بخش توقف کند، توجه بیشتری به تنوع و کیفیت قالبها داشته باشد، و در نهایت به صفحه لیست قالبها هدایت شود.
- برای این منظور، از طراحی خلاقانه و منحصر بهفرد هر قالب استفاده کردیم تا هر قالب بهطور جداگانه هویتی خاص داشته باشد و کاربر احساس کند انتخابهای متنوعی پیش رویش است که با نیازهای مختلفش هماهنگ است.
4. افزایش سرعت و بهبود عملکرد سایت
- از آنجا که سرعت بارگذاری یکی از عوامل مهم در تجربه کاربری است، تمام تلاش خود را بهکار گرفتیم تا سرعت سایت بهینه شود. استفاده از تصاویر فشردهشده و تکنیکهای مدرن کدنویسی به کاهش زمان بارگذاری صفحات کمک کرد و تجربه کاربری را بهبود بخشید.
- همچنین، واکنشگرایی (Responsive Design) سایت بهگونهای طراحی شد که کاربران بدون توجه به دستگاهی که از آن استفاده میکنند، اعم از موبایل، تبلت یا دسکتاپ، تجربه یکسان و روانی داشته باشند.
5. بهبود بصری و استفاده از رنگهای زنده
- در بازطراحی، سعی کردیم از رنگبندی زنده و پویا استفاده کنیم که انرژی بیشتری به سایت ببخشد و حس مدرن بودن را القا کند. انتخاب رنگها بهگونهای بود که تجربه کاربری را تسهیل کند و در عین حال، هویت برند را نیز تقویت کند.
این تغییرات باعث شد که نه تنها تعامل کاربران با سایت افزایش یابد، بلکه تجربه خرید آنها بهبود یابد و حس مدرن بودن و خلاقیت را در هر گام از فرآیند استفاده از سایت احساس کنند.
طراحی قالب های آماده متنوع
در مرحله بعد برای افزایش فروش تصمیم بر این شد تا قابلهای آماده بیشتری با تمرکز بر بیزینس ها مختلف و متنوع و همچنین طرحهای مدرن تر و بعضا مینیمال طراحی شود در این مرحله با کمک و همکاری تیم سئو کلیدواژه های پرتکرار در موتور حجستجوی گوگل بررسی شد تا بیزینس هایی که بیشتر به دنبال سایت هستند مشحص شود به طور مثال کلید واژه طراحی سایت املاکی بسیار پرتکرار بود و در ادامه با کمک کلید واژه های مسخص شده و بیزینس های مربوطه طراحی قالب های آمده آغاز شد.
قالب آماده حوزه زیبایی و سلامت
این سایت شرکتی با طراحی مدرن و حرفهای، مناسب برای کسبوکارهای مختلف است که به دنبال ارائه یک چهره آنلاین قدرتمند و قابل اعتماد هستند. طراحی این قالب بر سادگی، وضوح و حرفهای بودن متمرکز شده است تا به کاربران امکان دهد به راحتی اطلاعات مورد نیاز خود را پیدا کنند و با شرکت ارتباط برقرار کنند.
در بخش بالای صفحه (هیرو)، تصویری بزرگ و مرتبط با کسبوکار همراه با یک پیام کلیدی و دعوت به اقدام (Call to Action) قرار گرفته که توجه بازدیدکنندگان را جلب میکند و آنها را به سمت تعامل بیشتر با سایت سوق میدهد. منوی اصلی ساده و کاربرپسند است و دسترسی سریع به بخشهای مختلف سایت را ممکن میسازد.
بخشهای مختلف سایت با طراحی مینیمال و سازمانیافته به گونهای قرار گرفتهاند که اطلاعات کلیدی شرکت، خدمات، محصولات و پروژهها بهطور روشن و جذاب نمایش داده میشود. در این قالب از انیمیشنهای ساده استفاده شده تا تجربه کاربری را غنیتر کند و در عین حال باعث کندی سایت نشود.
بخش معرفی تیم و خدمات اصلی با طراحی برجسته، اعتماد کاربران را جلب میکند و به آنها امکان میدهد تا با تخصصها و نقاط قوت شرکت آشنا شوند. طراحی واکنشگرا این قالب باعث میشود که سایت در تمامی دستگاهها از جمله موبایل و تبلت بهخوبی نمایش داده شود.
این قالب شرکتی با تمرکز بر حرفهایگری و سادگی، برای کسبوکارهایی که به دنبال ایجاد یک حضور قوی آنلاین هستند، مناسب است و به کمک طراحی مدرن و کاربرپسند، تجربهای آسان و دلپذیر را برای بازدیدکنندگان فراهم میکند.
قالب آماده فروشگاهی با طراحی مدرن
این سایت یک فروشگاه آنلاین حرفهای است که با طراحی مدرن و ساختاری شیک، مناسب برای انواع کسبوکارهای آنلاین طراحی شده است. طراحی آن با تمرکز بر سادهسازی فرآیند خرید و تجربه کاربری بینقص، تجربه خرید را برای مشتریان جذاب و بدون پیچیدگی میکند.
اسلایدر هدر سایت، محصولات جدید و تخفیفهای ویژه را به صورت برجسته نمایش میدهد و باعث جلب توجه کاربران به پیشنهادات خاص فروشگاه میشود. دستهبندیهای اصلی محصولات به شکل واضح در صفحه اصلی قرار گرفتهاند که کاربر را مستقیماً به محصولات مرتبط هدایت میکنند.
در این قالب، از ترکیب رنگهای تیره و زنده استفاده شده که حس مدرنیته و نشاط را القا میکند. فیلترهای جستجوی پیشرفته امکان مرتبسازی و فیلتر کردن محصولات را بر اساس قیمت، برند و ویژگیهای مختلف فراهم میکند تا مشتریان سریعتر به هدف خود برسند.
بخش محصولات محبوب و پرفروش به صورت خلاقانه در صفحه اصلی نمایش داده شده است تا کاربران بتوانند به سرعت محصولات مورد علاقه خود را پیدا کنند. طراحی واکنشگرا باعث میشود که سایت در تمام دستگاهها به خوبی نمایش داده شود و کاربری آسانی داشته باشد، از جمله موبایل، تبلت و دسکتاپ.
این قالب بهخوبی با تمرکز بر عملکرد سریع و دسترسی آسان به محصولات، تجربه کاربری روانی را برای خریداران آنلاین فراهم میکند و با ظاهری جذاب و سازمانیافته، به افزایش نرخ تبدیل فروش کمک میکند.
قالب آماده فروشگاهی مشابه دیجی کالا
این سایت یک فروشگاه آنلاین پیشرفته است که با الهام از طراحی فروشگاههای بزرگ مانند دیجیکالا، تجربه خرید آنلاین سریع و کاربرپسندی را ارائه میدهد. به دلیل آنکه سایت مشابه دیجی کالا بسیار توسط کاربران در گوگل سرچ میشد تصمی گرفتیم طرخی مسابه دیجی کالا ارائه دهیم. طراحی سایت با تمرکز بر دستهبندیهای متنوع محصولات و دسترسی آسان به تمامی بخشها، به کاربران امکان میدهد بهراحتی در میان محصولات مختلف جستجو کنند و خریدی لذتبخش و بدون دغدغه داشته باشند.
اسلایدر بالای صفحه، محصولات ویژه و تخفیفها را بهصورت جذاب نمایش میدهد، که به مشتریان اطلاعاتی سریع درباره پیشنهادات روز و کالاهای محبوب میدهد. دستهبندیهای دقیق و جامع محصولات در قسمت بالای صفحه و منوی اصلی قرار گرفتهاند تا کاربران بدون زحمت به محصولات دلخواه خود دسترسی پیدا کنند.
فیلترهای جستجوی پیشرفته یکی از نقاط قوت این قالب است که به مشتریان اجازه میدهد بر اساس برند، قیمت، ویژگیها و دستهبندیهای خاص، محصولات را فیلتر کنند. بخش نظرات کاربران و رتبهبندی محصولات، در هر صفحه محصول قرار گرفتهاند تا مشتریان با اطلاعات بیشتری خرید کنند.
طراحی واکنشگرای سایت بهگونهای است که در تمامی دستگاهها از جمله موبایل و تبلت بهخوبی نمایش داده میشود و تجربهای بینقص ارائه میدهد. این قالب همچنین بر روی سرعت بارگذاری صفحات و بهینهسازی برای موتورهای جستجو (SEO) متمرکز شده تا به بهبود رتبهبندی سایت کمک کند.
در کل، این فروشگاه آنلاین با طراحی حرفهای و مدرن، مناسب کسبوکارهای بزرگ است که به دنبال ارائه تجربه خرید عالی و بدون محدودیت برای مشتریان خود هستند، و همزمان با ظاهری جذاب و کارکردی ساده، کاربران را به خرید ترغیب میکند.
قالب اماده فروشگاهی با انیمیشن خلاقانه در بنر
این سایت یک فروشگاه آنلاین مدرن و حرفهای است که با طراحی زیبا و کاربرپسند خود، تجربه خرید لذتبخشی را به کاربران ارائه میدهد. قالب فروشگاه با رنگبندی مینیمال و جذاب، ساختاری منظم و شفاف دارد که به کاربران کمک میکند محصولات مختلف را بهراحتی پیدا کنند و خریدی آسان و سریع داشته باشند.
در بخش بالایی صفحه، یک اسلایدر پویا قرار دارد که آخرین پیشنهادات و محصولات ویژه را بهطور جذاب نمایش میدهد. طراحی این اسلایدر به گونهای است که توجه کاربران را به خود جلب کرده و آنها را به مرور محصولات تشویق میکند.
دستهبندی محصولات به صورت واضح و در قالب بخشهای مشخص نمایش داده میشود که امکان دسترسی سریع به محصولات مورد نیاز را فراهم میآورد. همچنین، فیلترهای جستجوی پیشرفته به کاربران کمک میکند تا محصولات را بر اساس ویژگیهایی مانند قیمت، دستهبندی، و برند مرتب کنند.
در پایین صفحه، بخشهای مربوط به محصولات پرفروش و نقد و بررسیها قرار دارد که اطلاعات تکمیلی و نظرات کاربران را برای انتخاب بهتر در اختیار مشتریان میگذارد. علاوه بر این، با طراحی واکنشگرا، سایت در تمامی دستگاهها از جمله موبایل و تبلت بهخوبی نمایش داده میشود و تجربه کاربری یکسانی را ارائه میدهد.
در مجموع، این قالب با تمرکز بر سادگی، سرعت، و عملکرد بهینه طراحی شده است تا هر کاربر، بدون سردرگمی و با لذت، خرید خود را انجام دهد و از تعامل با سایت احساس راحتی کند.
قالب اماده حوزه وکالت
این سایت شرکتی با طراحی مینیمال و مدرن، مناسب برای کسبوکارها و شرکتهای حرفهای است که به دنبال یک حضور آنلاین برجسته و قابل اعتماد هستند. طراحی این قالب بر سادگی و کارایی تمرکز دارد تا اطلاعات کلیدی شرکت به شکل واضح و قابل دسترسی نمایش داده شود.
بخش بالای صفحه (هیرو) با یک تصویر بزرگ و یک پیام محوری همراه با دکمه دعوت به اقدام (Call to Action) طراحی شده که به وضوح اهداف و خدمات شرکت را معرفی میکند. این بخش بهطور جذاب کاربران را به ادامه تعامل با سایت ترغیب میکند.
طراحی بخشهای خدمات و محصولات بسیار منظم و ساختاریافته است، که به شرکتها امکان میدهد بهراحتی خدمات اصلی و مزایای خود را نمایش دهند. در کنار آن، بخش پروژههای اخیر و مشتریان به گونهای طراحی شده که اعتماد کاربران را جلب کند و نشان دهد که شرکت در چه زمینههایی موفقیت داشته است.
رنگبندی متعادل و انیمیشنهای سبک در این قالب استفاده شده تا تجربه کاربری روان و بدون پیچیدگی باشد. منوی اصلی کاربرپسند و ساده است که کاربران را به راحتی به بخشهای مختلف هدایت میکند. طراحی واکنشگرا به سایت این امکان را میدهد که در همه دستگاهها، از جمله موبایل و تبلت، به خوبی نمایش داده شود.
این قالب با تمرکز بر ارائه حرفهای خدمات و اطلاعات، مناسب کسبوکارهایی است که به دنبال حضور آنلاین منظم و قابل اطمینان هستند و میخواهند بهطور مؤثر مشتریان و مخاطبان خود را جذب کنند.
قالب آماده املاکی
این سایت املاکی با طراحی مدرن و حرفهای، بهطور خاص برای آژانسهای املاک و مستغلات طراحی شده است. رنگبندی قرمز که در طراحی این قالب استفاده شده، علاوه بر اینکه جذابیت بصری بالایی ایجاد میکند، حس اعتماد، انرژی و پویایی را به کاربران منتقل میکند.
در بخش بالای صفحه (هیرو)، تصویری بزرگ و الهامبخش از املاک برجسته قرار گرفته است که همراه با یک نوار جستجوی ساده و کارآمد، به کاربران امکان میدهد به سرعت به دنبال ملک مورد نظر خود بگردند. جستجوی پیشرفته این سایت با فیلترهای مختلف، شامل موقعیت جغرافیایی، قیمت، متراژ و نوع ملک، کاربران را به راحتی به سمت گزینههای مطلوب هدایت میکند.
بخش معرفی املاک ویژه با استفاده از کارتهای نمایشگر املاک، تصاویر بزرگ و توضیحات مختصر، ملکهای خاص و مهم را به کاربران معرفی میکند. هر ملک به صورت کامل با جزئیات نمایش داده میشود، از جمله تصاویر باکیفیت، نقشه محل، و توضیحات دقیق.
طراحی واکنشگرا این قالب به کاربران اجازه میدهد در هر دستگاهی، از جمله موبایل و تبلت، بهراحتی سایت را مرور کنند و با رابط کاربری ساده و روان، تجربهای آسان و جذاب در جستجوی ملک داشته باشند.
این قالب با تمرکز بر ارائه املاک به شکلی شفاف و جذاب، مناسب آژانسهای املاکی است که به دنبال جذب سریع مشتری و ارائه تجربه کاربری ممتاز هستند. رنگ قرمز پویا به همراه طراحی حرفهای، به سایت شخصیت و هویتی قوی و متمایز میبخشد.