داستان یک همکاری - بازطراحی صفحهٔ اصلی سوپراپلیکیشن اسنپ

اسنپ برای اولین بار سوپراپلیکیشن را با هدف ایجاد بازاری بزرگ‌تر برای کاربرانش به بازار ایران معرفی کرد. ایدهٔ اصلی سوپراپلیکیشن، فراهم کردن بستری برای دسترسی راحت‌تر و سریع‌تر به سرویس‌های موجود مانند سرویس درخواست خودرو، سفارش غذا و خرید بلیت سفر بود. به‌علاوه، سوپراپلیکیشن بستری برای معرفی چندین سرویس جدید را نیز فراهم می‌کرد.

هدف اصلی از معرفی سوپراپلیکیشن، دسترسی کاربران به تمام سرویس‌ها در یک اپلیکیشن و بی‌نیاز کردن آن‌ها از نصب چندین اپلیکیشن برای برطرف کردن نیازهای روزانه‌شان بود. این مفهوم برای کاربران ایرانی بسیار تازه و ناآشنا بود. این چالش مهم‌ترین دغدغهٔ تیم سوپراپلیکیشن اسنپ و آغازی بر تغییرات در بازطراحی صفحهٔ اصلی سوپراپلیکیشن بود.

بیان مسئله

در بازطراحی صفحهٔ اصلی با چهار مسئله روبه‌رو بودیم:

• عدم‌استفاده بهینه از فضای موجود در صفحهٔ اصلی، مانعی برای ارائه و معرفی سرویس‌ها بود.
• محتوای غیرمرتبط روی صفحهٔ اصلی کاربران را سردرگم می‌کرد.
• طراحی صفحهٔ اصلی نمی‌توانست امکان شخصی‌سازی را برای کاربران فراهم کند.
• مهم‌ترین مسئله، تجربهٔ کاربر بود که با وجود سه مشکل قبلی نیاز به بهبود و ارتقا داشت.

چه چالش‌هایی داشتیم؟

مانند هر تغییر دیگری می‌دانستیم که مشکلات و چالش‌هایی وجود دارد. با مشاهدهٔ رفتار کاربران و بررسی‌ داده‌ها، مهم‌ترین چالش‌های‌مان را در فهرستی جمع‌آوری کردیم:

• کاربران از همهٔ سرویس‌های موجود در صفحهٔ اصلی سوپراپلیکشن استفاده نمی‌کردند.
• مدت زمان ماندگاری کاربران در صفحهٔ اصلی پایین بود و به همین دلیل تمام سرویس‌ها را نمی‌دیدند.
• کاربران ایرانی به‌خوبی با مفهوم و کارکرد سوپراپلیکیشن‌ها آشنا نبودند.
• کاربران متوجه قابلیت کلیک روی برخی از بخش‌های صفحهٔ اصلی نمی‌شدند.

از کجا شروع کردیم؟

قبل از اینکه وارد فرایند بازطراحی شویم، روی سه مسئلهٔ اصلی متمرکز شدیم تا راه برای‌مان روشن‌تر شود.

۱. به چه تغییراتی نیاز داشتیم و چرا می‌خواستیم این تغییرات را انجام دهیم؟

با بررسی دوبارهٔ صفحهٔ اصلی سوپراپلیکیشن متوجه شدیم که می‌توانیم استفادهٔ بهینه‌ای از فضای موجود در سوپراپلیکیشن داشته باشیم. همچنین، محل قرارگیری بنرها مناسب نبود و محتوای آن‌ها هم نظر کاربران را جلب نمی‌کرد. این دو عامل باعث می‌شد که کاربران به بنرها تبلیغاتی توجه نکنند. یک بنر سبز در بالای صفحه قرار گرفته بود که فضای زیادی را اشغال می‌کرد و تأثیرگذاری لازم برای قرار گرفتن در بالاترین بخش صفحه را نداشت. درعین‌حال، طراحی این صفحه انعطاف‌پذیری لازم برای حذف این بنر را نداشت.

بعضی از سرویس‌ها مانند اسنپ کلاب در بخش‌های مختلف صفحه قرار گرفته بودند و به همین دلیل نرخ بازدید این سرویس‌ها زیاد بود. این اتفاق روی انتخاب سرویس‌های دیگر توسط کاربران تأثیر می‌گذاشت.

۲. محتوای غیرمرتبط روی صفحهٔ اصلی که باعث سردرگمی کاربران می‌شد چه چیزهایی بودند؟

ما می‌خواستیم کاربر در راحت‌ترین حالت ممکن بتواند از سرویس‌های موجود استفاده کند؛ درعین‌حال باید به کاربر انگیزهٔ لازم را برای ماندن در صفحهٔ اصلی می‌دادیم تا پیشنهادهای اختصاصی و سرویس‌های جدیدمان را ببیند. علاوه‌ بر این، قصد داشتیم کاربران را نسبت به بنرهای تبلیغاتی روی صفحهٔ اصلی مشتاق کنیم تا بتوانیم علاوه بر درخواست خودرو ثبت سفارش از سرویس‌های دیگر سوپراپلیکیشن را افزایش دهیم. هیچ‌کدام از این اهداف با بنرهای ایستا وشخصی‌سازی‌نشده(Static Banners) امکان‌پذیر نبود.

