A/B-тестування е-коммерс в дії: +58% CR на мобайл або історія редизайну VSV-Group

З дитинства ми знаємо: «від перестановки доданків сума не змінюється». Але чому це не працює у вебдизайні? Як розташування елементів на сторінці впливає на поведінку користувачів та прибуток бізнесу? Чи можна визначити, які елементи сайту сприяють підвищенню конверсії, а які навпаки позбавляють вас прибутку? 

У цій статті ми розглянемо, як A/B-тестування дизайну VSV-Group допомогло підтвердити UX/UI гіпотези Турум-бурум і розкрити потенціал бізнесу, збільшивши конверсію ключових сторінок від 30% до 58%.

Про VSV-Group

До вашої уваги VSV-Group — компанія, що спеціалізується на виготовленні та встановленні воріт, автоматики, сонцезахисних систем, мобільних рамп, складського обладнання і не тільки. Така різноманітність послуг і є головною перевагою компанії. Тут ви можете замовити рішення «під ключ» з урахуванням ваших найкреативніших індивідуальних побажань.

Однак у контексті UX/UI дизайну це створює виклик: як детально представити всі доступні послуги компанії й при цьому не перевантажити інтерфейс? Адже без зручної та інтуїтивно зрозумілої навігації користувачі банально не зможуть ознайомитися з потрібною інформацією та збагнути цінність послуг бізнесу. 

Тож представники VSV-Group звернулися до студії Турум-бурум із конкретною метою — оптимізувати інтерфейс сайту для збільшення KPI та клієнтоорієнтованості сайту.

Яким чином нам вдалося збільшити конверсії ключових сторінок від 30% до 58% і яку роль у цьому відіграло A/B тестування? Відповідь у наступному розділі.  

UX аудит або що передувало A/B тестуванню е-коммерс?

Впевненість – це добре, самовпевненість – небезпечно. Це працює у всьому: від визначення робочої ваги у залі до вибору UX/UI дизайну проєкту. І у кожному з випадків самовпевненість має свою ціну: у першому — підірване здоров’я, у другому — марнування часу та коштів.

Саме тому команда Турум-бурум вважає A/B-тестування е-коммерс одним із найефективніших методів для перевірки UX/UI гіпотез та прийняття обґрунтованих бізнес-рішень. А оскільки ми надаємо перевагу діям над словами, нижче — детально про кейс VSV-Group та досягнуті результати.

Оптимізація сайту VSV-Group або все починається з юзабіліті аудиту

Ми провели UX аудит в результаті якого знайшли близько 30 юзабіліті недоліків інтерфейсу і це насправді є хорошою новиною. Чому? По-перше, виявлені UX/UI помилки пояснюють, чому деякі показники ефективності сайту не такі високі, як хотілось би. А по-друге, демонструють величезний потенціал бізнесу у випадку усунення таких недоліків.

Що ж далі? Виявити помилки недостатньо — потрібно знайти шляхи їх усунення. Тому на основі даних аналітики й власного досвіду, фахівці Турум-бурум створили ряд гіпотез для виправлення недоліків інтерфейсу, збільшення ключових метрик сайту та визначення подальшого вектора розвитку.

Однак як переконатися, що сформовані гіпотези спрацюють на 100%? Саме тут у гру вступає A/B тестування продукту для е-коммерс, метою якого і є перевірити як користувачі реагуватимуть на запропоновані UX/UI зміни.

A/B тестування продукту для е-коммерс: досвід VSV-Group

Тож ми вирішили перевірити, як спрацюють наші гіпотези на практиці за допомогою A/B-тестування е-коммерс. Для цього обрали дві ключові сторінки сайту з найбільшим потенціалом зростання — сторінка видачі та сторінка товару у десктоп та мобільній версіях. Ми розробили новий дизайн двох сторінок сайту з урахуванням гіпотез, рекомендацій та референсів. 

Так, частина користувачів рандомно попадали на стару версію сайту, інша ж – на оновлений дизайн. Ми порівнювали поведінку користувачів та KPI сторінок до та після редизайну й побачили виняткові результати.

Сторінка видачі ворітних систем

Проблематика:

Під час юзабіліті аудиту ми помітили, що сторінка була задовгою, перенавантаженою текстом, а блок з перевагами компанії знаходився так низько, що 80% користувачів навіть не доскролювали до нього. Також фото товарів були невеликого розміру, а кнопки візуально зливалися з іншими елементами сайту. Самі ж описи були представлені зигзагом, через що було важко шукати потрібну інформацію на сторінці.

Гіпотеза:

