باز طراحی سایت Novorio
Novorio Studio، یک آژانس طراحی دیجیتال، در تلاش بود تا حضوری مؤثرتر در فضای آنلاین داشته باشد و از طریق وب‌سایت خود مشتریان بیشتری جذب کند. با توجه به ماهیت این بیزینس که خود خدمات طراحی سایت و اپلیکیشن ارائه می‌داد، اعتبار و کیفیت تجربه دیجیتال آن نقش کلیدی در موفقیت کسب‌وکار داشت. پروژه بازطراحی با هدف بهبود نرخ تبدیل، تقویت درک برند و ارتقاء کیفیت تعامل کاربر شکل گرفت. این پروژه به عنوان نمونه‌ای از حل مسئله طراحی مبتنی بر داده و شناخت کاربر اجرا شد.
نقش من در این پروژه
در این پروژه، به عنوان طراح ارشد UX/UI مسئولیت تحلیل داده‌های رفتاری کاربران, User Research و بازطراحی کامل رابط کاربری و تست کاربردپذیری را بر عهده داشتم. فعالیت‌های من شامل تحلیل کمی با Google Analytics و Microsoft Clarity، Hotjar طراحی و اجرای نظرسنجی‌های خروجی با Hotjar، تدوین فرضیه‌ها و انجام تست‌های A/B برای ارزیابی عملکرد نسخه‌های مختلف بود. همچنین در هماهنگی بین تیم توسعه و صاحب پروژه نقش فعالی داشتم و با برگزاری جلسات هم‌راستاسازی، مسیر طراحی را با اهداف تجاری مطابقت دادم.
تعریف مسئله
با وجود ترافیک قابل توجه در وب‌سایت، کاربران پس از بازدید از صفحه اصلی بدون هیچ‌گونه تعامل معناداری سایت را ترک می‌کردند. داده‌ها نشان می‌داد که نرخ تبدیل بسیار پایین و نرخ پرش بالا بود. علت اصلی، برداشت کاربران از سایت به عنوان محیطی غیرحرفه‌ای و فاقد خلاقیت بود؛ چالشی جدی برای شرکتی که خود ارائه‌دهنده خدمات طراحی دیجیتال بود. در واقع، سایت نه تنها موفق به ایجاد اعتماد اولیه نمی‌شد، بلکه در انتقال ارزش پیشنهادی برند نیز ناکام مانده بود. هدف ما بازتعریف این تجربه و ارتقاء آن با تمرکز بر نیازهای کاربران بود.
فرآیند طراحی
مرور مسئله و فرضیات
مشکلی که داریم:
سایت فعلی شرکت طراحی وب و اپلیکیشن نمی‌تونه مخاطب‌ها رو جذب کنه. در نتیجه:
سایت ثبت سفارش کمی داشت
بازدیدکننده‌ها به مشتری تبدیل نمی‌شن (low conversion).
احتمالاتی که می‌تونیم در نظر بگیریم:
رابط کاربری گیج‌کننده یا غیرجذاب.
مسیرهای تبدیل (Conversion Paths) پیچیده یا نامشخص.
محتوای ناکافی یا غیرقابل اعتماد.
سرعت پایین یا تجربه بد موبایل.
صدا و لحن غیرمتناسب با پرسونای مخاطب.
CTAهای ضعیف (دکمه‌های فراخوان به اقدام مبهم یا پنهان).
تحقیق تجربه کاربری
برای درک بهتر رفتار کاربران، ابتدا داده های کمی ابزارهای تحلیل داده رو بررسی کردیم
داده های Google Analytics
1.Landing Page Analysis
| صفحه | تعداد ورود | Bounce Rate | Avg. Session Duration | تحلیل کوتاه |
|---|---|---|---|---|
| /home | 940 | 72% | 00:38 | کاربران زیادی پس از ورود بدون تعامل ترک می‌کنن؛ نشان‌دهنده ضعف در جذب توجه اولیه است. |
| /services | 55 | 52% | 01:12 | بازدید کم و تعامل پایین، کاربران علاقه‌مند نمی‌شن وارد جزئیات خدمات بشن. |
| /portfolio | 219 | 39% | 01:40 | نرخ ماندگاری بالاتر؛ نشان می‌ده نمونه‌کارها جذاب‌ترند. |
.
2.Behavior Flow
| نقطه شروع | مسیرهای رایج | Drop-offها | تحلیل رفتاری |
|---|---|---|---|
| /home | → /portfolio → /portfolio/item | /portfolio/item | علاقه‌مندی به نمونه‌کار وجود داره ولی صفحه نخست مشکل در هدایت داره. کاربر سردرگمه. |
.
3. Goals & Conversion
| هدف تعریف شده | نرخ تبدیل | مسیرهای موثر | صفحه‌های کم‌اثر |
|---|---|---|---|
| ثبت درخواست مشاوره | 0.8% | /portfolio → contact | /home, /services |
.
4. Device & Browser Performance
| نوع دستگاه | Bounce Rate | Avg. Duration | تحلیل مشکل احتمالی |
|---|---|---|---|
| دسکتاپ | 70% | 00:45 | تعامل ضعیف صفحه نخست |
| موبایل | 73% | 00:43 | تفاوت معنی‌داری وجود نداره |
.
5. Acquisition Channels
| کانال جذب | Users | Conversion Rate | تحلیل |
|---|---|---|---|
| Ads | 576 | 0.6% | بیشتر ورودی ها از طریق تبلیغات هست |
| Direct | 203 | 1.4% | بعد از تبلیغات بیشتر ورودی کاربران مستقیم هستند که بیشترین تعمال رو این افراد دارند |
| Referral | 96 | 0.8% | بعد از کاربران مستقیم کاربران ارجاغ شده از سایتهای دیگر بیشترین تعامل رو دارند |
داده های Hotjar
1. Heatmap Summary
| صفحه | نواحی کلیک | اسکرول کامل؟ | CTA دیده شده؟ | تحلیل تعامل |
|---|---|---|---|---|
| /home | بخش نمونه‌کارها | تا 60٪ | ضعیف | کاربران بیشتر دنبال محتوا می‌گردن اما CTA توجه‌برانگیز نیست. |
| /services | کلیک پایین روی آیکون‌ها | تا 50٪ | ندیده می‌شه | بخش خدمات دیده نمی‌شه یا جذاب نیست. |
| /portfolio | تصاویر نمونه‌کارها | 80٪+ | زیاد کلیک می‌شه | تعامل بالا، محتوای مورد انتظار کاربر هست. |
2. Session Recordings
| ویدئو | رفتار کاربر | نقاط ابهام | فرصت بهبود |
|---|---|---|---|
| #001 | اسکرول زیاد در صفحه نخست و سردگمی, کلیک مرده در بخش نمونه کارها | CTA کم‌رنگ، متن مبهم | تقویت هدایت بصری و call-to-action |
| #012 | بازدید چند نمونه‌کار، سپس ترک سایت | نبود CTA بعد از تعامل موفق | CTA در انتهای نمونه‌کار اضافه شود |
heatmap بخش نمونه کارها
heatmap بخش خدمات
استفاده از فرم نظرسنجی hotjar
ما از Hotjar استفاده کردیم تا یک فرم نظرسنجی exit-intent (قصد خروج) را قبل از ترک کاربران از سایت نمایش دهیم. هدف ما از این نظرسنجی، درک این بود که چرا کاربران تعامل زیادی با سایت ندارند و چرا به‌سرعت صفحه را ترک می‌کنند. دو سوال زیر را در این فرم گنجاندیم:
چه چیزی باعث شد که در همین لحظه وقت مشاوره رزرو نکنید؟
- قصد داشتم بعداً برگردم.
- وب‌سایت حرفه‌ای به نظر نمی‌رسید.
- اطلاعاتی که میخواستم رو پیدا نکردم.
- نمونه کارها قوی نبود.
- نمیدونستم چطور درخواست مشاوره بدم.
بیشترین چیزی که در این وب‌سایت شما را آزار داد چه بود؟
- وب‌سایت کند بود.
- ناوبری (دسترسی به بخش‌های مختلف سایت) گیج‌کننده بود.
- نتوانستم چیزی که دنبالش بودم پیدا کنم.
- طراحی سایت غیرحرفه‌ای بود.
- محتوای سایت مفید نبود.
نتایج پرسش دوم
نتایج پرسش اول
انجام مصاحبه حضوری
بعد از انجام مصاحبه حضوری به نتایج زیر رسیدیم
مشکل اصلی:
سایت از نظر بصری، حس یک شرکت حرفه‌ای طراحی سایت را منتقل نمی‌کند.
نمونه‌کارها و محتوای خدمات، فاقد جذابیت و نوآوری هستند و کسل کننده شده.
کاربران دنبال طراحی‌های جسور، ترند، و متفاوت‌اند که این سایت ارائه نمی‌دهد.
توصیه نهایی:
لازم است بازطراحی برند و UI سایت با تاکید بر موارد زیر انجام شود:
هویت بصری حرفه‌ای و خاص‌تر
نمایش قدرتمندتر نمونه‌کارها با UI غنی و تنوع بالا
ارائه خدمات با داستان‌گویی و ارزش پیشنهادی واضح
تحلیل رقبا
| ویژگی‌ها | Digital Gravity | DBW | Element 8 |
|---|---|---|---|
| طراحی بصری | استفاده از انیمیشن‌های اسکرول و ویدیوهای تعاملی برای معرفی نمونه‌کارها | بهره‌گیری از تایپوگرافی خلاقانه و فونت‌های بزرگ برای جلب توجه | طراحی حرفه‌ای با انیمیشن‌های اسکرول و کاراکترهای سه‌بعدی |
| تجربه کاربری (UX) | ناوبری ساده و روان، با تمرکز بر معرفی خدمات و نمونه‌کارها | ساختار منظم با تمرکز بر تایپوگرافی و ارائه محتوا | تجربه کاربری قوی با استفاده از انیمیشن‌های جذاب و تعاملی |
| نمایش برندها | نمایش لوگو و پروژه‌های برندهای معتبر در صفحه اصلی | تمرکز بر طراحی و تایپوگرافی بدون نمایش برندهای خاص | نمایش برندهای همکاری‌شده در صفحه اصلی برای جلب اعتماد |
| عملکرد و سرعت | عملکرد مناسب با انیمیشن‌های بهینه‌شده | سرعت بارگذاری بالا با طراحی سبک و مینیمال | بارگذاری کند به دلیل استفاده از انیمیشن‌های سنگین و کاراکترهای سه‌بعدی |
| مشاوره رایگان | راهنمایی خوب درباره امکان مشاوره رایگان و دکمه درخواست مشاوره در منو قرار داشت | امکان مشاوره از طریق فرم تماس | ارائه مشاوره رایگان قبل از ثبت سفارش |
Problem Statement
فرموله‌سازی مشکل از دید کاربر:
“چگونه می‌توانیم سایت آژانس را طوری طراحی کنیم که حرفه‌ای بودن، خلاقیت و اعتماد را منتقل کند، تا کاربران بیشتری به تماس یا ارسال درخواست مشاوره ترغیب شوند؟”
Value Proposition / UX Goals
اینجا بر اساس یافته‌ها می‌گی چی رو باید منتقل کنیم؟
برند حرفه‌ای و جسورانه
طراحی خلاقانه و به‌روز
نمونه‌کارهای متنوع و چشم‌گیر
CTA واضح و برجسته در هر صفحه
UX KPIs (شاخص‌های ارزیابی تجربه کاربری)
| KPI | وضعیت فعلی | هدف |
|---|---|---|
| Bounce Rate | 72% | کاهش به 45% |
| Form Conversion Rate | 0.8% | افزایش به 3%+ |
| Scroll Depth | میانگین تا 60٪ | افزایش به 85% در صفحات کلیدی |
| Time on Portfolio Page | 1m:10s | افزایش به 2m+ |
مستند سازی ایده ها
| بخش سایت | مشکل | ایده پیشنهادی |
|---|---|---|
| صفحه Home | حس ساده و ابتدایی | طراحی Hero section با انیمیشن subtle + تایپوگرافی bold + اسلاید نمونه‌کار |
| بخش خدمات | درک نشدن خدمات | طراحی کارت‌های تعاملی با ایکون + نام + microcopy ساده |
| CTAها | نادیده گرفته شدن | CTA ثابت در نوار کناری یا پایین صفحه + انیمیشن ورود نرم |
باز طراحی وب سایت Novorio
پس از انجام تحلیل‌های خود، به این نتیجه رسیدیم که نحوه نمایش نمونه‌کارها مهم‌ترین جنبه در بازطراحی وب‌سایت است. نمایش تنها یک تصویر از صفحه اصلی وب‌سایت‌های طراحی‌شده، برای کاربران به اندازه کافی جذاب نبود.
علاوه بر این، طراحی وب‌سایت Novorio، به‌ویژه صفحه اصلی آن، بیش از حد ساده بود. انتخاب رنگ‌ها و سایر عناصر طراحی باعث شده بود که وب‌سایت غیرحرفه‌ای به نظر برسد. همچنین، دکمه “درخواست مشاوره” به اندازه کافی جذاب نبود و نتوانسته بود کاربران را به اقدام ترغیب کند.
بخش خدمات نیز به‌طور مؤثری توجه کاربران را جلب نمی‌کرد. برای بهبود تجربه کاربری و افزایش تعامل، راهکارهای زیر را اجرا کرده‌ایم:
- بازطراحی وب‌سایت بر اساس ترندهای مدرن
- استفاده از تم رنگی تیره برای القای حس حرفه‌ای بودن و ظرافت
- افزودن انیمیشن به بخش‌های خدمات و نمونه‌کارها برای افزایش تعامل کاربران
- نمایش تعداد بیشتری از نمونه‌کارها در صفحه اصلی
- اضافه کردن یک انیمیشن چشم‌نواز به بخش “درخواست مشاوره” برای جلب توجه کاربران
- ارائه اطلاعات بیشتر درباره مشاوره رایگان برای تشویق کاربران به اقدام
طراحی انیمیشن بخش خدامت
انیمیشن بخش ابتدایی سایت با تمرکز بر معرفی نمونه کارها
انیمیشن بخش دعوت به درخواست مشاوره
تست A/B با استفاده از google Optimize برای بخش نمونه کارها
طراحی بخش نمونه کارها (طرح 2)
طراحی بخش نمونه کارها (طرح 1)