۳. چه راهکارهایی برای بهبود تجربهٔ کاربری روی صفحهٔ اصلی سوپراپلیکیشن وجود داشت؟

در ابتدا، فهرستی از مشکلات موجود درست کردیم. سپس، با اولویت‌بندی، فهرست‌مان را کوتاه‌تر کردیم تا بدانیم از کجا باید شروع کنیم و چگونه باید تجربهٔ بهتری برای کاربرانمان بسازیم. اولین مشکل این بود که پالت رنگی استفاده‌شده روی صفحهٔ اصلی بسیار متنوع بود و این تنوع رنگی هنگام انتخاب سرویس موردنظر باعث حواس‌پرتی و سردرگمی‌ کاربران می‌شد.

به‌علاوه، ارتباط معناداری بین اجزای مختلف صفحهٔ اصلی ایجاد نشده بود و نحوهٔ نمایش اطلاعات و محتوا به‌هم‌ریخته بود.

این مسائل باعث شده بود که کاربران با همهٔ سرویس‌های ارائه‌شده در این صفحه آشنایی نداشته باشند.

فرایند تیم محصول و بازطراحی برای تغییر ساختار صفحهٔ اصلی سوپراپلیکیشن

شناخت جزئیات یک صفحهٔ اصلی منسجم و یک‌پارچه کمک می‌کرد که سرویس‌های‌مان را براساس اولویت و علاقهٔ کاربران و کسب‌وکار نمایش بدهیم.

بنابراین، تصمیم گرفتیم با تغییر ساختار صفحهٔ اصلی و اضافه کردن کارت‌های پویا و شخصی‌سازی‌شده‌(Dynamic Cards) مطابق با شهر سکونت کاربر ساختار صفحهٔ اصلی را بهبود ببخشیم.

۱- در دنیای سوپراپلیکشن‌ها چه می‌گذرد

در فرایند تحقیقات برای بازطراحی صفحهٔ اصلی جدیدمان، در هر قدمی که برای فرایند بازطراحی برمی‌داشتیم بر راه‌حل‌هایی با رویکرد طراحی‌محور تمرکز می‌کردیم. مقالات منتشرشده در وبلاگ‌های کسب‌وکارهای مشابه را مطالعه و بررسی کردیم. سپس، راه‌حل‌هایی برای استفادهٔ بهینه از فضا در صفحهٔ اصلی پیدا کردیم.

هم‌زمان برای اضافه کردن کارت‌های پویا به صفحهٔ اصلی سوپراپلیکیشن، راه‌حل‌ و استراتژی‌ اپلیکیشن‌های محبوبی مانند گوجک(Gojek)، گرب(Grab)، علی پی(Alipay) و وی‌چت(WeChat) را تجزیه و تحلیل کردیم تا بتوانیم راه‌حلی برای افزایش نرخ کلیک(CTR)، جی ام وی(GMV) و نرخ بازگشت کاربران پیدا کنیم. درعین‌حال، می‌خواستیم کاربرانی که درخواست خودرو می‌دادند را تشویق کنیم تا از سرویس‌های دیگر سوپراپلیکیشن اسنپ هم استفاده کنند.

۲- ایده‌پردازی برای بازطراحی صفحهٔ اول

در این مرحله، فهیم و دانا از تیم محصول سوپراپلیکیشن به همراه هومن و احسان از تیم طراحی در جلسات دیزاین اسپرینت(Design Sprint) برای ساختار جدید صفحهٔ اصلی ایده‌پردازی کردند.

در زیر بعضی از ایده‌های مطرح‌شده در این جلسات را می‌بینیم:

• در صفحهٔ اول بیشترین کلیک را روی آیکون‌های ردیف اول داشتیم، می‌خواهیم در طراحی جدید بتوانیم نظر کاربران را به بیشتر از یک ردیف از آیکون‌ها جلب کنیم.
• می‌خواهیم دسترسی بهتری به قسمت های مختلف روی صفحهٔ اول ایجاد کنیم.
• می‌خواهیم اهمیت هر بخش از صفحهٔ اصلی را از نگاه کسب‌و‌کار و کاربر بدانیم.
• و …

بعد از مشخص کردن اولویت‌ها، طراحان رابط کاربری شروع به طراحی حالت‌های متفاوت کردند. با همکاری بخش‌های مختلف در دیزاین اسپرینت‌های(Design sprints) مشخص، طرح‌های متفاوت طراحی‌ و بررسی شدند تا اینکه بالاخره طرح نهایی را با مدل بررسی متخصصین (‌Expert Review) انتخاب و طراحی منتخب را برای آزمون‌های موردنیاز آماده کردیم.

بعد از این مرحله، تصمیم گرفتیم طراحی‌های منتخب را تبدیل به پروتوتایپ(نمونهٔ اولیه) کنیم و برای رسیدن به طراحی کاربر‌پسندتر و کاربردی‌تر آن‌ها را مورد آزمون قرار بدهیم.

۳- پروتوتایپ کردن فرضیات

به منظور:

• کاربر محور بودن و هم‌دلی با کاربران
• پیدا کردن خطاها و اشکالات طراحی در سریع‌ترین زمان ممکن
• صرفه‌جویی در زمان و رسیدن به فرایند طراحی کارآمدتر