На сторінці видачі користувачі не знаходили інформації про компанію та її переваги, приклади робіт, відгуки та інші елементи, що підвищували б їхню лояльність до бренду. А оскільки фотографії товарів були недостатньо акцентними, щоб захопити їхню увагу — вони залишали сайт.

Рекомендації:

1. Розмістити картки воріт по дві в рядку;
2. Зменшити розмір SEO тексту;
3. Коротко вказати основні переваги компанії;
4. Збільшити розміри фотографій з прикладами робіт та розташувати їх перед блоком FAQ;
5. Додати інформацію про ключові особливості різних видів воріт.

Результат A/B тестування:

Ми перевірили як запропоновані зміни потенційно вплинуть на поведінку користувачів і отримали позитивні результати. Так, користувачі довше залишалися на сайті, демонстрували вищий рівень залученості та частіше переходили на сторінку товару. Як наслідок — конверсія сторінки видачі товару в десктоп збільшилась на 32%, а для мобільних пристроїв — на 58%. 

Сторінка товару (воріт для гаража)

Проблематика:

Аналогічні юзабіліті недоліки: мало візуального контенту, замалі та неякісні фото матеріалів воріт зблизька, занадто довгі описи, відсутність переліку переваг товару, а також блоку з технічними характеристиками, описом конструкції та особливостями її використання. Вкрай критичними ці помилки були для мобільних пристроїв, де деякі блоки взагалі не відображались.

Гіпотеза:

Через великий об’єм неструктурованого контенту, користувачі не знаходили ключової інформації, що допомогла б їм ухвалити рішення: чіткого опису типів воріт, їх призначення, якісних фото з близької відстані для оцінки текстури та кольору, а також не було відгуків інших клієнтів та можливості швидко зв’язатись з менеджером компанії для отримання консультації. А це складний продукт, який ми не щодня купуємо.

Ось уявіть, що ви вирішили встановити ворітну систему на дачі, але не маєте достатнього досвіду в цій сфері. Ви очікуєте, що сайт допоможе вам зробити правильний вибір. Однак що відбудеться, якщо ви не знайдете відповіді на свої питання серед «полотна тексту»? З великою ймовірністю — розгубленість, роздратування і бажання швидше залишити вебресурс. Через це потенційні клієнти VSV-Group швидко і залишали сайт, не зробивши вибору. 

Рекомендації:

• Додати макро фотографії матеріалів і приклади колірних рішень;
• Візуально відокремити опції та блоки сторінки між собою;
• Імплементувати блоки соціального доказу: «Приклади робіт», «Відгуки», «Поради експертів» та цифри, що підкреслюють експертність компанії;
• Додати блок із технічними характеристиками, рекомендовані варіанти рішення, додати довідку у вигляді поп-апу для специфічних характеристик із зазначенням найкращого рішення для конкретних ситуацій;
• Спростити форму калькулятора розрахунку вартості товару;
• Збільшити картку товарів, а також фото для мобільної версії сайту.

Один блок — різні підходи: який з них більше привертає вашу увагу? А який зручніше та наочніше демонструє виконану роботу?

Результати А/B тестування:

Результати тестування нового дизайну сторінки товару підтвердили нашу гіпотезу. Після редизайну сторінка стала більш інтуїтивно зрозумілою та зручною для користувачів. Як результат ми знову отримали стрімке збільшення коефіцієнта мікроконверсії — +30% для десктоп і +48% для мобільних пристроїв.

Таким чином ми підтвердили цифрами ефективність наших гіпотез та необхідність їх впровадження!

Що дають результати A/B тестування для е-коммерс?

У випадку з VSV-Group, A/B-тестування для е-коммерс дозволило перевірити гіпотези щодо оптимізації сторінки видачі та сторінки товару на сайті у десктоп та мобільній версії й підтвердити, що впровадження нового дизайну призведе до значних результатів, а саме:

• +32% мікроCR для сторінки видачі товарів у десктоп і + 58% для мобільних пристроїв;
• +30% мікроконверсії для сторінки товарів у десктоп і +48% для мобільних пристроїв.

У цьому кейсі нам вдалося підтвердити ефективність усіх висунутих гіпотез, але інколи для досягнення кінцевої мети редизайн проходить кілька ітерацій. У такому випадку A/B-тестування дозволяє підсвітити місця, які потребують доопрацювання і тим самим зберегти бюджет і час замовника, мінімізуючи ризики для самого бізнесу. Цікаво як відбувається робота над такими кейсами? Тоді ознайомтеся з деталями роботи над проєктом Crystal Clear Memories.