UA

Про проєкт
glo™ – це бренд компанії BAT, під яким випускаються пристрої для нагрівання тютюнових стіків. British American Tobacco Plc одна з провідних глобальних міжнародних компаній, під торговими марками якої продукція продається на понад 200 ринках.
Дисклеймер: надалі ми не робимо рекламу товарів та бренду glo™, а тільки демонструємо виконанну роботу студії «Турум-бурум» на конкретних прикладах проєкту.
Проблематика:
- Некоректно налаштовані інструменти збору інформації, що перешкоджають здійсненню коректного аналізу взаємодії користувачівз сайтом та ухваленню релевантних рішень щодо подальших змін в інтерфейсі та відстеженню їх впливу на KPIs.
- Недоліки юзабіліті інтерфейсу, які могли негативно впливати на ключові показники сайту.
Задача:
Вдосконалення UX/UI-дизайну та виправлення налаштувань GA4 для сайту glo™
ESR підхід
Ми вирішили застосувати підхід ESR (Evolutionary Site Redesign), оскільки сайт glo™ має впізнаваний серед користувачів стиль та функціонує як вже налагоджений механізм для оптимізації.
Цей підхід передбачає поетапне впровадження змін у дизайні з метою поліпшення юзабіліті та збільшення конверсій замовлень.
Замість створення нового сайту ми аналізуємо даний дизайн для виявлення недоліків та вдосконалення його з урахуванням тактик CRO для підвищення конверсій у сфері електронної комерції.

Виправлення недоліків налаштування Google Analytics 4
Розробили івент-карту для визначення можливих шляхів, якими користувачі можуть пройти для вирішення своїх завдань.

Створили схему подій та параметрів, які застосували до карт шляху користувачів для моніторингу зразків поведінки відвідувачів сайту на кожному етапі їх взаємодії з платформою.

Рекомендації щодо усунення помилок юзабіліті
- виявили понад 80 помилок сайту
- сформували гіпотези покращення виявлених юзабіліті недоліків
- розробили прототипи майбутнього сайту glo™

1. Недостатня залученість постійних клієнтів
Проблема: На головній сторінці низькі показники скролу та взаємодії з елементами, а значить головна сторінка не виконує основну задачу – зацікавити користувачів.
Рекомендація: адаптувати головну сторінку під інтереси користувачів, що повертаються - замість переліку з 6 однакових популярних товарів відображати список з різних моделей товарів.
До редизайну

Вигляд головної сторінки після редизайну
Демонстрація нових моделей девайсу, супутніх товарів та аксесуарів для залучення користувачів просуватися далі сайтом
Після редизайну

2. Незручна опція вибору кольору товару
Проблема: Проблема: 40% користувачів не переглядають обраний товар в інших кольорах і залишають сторінку
Рекомендація: спростити опцію вибору кольору, підняти вище індикатори кольорів і розташувати їх біля фото товару.
До редизайну

Відсутність швидкого перемикача кольору та теплова карта, яка демонструє, що лише 60% користувачів доскролювали до кінця сторінки.
Картка товару після редизайну:
Зручний перемикач кольору, додаткові фото в галереї, прискорене завантаження сторінки (мобільна версія)
Після редизайну

3. Неможливо швидко придбати обраний продукт
Проблема: сторінка з таблицею порівняння продукції не мала кнопки додавання у кошик.
До редизайну

Рекомендація: додати кнопку «Купити» або ж зробити картки товарів у порівнянні клікабельними, щоб користувачі могли перейти на сторінку.
Після редизайну

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

Рекомендація: фіксувати при скролі кнопку оформлення замовлення та змістити акцент на неї, щоб заохотити користувачів завершити покупку.
Після редизайну


Редизайн сайду glo™ за ESR: основні здобутки
Під час роботи над оптимізацією сайту продажів систем нагрівання glo™ наша команда сконцентрувалася на двох ключових завданнях:
- Налаштування інструментів збору інформації для аналізу.
- Виявлення помилок юзабіліті на сайті за допомогою налаштованої аналітики та надання рекомендацій для їх виправлення.
У результаті, вже через два місяці після випуску нової версії сайту:
+87% СR
Конверсія при посадці на картки товарів
+22,31% СR
Конверсія для нових користувачів
+131% СR
Конверсія користувачів, що переглянули сторінки девайсу glo™hyper x2 для десктоп