به این دلیل که کاربران قبل از این هم از سوپراپلیکیشن اسنپ استفاده می‌کرده‌اند، اگر نمونهٔ اولیه با جزئیات بالا و مانند اپلیکیشن واقعی طراحی نمی‌شد ممکن بود کاربران هنگام انجام آزمون‌های کاربرپژوهی گیج شوند و این موضوع می‌توانست روی هدفمان از این آزمان‌‌ها تأثیر بگذارد. «پروتوپای» تنها ابزاری بود که می‌توانستیم با استفاده از آن حس استفاده از یک اپلیکیشن واقعی را برای کاربران تداعی کنیم.

۴- طراحی کارت‌های پویا و شخصی‌سازی‌شده(Dynamic Banners)

در این مرحله به موازات بازطراحی ساختار اصلی صفحهٔ اول، طراحی کردن بنرها را شروع کردیم. ابتدا، صفحات اصلی همهٔ سرویس‌های موجود در سوپراپلیکیشن اسنپ را یک‌جا جمع کردیم تا بتوانیم همهٔ مدل‌های موجود را در طراحی جدید در نظر بگیریم.

در قدم بعدی در جلسات دیزاین اسپرینت، دانا، هومن و احسان برای هر سرویس یک کارت منحصربه‌فرد در نظر گرفتند و اطلاعات موردنیاز مربوط به آن سرویس را یادداشت کردند تا مشخص شود که هر سرویس به چه اجزایی نیاز دارد. در نهایت، توانستیم اجزای(Components) هر کارت را بسازیم.

برای نمایش محتوا براساس اولویت‌ و اهمیت‌ آن‌ها در صفحهٔ اصلی، مدل کسب‌وکار گروه اسنپ را مبنای کارمان قرار دادیم و به این نتیجه رسیدیم که باید برای بنرهای هر محصول سه اندازهٔ متفاوت داشته باشیم:

• کارت‌های کوچک برای پیشنهادهای مربوط به خدمات و محصولات
• کارت‌های متوسط برای پیشنهادهای مربوط به فروشندگان و تأمین‌کنندگان میانی
• کارت‌های بزرگ برای پیشنهادهای مربوط به ارائه‌دهندگان اصلی سرویس‌ها

هدفمان از این کار، نمایش پیشنهادها به‌طور هدفمند و روشن به کاربران بود و به‌علاوه می‌خواستیم سیستم پیشنهاد‌دهی براساس رفتار کاربران داشته باشیم.

۵- نمونهٔ اولیه(MVP)

برای اینکه فرضیه‌های‌مان را برای داشتن صفحهٔ اصلی پویا و شخصی‌سازی‌شده(Dynamic)، بسنجیم، از بنرهای ایستا(Static) موجود در صفحهٔ اصلی به‌عنوان نمونهٔ اولیه(MVP) استفاده کردیم.

تیم بازاریابی از این بنرهای ایستا(Static) روی صفحهٔ اصلی برای نمایش پیشنهادها یا کمپین‌های تبلیغاتی استفاده می‌کرد اما این بنرها به‌دلیل تنوع رنگی زیاد، صفحه را خیلی شلوغ کرده بودند و این شلوغی باعث سردرگمی کاربران می‌شد.

با پیاده‌سازی کارت‌های پویا دو هدف داشتیم:

۱. کاهش مراحل موردنیاز برای ثبت یک سفارش

۲. افزایش نرخ کلیک بر روی کارت/بنرهای صفحهٔ اصلی سوپراپلیکیشن

اولین قدم قانع کردن سرویس‌های مختلف برای معرفی و تبلیغ محبوب‌ترین خدمات یا محصولاتشان در بنرهای صفحهٔ اصلی بود. مثلاً معرفی ۵ دسته‌بندی محبوب در سفارش غذا، ۵ هتل یا مسیر پروازی برتر، ۵ خدمت محبوب از اسنپ دکتر و …

با کمک روش «بررسی تخصصی» مدل منتخب برای ساخت پروتوتایپ اولیه را انتخاب کرده و برای شروع تست، بر روی طراحی جدید ساختار صفحه اولیه آماده شدیم. در نهایت با هدف داشتن صفحه‌ای پویا، مقدمات لازم برای ارزیابی نهایی را انجام دادیم.

۶- کاربرپژوهی (UX Research)

حالا وقت آن بود که گزینهٔ منتخبی که با «مدل بررسی متخصصین» برای تغییر ساختار صفحهٔ اصلی به آن رسیده بودیم و فرضیه‌های‌مان را در مورد شخصی‌سازی(Dynamic) کردن کارت‌ها به‌وسیلهٔ بنرهای ایستا مورد آزمون و اعتبارسنجی قرار دهیم.

وقتی به مرحلهٔ آزمون رسیدیم با طراحی انتخابی‌مان می‌توانستیم پاسخ پرسش‌های زیر را از طریق پژوهش تجربهٔ کاربر به دست بیاوریم:

1. آیا با جابه‌جا کردن نوار بالا و پایین در صفحهٔ اصلی، کاربران می‌توانند به‌راحتی محل جدید قرارگیری آیکون‌ها را پیدا کنند؟
2. آیا با قرارگیری مهم‌ترین و پردرآمدترین سرویس‌های اسنپ روی نوار شناور پایین صفحه، کاربران می‌توانند به‌راحتی آن‌ها را پیدا کنند؟
3. به چه میزان مفهوم «دسته‌بندی آیکون‌ها» برای کاربران قابل‌درک و کاربردی است؟
4. به چه میزان جابه‌جایی و مسیر حرکت کاربران راحت است؟
5. چه چیزی بنرها را برای کاربران جذاب می‌کند و باعث می‌شود روی آن‌ها کلیک کنند؟
6. مدل ذهنی کاربران در مورد سوپراپلیکیشن چگونه است؟

فرایند کاربرپژوهی

مانند هر پروژهٔ کاربرپژوهی دیگر تیم کاربرپژوهی ما روش پژوهش را براساس پرسش‌هایی که داشتیم انتخاب کرد. برای پاسخ به پرسش‌های ۱ تا ۴ نیاز داشتیم نحوهٔ رفتار و تعامل کاربر با طراحی جدید را بررسی کنیم و برای پرسش‌های ۵ و ۶ باید متوجه طرز فکر کاربر می شدیم و مدل ذهنی او را نسبت به اسنپ به‌عنوان یک سوپراپلیکیشن درک کنیم.

انتخاب روش کاربرپژوهی:

برای پاسخ به پرسش‌های رفتاری به آزمون کاربردپذیری نیاز داشتیم و برای پاسخ به پرسش‌های نگرشی باید با کاربران مصاحبه می‌کردیم. نیره، مدیر تیم کاربرپژوهی، در جلسه‌ای با تیم دیزاین و محصول برای شروع فرایند کاربرپژوهی برنامه‌ریزی کرد. بعد از هم‌فکری به این نتیجه رسیدیم که این دو روش را با هم ترکیب کنیم و قبل از شروع آزمون کاربردپذیری با کاربران ۲۰ دقیقه مصاحبه کنیم و سوالاتمان را بپرسیم. سپس در ۲۰ دقیقه بعدی، براساس سناریوهایی که از قبل آماده کرده بودیم از کاربران آزمون کاربردپذیری بگیریم.

چه کاربرانی را برای کاربرپژوهی انتخاب کردیم:

گروه‌های کاربران را براساس رفتارشان و تعاملی که با سوپراپلیکیشن اسنپ داشتند انتخاب کردیم. در جلسهٔ ایده‌پردازی که با حضور دانا از تیم پروداکت، احسان و هومن از تیم طراحی و نیره از تیم کاربرپژوهی برگزار شد، به ۳ دسته زیر رسیدیم:

۱. کاربرانی که در ۶ ماه گذشته در سوپراپلیکیشن اسنپ درخواست خودرو داشته‌اند.(۵ کاربر)

۲. کاربرانی که در ۶ ماه گذشته در سوپراپلیکیشن اسنپ درخواست خودرو و سفارش غذا از اسنپ فود داشته‌اند.(۵ کاربر)

۳. کاربرانی که در ۶ ماه گذشته در سوپراپلیکیشن اسنپ در بیشتر از ۲ سرویس سفارش ثبت کرده‌اند.(۵ کاربر)

۴. کاربرانی که بعد از معرفی اسنپ به عنوان یک سوپراپلیکیشن به بازار، هیچ سفارشی ثبت نکرده بودند.(۵ کاربر)

نتایج مصاحبه با کاربران:

• حدود ۸۵٪ از کاربران متوجه تبدیل شدن اسنپ به سوپراپلیکیشن نشده بودند و هیچ آشنایی با کلمهٔ «سوپراپلیکیشن» نداشتند.
• نمایش همهٔ سرویس‌های یک برند در یک اپلیکیشن برای کاربران، عبارت «همهٔ سرویس‌ها در یک اپلیکیشن» و «در دسترس بودن» را تداعی می‌کرد.
• یکی از اصلی‌ترین دلایلی که کاربران در سرویس‌های دیگر اسنپ سفارش ثبت نمی‌کردند، نامتوازن بودن سیستم عرضه و تقاضا و کمبود تأمین‌کننده، به‌ویژه در شهرهای کوچک و متوسط بود.
• کاربران به دنبال تجربهٔ یکپارچه در استفاده از همهٔ سرویس‌ها بودند.

نتایج آزمون کاربردپذیری:

• همهٔ کاربران به‌راحتی سرویس تاکسی و غذا را که در طراحی جدید به نوار شناور پایین صفحه منتقل شده بود، پیدا کردند اما برای عادت کردن به جای جدید این آیکون‌ها به زمان نیاز دارند.(برای اندازه‌گیری منحنی یادگیری نیاز به آزمون A/B داریم)
• کاربران متوجه تفاوت تخفیف‌ها و اسنپ‌کلاب نمی‌شوند.
• کاربران روی صفحهٔ اصلی پیمایش(اسکرول) نمی‌کنند چون همچنان بر این باور هستند که این صفحه هنوز هم شلوغ است.(نیاز به اندازه‌گیری ‌SNR داریم)
• کاربران تمایلی به کلیک کردن روی بنرها/ کارت‌ها ندارند چون به دنبال پیشنهادهای شخصی‌سازی‌شده و یا ویژه هستند.
• مفهوم «آیکون در آیکون»برای کاربران ایرانی بسیار ناآشناست و با وجود علامتی که روی این دسته آیکون‌ها وجود داشت متوجه نشدند که اگر روی آیکون سرویس اصلی کلیک کنند آیکون‌های زیر مجموعهٔ آن سرویس را می‌توانند مشاهده و انتخاب کنند(به عنوان مثال، آیکون سفر یا اسنپ تریپ، چند سرویس زیرمجموعه دارد مانند بلیت هواپیما، قطار، اتوبوس و…)

نتیجه‌گیری:

برای طراحی جدید تصمیم داشتیم اگر نتیجهٔ آزمون برای بیشتر از ۷۰٪ کاربران مثبت شد پیاده‌سازی پروژه را شروع کنیم. اگر نرخ موفقیت بین ۵۰٪ تا ۷۰٪ بود براساس بازخوردهای کاربران به چرخه طراحی برگردیم و طراحی را ارتقا دهیم و در صورتی‌که نرخ موفقیت زیر۵۰٪ بود دوباره برای رسیدن به نمونه‌های جدید طراحی ایده‌پردازی کنیم.

خوشبختانه، براساس نتایج آزمون کاربردپذیری نرخ موفقیت کاربران ۸۵٪ بود.

همچنین، آزمون انجام‌شده روی نمونهٔ اولیه کارت‌های پویا نشان داد نرخ کلیک روی کارت‌ها۲۰٪ افزایش پیدا کرده بود.

طراحی نهایی

بعد از تمام شدن آزمون کاربرپژوهی با همکاری تیم تجربهٔ کاربری و تحلیل داده‌های به‌دست‌آمده، به طراحی نهایی رسیدیم و کار پیاده‌سازی بازطراحی صفحهٔ اصلی را با قابلیت‌ها و ویژگی‌های جدید شروع کردیم.

برای کارت‌های پویا، هدف ما افزایش تعامل کاربران با این بخش و به وسیله‌ی نمایش بیشتر محتوای مرتبط با آن‌ها بود.

تعریف محصول جدید

انتظار داشتیم که با بازطراحی موارد زیر را بهبود دهیم:

• توجه کاربران را به صفحهٔ اصلی بیشتر کنیم و تلاش کنیم کاربران بیشتر از یک ردیف آیکون از سرویس‌ها را ببینند.
• محتوای پویا و مرتبط به کاربران نمایش دهیم.
• با شناور کردن نوار پایین صفحه آن را به شست کاربران نزدیک‌تر کنیم.
• از بخش ابتدایی صفحه برای نمایش خدمات و محصولاتی که اولویت کسب‌وکار ما هستند استفاده کنیم.
• صفحهٔ اصلی را سامان‌دهی و آن را کاربردی‌تر کنیم.

می‌خواستیم چگونه این اهداف را دنبال کنیم؟

استفاده از تمام فضای بالقوه در صفحهٔ اصلی

برای استفاده بهینه‌تر از فضا، تصمیم گرفتیم که از مفهوم « آیکون در آیکون» استفاده کنیم؛ یعنی خدمات زیرمجموعه یک سرویس را زیر آن قرار بدهیم. آیکون در آیکون به کاربران کمک می‌کرد تا راحت‌تر روی صفحهٔ اصلی جابه‌جا شوند.

برای استفاده بهینه از فضای موجود در صفحهٔ اصلی، بنر سبز بالای صفحه را حذف کردیم.

از‌آنجایی‌که سرویس‌های زیادی در سوپراپلیکیشن اسنپ خدمت ارائه می‌کنند، در کنار تیتر هر بنر، یک مربع‌ رنگی که برگرفته از هویت بصری سرویس‌ها بوده قرار دادیم تا به کاربران در تشخیص بهتر سرویس‌ها کمک می‌کنیم. مثلاً، برای نمایش اسنپ فود از مربع صورتی استفاده کردیم.

از ترکیب عنوان‌ها و زیرعنوان‌ها برای بهبود میزان پیمایش(scroll) روی صفحهٔ اصلی استفاده کردیم.

به‌علاوه، برای اینکه بتوانیم بیشتر از یک بنر را بعد از هر پیمایش نشان بدهیم،‌ پیمایش افقی روان(Smooth Scrolling) را اضافه کردیم تا کاربر با هر پیمایش روی صفحهٔ اصلی بتواند بنرهای بیشتری را ببیند.

سپس قابلیت‌ها و قسمت‌های اصلی مرتبط به سوپراپلیکیشن شامل اسنپ کلاب و تخفیف ها را در یک نوار ناوبری(Navigation bar) در بالای صفحه قرار دادیم.

همچنین، برای انتخاب راحت‌تر۴ سرویس پراستفادهٔ گروه اسنپ، آن‌ها را روی نواری شناور در پایین صفحه(floated bottom bar) قرار دادیم تا کاربر حتی زمان پیمایش روی صفحه هم بتواند به این سرویس ها دسترسی داشته باشد و همچنین به ناحیه قرارگیری شست دست هم نزدیک باشد.

این ساختار به ما کمک کرد تا برای قرارگیری حساب کاربری، کیف پول و قابلیت‌هایی که می‌خواستیم در آینده اضافه کنیم جای بهتری پیدا کنیم. به‌این‌صورت کاربران می‌توانستند حساب کاربری‌شان را در صفحهٔ اصلی اپلیکیشن شخصی‌سازی کنند.

افزایش تعامل کاربران با سوپراپلیکیشن

با این تغییرات توانستیم تعامل کاربران را با سوپراپلیکیشن افزایش بدهیم:

• کارت‌های پویا: کارت‌های روی صفحهٔ اصلی با هر بار باز شدن سوپراپلیکیشن تغییر می‌کنند و محتوایی براساس رفتار کاربر ارائه می‌دهند.
• بنرها/آیکون‌های کمپین‌های بازاریابی: این‌ها بنرهای ایستا، سرویس‌هایی هستند که می‌توانند تنها به گروهی از کاربران که از قبل مشخص شده‌اند، نمایش داده شوند.
• بنرهای کشویی (Sliders): در طراحی قبلی فقط یک مدل بنر(بنر ایستا) برای تمام پیشنهادها و کمپین‌های تیم بازاریابی داشتیم اما در طراحی جدید بنرهای کشویی را اضافه کردیم که به تیم محصول و بازاریابی اجازه می‌داد عملکرد بهتری داشته باشند. این مدل بنر جدید شامل قابلیت‌های جدیدی بود مثل، نرخ پیمایش (Scroll) سریع‌تر که هر ۵ ثانیه یک بنر جدید را به‌همراه نقاط راهنما نمایش می‌داد. این نقاط کاربر را راهنمایی می‌کرد که با پیمایش افقی (Horizontal Scroll) بنرهای بیشتری را ببیند.
• متون رهنما(Coach-marks): متون راهنمایی را اضافه کردیم تا به کاربران نشان بدهیم که پراستفاده‌ترین سرویس‌ها به نوار پایین صفحه منتقل شده‌اند.
• فلِش‌های راهنما: روی صفحهٔ اصلی فلِش‌ راهنما را برای ترغیب کاربران به پیمایش(Scroll) به پایین صفحهٔ اصلی اضافه کردیم تا کاربران را با بخش بنرها، آشنا کنیم.
• نمایش مطابق با شهر سکونت کاربر: قابلیت جدیدی را به صفحهٔ اصلی اضافه کردیم که فقط سرویس‌هایی را به کاربر نشان می‌دهد که در شهر سکونت او در دسترس هستند و کاربران بنرهای مربوط به سرویسی که در شهرشان در دسترس نیست را نمی‌بینند. (مثلاً نمایش ندادن سرویس فروشگاه یا اسباب‌کشی در شهرهایی که هنوز این سرویس‌ برای کاربران در دسترس نیست).

بهبود تجربه کاربر

المان‌های رابط کاربری:

با شناسایی مشکلاتی که داشتیم، تصمیم گرفتیم اصول طراحی رابط کاربری‌مان را با اصول سیستم طراحی(Design System) اندروید(Android) و آی‌او‌اس(iOS) هم‌سو کنیم. همچنین، فرایند بازطراحی و پیاده‌سازی را سریع‌تر کردیم تا کاربران بتوانند با تغییرات جدید به‌راحتی تعامل کنند.

از طرف دیگر جامع بودن و مستندات سیستم طراحی گوگل متریال(Google material) برای سیستم‌های بزرگ و پیچیده‌ای مانند اسنپ مناسب است. با اضافه شدن سریع سرویس‌های جدید به گروه اسنپ، بیشتر از گذشته نیاز به یک سیستم طراحی دقیق احساس می‌شود.

به زودی، در مقاله‌ای دیگر به جزئیات بیشتری در رابطه با سیستم طراحی اسنپ می‌پردازیم. اکنون چند مثال کوتاه بزنیم:

سیستم تایپوگرافی ما ساختار مناسبی برای عناوین و متن‌های اصلی نداشت، اسکن چشمی اجزا برای کاربران سخت بود و محتوا آشفته و بی‌نظم به نظر می‌رسید. استفاده از اصول تایپوگرافی گوگل متریال به ما کمک کرد رابط کاربری منظم‌تری بسازیم و باعث شد محتوای متنی رابط کاربری مانند نوشته‌های روی بنرها و کارت‌ها خواناتر بشوند.

رنگ‌های اصلی که در طراحی قبلی بودند را دوباره استفاده کردیم اما سیستم رنگی ما مشکلات دسترس‌پذیری داشت. به همین دلیل، در طراحی جدید کنتراست‌ها را تغییر دادیم. به عنوان مثال، برای رنگ اصلی برندمان، از رنگ سبز تیره‌تری که قبلاً در هویت بصری‌مان تعریف شده بود استفاده کردیم تا بتوانیم سوپراپلیکیشن را دسترس‌پذیرتر کنیم.

به‌علاوه، با کمک کاربران و دریافت بازخورد از آن‌ها تمام حالت‌ها و کنتراست‌های رنگی را بررسی کردیم.

همگام‌سازی راهنماهای هویت بصری:

برای اینکه یک صفحهٔ اصلی منسجم و سرویس‌هایی هماهنگ داشته باشیم تصمیم گرفتیم تمام محتوای متنی، رنگ‌ها و طراحی‌ها را هم‌راستا کنیم.

برای رسیدن به این نقطه، به یک «راهنمای ساختاریافته و قوانین طراحی مدون(Design guideline)» نیاز داشتیم. پس:

• باید طیف‌های رنگی برای هر سرویس مشخص کنیم.
• صفحهٔ اصلی جدید از الگویی جدید پیروی می‌کرد تا به کاربران برای درک راحت‌تر دسته‌بندی‌های جدید کمک کند.
• هویت بصری و کلامی اسنپ، ترکیبی از راحتی و جدیت است و این هویت باید در تمام بخش‌ها به صورت یکپارچه دیده شود.
• اجزای بصری، هماهنگی لازم را برای رسیدن به یکپارچگی و انسجام لازم نداشتند و باید همهٔ اجزای تصویر براساس سیستم طراحی جدید اصلاح و هماهنگ‌سازی شوند.

معماری اطلاعات:

پیش از شروع پروسهٔ بازطراحی، بازخوردهای متفاوتی از کاربرانی گرفتیم که قادر نبودند به راحتی با سرویس‌های ارائه شده در صفحهٔ اصلی تعامل کنند.

همچین بر اساس نتایج «Heatmap» از یک سو و داده‌های کمی کسب‌شده از رفتار کاربران از سویی دیگر، ساختار داده در صفحهٔ اصلی را تغییر دادیم. این ساختار جدید کاملا بر اساس مدل ذهنی کاربران و بر مبنای نتایج مصاحبه‌های عمیق با برخی از کاربران و متد Card Sorting با آن‌ها بود.

پیاده‌سازی و تحویل

در تمام طول فرایند دیزاین، جلسات بسیاری را با مدیر فنی برگزار کردیم تا امکان‌پذیری(Feasibility) پیاده سازی این تغییرات را به‌طورمرتب بررسی کنیم. در نهایت، بعد از آماده شدن نمونهٔ اولیه و نهایی‌شده طراحی، در جلسه‌ای برنامهٔ اجرای بازطراحی را با کل تیم فنی سوپراپ تهیه کردیم.

این فرایند برای ما استرس‌زا و دشوار بود چرا که در حال ایجاد تغییر بزرگی روی محصول بودیم و این اتفاق دقیقاً قبل از پروژهٔ بزرگ بازسازی محصول اسنپ(Re-factoring project) بود و به‌علاوه همگی چشم‌به‌راه نتایج مثبت و امیدوارکننده‌ بودیم.

پیاده‌سازی طراحی جدید را به ۴ بخش تقسیم کردیم:

۱- سربرگ بالا (Top header)

۲- نوار ناوبری بالا(Top navigation bar )

۳- نوار پایین شناور(Floated bottom bar)

۴- تغییرات رابط کاربری

قصد داشتیم تمامی این موارد را در یک کوارتر(quarter) پیاده‌سازی کنیم که تقریباً زمان‌بندی فشرده‌ و کوتاهی محسوب می‌شد.

مرحلهٔ دوم کاربرپژوهی

روش آزمون A/B:

بعد از تمام شدن مرحلهٔ پیاده‌سازی، براساس مدل آماری فرضیهٔ صفر (null-hypothesis statistical model) سناریوهای متفاوت را برای اجرای آزمون ‌A/B روی طراحی جدیدمان شروع کردیم. این آزمون با موتور آزمون (A/B test engine) که در تیم اسنپ پیاده‌سازی شده است و آن را ABaas یا AB test as a service می‌نامیم، اجرا شد.

بدیهی است که نتایج اولیهٔ آزمون برای ما بسیار مهم بود. پس، سعی کردیم در اجرای آزمون بسیار بادقت عمل کنیم. خوشبختانه ابزار آزمون داخلی ما «ABaas» این امکان را فراهم می‌کرد که دسته‌بندی و طبقه‌بندی‌های درست و متنوعی از کاربران داشته باشیم و با دقت بالا و کمترین خطا این آزمون را اجرا کنیم.

براساس شاخص‌های رفتاری، اولین گروه کاربران را برای آزمون انتخاب کردیم. برای این کار براساس مدل ‌RFM کاربران را طبقه‌بندی و گروه‌های مناسب را برای آزمون جدا کردیم. اولین گروه شامل کاربرانی بود که در ۶۰ روز گذشته حداقل ۲ بار درخواست خودرو داشتند یا از اسنپ فود استفاده کرده بودند. سپس، این دسته را روی نمودار آوردیم تا فراوانی آن‌ها را بسنجیم.

نتایج آزمون ‌A/B:

• نرخ کلیک روی صفحهٔ اصلی افزایش پیدا کرد.
• میانگین نرخ کلیک روزانه و سفارش خدمات لُجستیک ( تاکسی، پیک، موتور و …)، اسنپ فود، اسنپ مارکت، هتل و فین‌تک(Fintech) هنگام آزمون افزایش پیدا کرد.
• متوجه شدیم که هر جا نرخ کلیک به‌طور چشم‌گیری افزایش پیدا کرده بود، درصد کمی کاهش در نرخ تبدیل برخی از سرویس‌ها داشتیم. با این حال، نرخ تبدیل اسنپ مارکت و تاکسی افزایش پیدا کرده بود.
• متوجه شدیم که با نمایش آیکون سرویس‌ها در دو ردیف (ردیف اول و نوار شناور پایین) میزان دیده شدن آیکون سرویس‌ها افزایش پیدا کرده بود.
• نرخ کلیک روی سرویس‌هایی که در نوار ناوبری بالا قرار داشتند افزایش پیدا کرده بود. این نوار شامل آیکون صفحهٔ اصلی، اسنپ کلاب و تخفیف‌ها می‌شود.
• با متعادل‌سازی(Normalize) نرخ نسبت تعداد دفعاتی که اپلیکیشن باز شده به نرخ کلیک در گروه‌های آزمون و کنترل توانستیم با ساختار طراحی جدید نرخ کلیک بیشتری را روی سرویس درخواست خودرو به دست آوریم.
• آزمون در ابتدا نشان داد که کاربران در پیدا کردن آیکون‌هایی که روی نوار شناور پایین صفحه قرار گرفتند، مشکل دارند اما به مرور زمان، مدت زمان پیدا کردن آیکون‌ها در نوار شناور پایین کاهش پیدا کرد و این مشکل برطرف شد.

مزایای بازطراحی صفحهٔ اصلی سوپراپلیکیشن به زبان اعداد

• کلیک روی صفحهٔ اصلی تقریباً ۲ برابر افزایش پیدا کرد.
• متوسط نرخ کلیک روی بخش بنرهای صفحهٔ اصلی در زمان انتشار ۲۸٪ افزایش پیدا کرد.
• متوسط نرخ کلیک روی آیکون‌ سرویس‌های درخواست خودرو، موتور، پیک و وانت ۱۲٪ افزایش پیدا کرد.
• نرخ کلیک روی نوار شناور در صفحهٔ اصلی ۱۰۰٪ افزایش پیدا کرد.
• میزان سفارش از سرویس‌های دیگر ۴٪ افزایش پیدا کرد.
• نرخ تبدیل سرویس‌های اصلی(اسنپ فود، اسنپ مارکت، اسنپ دکتر، اسنپ تریپ و…) تقریباً ۴٪ افزایش پیدا کرد.
• تعداد کاربرانی که روی صفحهٔ اصلی سوپراپلیکیشن کلیک می‌کنند تقریباً ۶۷٪ افزایش پیدا کرد.

انتشار طراحی جدید

در ابتدا، طراحی جدید را برای ۱۰٪ از کاربران به‌مدت ۲ هفته منتشر و سپس نتیجه را بررسی کردیم. نتایج موفقیت‌آمیز بود. سپس، طراحی جدید را برای ۳۰٪ از کاربران منتشر و دوباره نتایج را بررسی کردیم. درآخر، طراحی جدید را برای ۵۰٪ از کاربران منتشر کردیم و بعد از اینکه به‌مدت ۱ ماه و به‌صورت مداوم همه جزئیات را با تیم تکنولوژی و کسب‌و‌کار مانیتور کردیم، تصمیم گرفتیم که طراحی جدید را در ۲۱ اردیبهشت‌ماه برای ۱۰۰٪ از کاربران اندروید منتشر کنیم.

سخن آخر

فرایند طراحی صفحهٔ اصلی شاید در ابتدا ساده به نظر می‌رسید اما به سفری جذاب و به‌یادماندنی تبدیل شد. این سفر بی‌شک بدون همراهی و هم‌دلی تیم‌های مختلف به سرانجام نمی‌رسید.

پروژه‌ای که ۱٪ خطا می‌توانست هزینه‌های هنگفتی را در پی داشته باشد، تبدیل به یکی از پروژه‌های بزرگ و در عین حال سودآور اسنپ شد و همهٔ ما از تیم‌های مختلف را در کنار هم قرار داد.

موفقیت، نتیجه‌ای قابل‌انتظار از همکاری بی‌نظیر ۳ رکن اصلی اسنپ یعنی تیم طراحی، تیم محصول و تیم تکنولوژی بود. در طی پروژه همراهی و هماهنگی در سطوح مدیریت تیم‌های مختلف باعث شد به نتایجی که مدنظرمان بود برسیم.

این پروژه برای‌مان فقط یک پروژه نبود بلکه برای‌مان الگویی از یک همکاری فوق‌العاده ساخت که از آن بتوانیم در پروژه‌های آتی استفاده کنیم و با بهبود آن نمونه‌ای از کار تیمی منسجم و یک‌پارچه را به‌ نمایش بگذاریم.

متشکریم

شما قادر هستید تا نسخهٔ بصری این ارائه را در Behance و Dribbble و نسخه انگلیسی آن را در Medium بخوانید.

اعضای این پروژه:

هومن هاتفی - مدیر ارشد تیم طراحی در اسنپ (Linkedin, Dribbble, Twitter, Instagram, Behance)

فهیم اختر - مدیر ارشد تیم مدیریت محصول در اسنپ (Linkedin)

احسان مددی - طراح ارشد محصول در اسنپ (Linkedin, Dribbble, Behance)

دانا ابراهیمی - مدیر محصول در اسنپ (Linkedin)

نیره افضلی - سرپرست تیم کاربرپژوهی در اسنپ (Linkedin)

نیلوفر اسلامی حقیقت - نویسندهٔ تجربه در اسنپ (Linkedin)