Кейси Бізнес
18 березня 2025

Як за допомогою UX-aудиту зміцнити довіру до бренду і впливати на конверсії для ecommerce

Проєкт: malopus.ua.

Період роботи: 05.09.24–30.09.24

Регіон: Україна.

Послуга: UX дизайн.

Команда проєкту: Катерина Музика, UX Specialist; Єлизавета Удод, Data Analyst; Ольга Сиволап, Project Manager; Данило Мінін, Head of Usability Department в Netpeak Ukraine.

Хто наш партнер

MAL’OPUS — це українське видавництво, яке орієнтується на ґік-культуру. Засноване у 2018 році, розпочало свою діяльність з публікації коміксів Marvel. Сьогодні асортимент включає артбуки, манги, книги та тематичні кулінарні видання. Команда прагне видавати світові бестселери та радувати шанувальників популярної культури якісною ліцензійною продукцією.

Пропонує знижки на передзамовлення, бонуси до замовлень і ексклюзивні обкладинки для окремих видань.

Для встановлення довіри і комунікації з читачами активно використовує соціальні мережі.

Посмотреть эту публикацию в Instagram

Публикация от видавництво MAL’OPUS 🐙 (@malopus_comics)

Цілі співпраці. Зміцнити довіру до бренду через зміни на сайті

Ключовим бізнес-складником для видавництва є передзамовлення. Користувачі оплачують товар наперед, навіть якщо отримати свою мангу зможуть, наприклад, через чотири місяці.

сайт  MAL'OPUS

Відтак для MAL’OPUS важливо створити атмосферу довіри, підкресливши відсутність ризиків у передзамовленні. І про це варто комунікувати на сайті, аби кожен відвідувач чітко бачив: якщо манга, артбук, комікс будуть недоступні чи замовлення втратить актуальність, користувач може отримати свої кошти назад.

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

Аби досягти цього, команда Netpeak Ukraine мала детально пропрацювати користувацький досвід, оптимізувавши всі етапи — від перегляду картки товару до оформлення замовлення чи передзамовлення зі 100% передплатою.

Також ми визначили performance-метрики з Google Analytics, динаміка яких би показала, чи ефективні пропоновані зміни на сайті:

  • add_to_cart (додавання товару);
  • begin_checkout (початок оформлення замовлення);
  • purchase (покупки).

Налаштування аналітики. Аудит GA4 й інтеграція з Clarity

Для досліду і пошуку точок зростання ми потребували якісної аналітики. Працювали із сервісами Google Analytics 4, Clarity та їх інтеграцією для повноти картинки.

Google Analytics 4 дозволяє бачити дані про поведінку користувачів на сайті, зокрема, кількість переглядів товарів, додавання товарів до кошика, завершення покупок. А також відстежувати перехід через різні етапи шляху користувача, зокрема відвідування сторінки продукту до оформлення замовлення.

Clarity дозволяє:

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

У перші ж дні разом з аналітиками Netpeak Ukraine ми перевірили коректність налаштування подій в GA4, дещо виправили і надали рекомендації щодо усунення інших помилок.

Також запропонували додаткові події, які б зробили аналітику по сайту ще більш інформативною:

  • click_begin_checkout — користувач натиснув «Оформити замовлення» під час перегляду кошика;
  • click_update_cart — клік по кнопці «Оновити» у кошику;
  • click_purchase — користувач натиснув «Оформити замовлення» після заповнення даних і перейшов до оплати;
  • send_form_notify_me — клік на «Сповістіть мене» у разі відсутності товару;
  • click_sign_up — користувач натиснув «Реєстрація»;
  • sign_up — успішна реєстрація облікового запису;
  • log_out — вихід з облікового запису;
  • click_social — користувач натиснув на кнопку переходу у соціальні мережі.

Далі зробили дашборд у Looker Studio, налаштований під ecommerce, для відображення необхідних даних.

дашборд у Looker Studio, налаштований під ecommerce

Приділили увагу вивченню поведінки користувачів за допомогою Microsoft Clarity. Сервіс дає змогу створювати теплові мапи та записи сесій і візуалізувати, як саме відвідувачі взаємодіють із сайтом MAL’OPUS.

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

На момент публікації кейсу наші пропозиції ще не впровадженні на malopus.ua. Але хочемо детально показати логіку UX-аудиту від Netpeak Ukraine.

Покращення юзабіліті і збільшення конверсійності. Пропозиції

В рамках UX-аудиту команда Netpeak Ukraine сфокусувалась на гіпотезах, які:

  • можна швидко реалізувати;
  • здатні ефективно вплинути на конверсію.

Ми прагнули знайти рішення, що вимагатимуть мінімальних витрат часу, але водночас принесуть максимальний результат для покращення користувацького досвіду.

Хедер

Ця верхня частина сайту має містити важливі для користувача елементи та інформацію.

Аналітика показала, що іконкою «Дзвінок» у хедері мало користуються. Згідно з даних Clarity на неї натиснуло ~0,03%, в той час як на «Особистий кабінет» — 1,16%. І якщо в десктопній версії сайту кнопку «Особистий кабінет» було добре видно, на мобайлі через менший розмір екрану вона прихована.

Хедер сайту малопус

Хедер сайту малопус 2

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

  1. У мобільній версії винести іконку «Особистий кабінет» в хедер. Щоб користувач легше її знаходив і швидше заходив в кабінет.
  2. Візуально змінювати іконку «Особистий кабінет», аби відображати, коли користувач в кабінеті, а коли ні. Наприклад, за допомогою кольору.

Пошук

Пошук на ecommerce сайтах відіграє ключову роль у створенні зручного та ефективного користувацького досвіду. Він допомагає швидко знаходити потрібні товари, підвищувати конверсії та сприяти загальному задоволенню відвідувачів. В нашому випадку пошук не мав опції cross-sell.

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

У такий спосіб через опцію cross-sell в пошуку ми пробуємо не тільки утримати ліда на сайті, але й збільшити шанси на покупку.

Фільтри

Згідно з даними аналітики на сайті переважають користувачі мобільної версії ~73,9%.

фільтри малопус

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

Рекомендація. Вказувати кількість фільтрів, обраних користувачем.

Вказувати кількість фільтрів

Це необхідно, аби користувачі бачили, скільки критеріїв фільтрації вони вибрали, легко орієнтувались у налаштуваннях пошуку та швидше адаптували фільтри під свої потреби.

Команда Netpeak Ukraine розраховувала, що ця гіпотеза допоможе уникнути помилки некоректної фільтрації, яка може призвести до невідображення потрібного товару і відповідно до втрати користувача.

Головна сторінка

Перегляди Головної сторінки, згідно даних аналітики за серпень 2024, становили ~13,2%. Це значний показник, який свідчить про те, що багато користувачів починають свій шлях сайтом саме з головної. Вона є першим враженням, а відтак чудовим майданчиком для анонсів важливих подій.

Головна сторінка малопус

Команда MAL’OPUS робила акцент на колаборації з іншими видавництвами. Мова про показ манг від видавництв-партнерів, аби надати своїм читачам ширший асортимент улюблених книг.

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

Картка товару

Cередній показник додавання товарів до кошика 5,97% (джерело benchmark), показник MAL’OPUS — 4,34%.

Cередній показник додавання товарів до кошика 5,97%

Рекомендація. Інтегрувати методики впливу, а саме додати інформацію про бонуси до замовлення.

Клієнти MAL’OPUS за умови замовлення отримують приємні бонуси, як-то закладки або стікер-паки. Помітна комунікація про такі подарунки на сайті може значно підвищити показник додавання товарів у кошик. Бонуси створюють додаткову цінність для клієнтів, стимулюючи їх швидше приймати рішення про покупку. Крім того, ексклюзивні подарунки, пов’язані з темою товару, роблять покупку привабливішою, особливо для лояльних клієнтів. Такий підхід також викликає у користувачів відчуття вигоди та унікальності, що сприяє підвищенню рівня покупки на сайті.

Кошик

Кнопка primary (головна кнопка на сторінці) має виділяти одну основну дію, пропоновану користувачеві. У випадку кошика, це «Оформити замовлення». Наявність двох основних кнопок може плутати користувача, він не розумітиме чітко, яку дію слід здійснити першочергово.

Рекомендація. Показати різницю між головною і другорядною копною за допомогою кольору.

Зробивши «Оформити замовлення» primary, а «Продовжити покупки» як secondary, ми чітко покажемо користувачеві, що оформлення замовлення є пріоритетним.

кошик малопус рекомендація

Одним з аспектів наших аудитів є виявлення технічних питань, що можуть погіршити досвід користувачів і перешкоджати завершенню покупок. Мова про:

  • некоректну роботу інтерактивних елементів;
  • неправильне відображення кількості товарів у кошику;
  • збої в процесі оформлення замовлення.

У випадку з MAL’OPUS, на сторінці товарів іконка кошика відображала, що в ньому є два товари, але при натисканні виявлялося, що товари не були додані.

Рекомендація. Виправити помилку, яка призводить до відображення некоректної кількості товарів, що були вже видалені. Це допоможе уникнути плутанини серед користувачів і забезпечить коректне функціонування кошика.

Оформлення замовлення

Згідно з даними Clarity, користувачі заповнюють обов’язкову інформацію не охоче:

  • дані в поле «Прізвище» ввели ~4,38% юзерів;
  • в «Ім’я» — 3,87%.

Оформлення замовлення малопус

Рекомендація. Для зменшення постійного введення інформації — полегшити процес для постійних користувачів.

Простий спосіб зареєструвати обліковий запис під час покупки без додаткових кроків — чекбокс.

Після того, як користувач заповнює основні поля для особистих даних (ім’я, прізвище, електронна пошта, телефон тощо), розміщуємо чекбокс під цими полями із міткою «Зареєструвати мене». Вона пояснить юзеру, що у разі вибору цього пункту дані будуть збережені для створення облікового запису. Чекбокс одразу повинен бути активним (галочка стоїть), щоб стимулювати реєстрацію.

Якщо користувач залишає чекбокс активним, після натискання кнопки «Оформити замовлення» або «Зареєструватися» система автоматично:

  • реєструє обліковий запис на основі введених даних;
  • створює обліковий запис користувача з використанням цих даних;
  • відправляє повідомлення на електронну пошту користувача для підтвердження реєстрації та створення пароля.

У такий спосіб за умови повторної покупки конкретній людині не доведеться знову вводити свої дані, система їх підтягне сама.

Передзамовлення

Згідно з GA4 ~84% користувачів сайту New users.

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

Рекомендації. Додати для читачів такі меседжі:

  • передзамовлення гарантує отримання книги одразу після друку;
  • надаються бонуси до передзамовлення, як-от стікери чи закладки;
  • вказати максимально точну дату отримання замовлення;
  • в разі форс-мажорних обставин — відключення світла, обстріли — реліз манги може бути затримано, однак людина в будь-якому разі отримає мангу, як тільки вона з’явиться у продажі;
  • якщо манга затримується і покупець не готовий чекати, для нього працює служба підтримки в будні з 10:00 до 18:00, і є опція повернути гроші.

Результати UX-аудиту

UX-аудит від Netpeak Ukraine дозволив виявити точки зростання для сайту MAL’OPUS і окреслити чіткі цілі, до яких вони можуть призвести.

  1. Підвищення конверсії та зростання продажів. Ми виявили «вузькі місця», які перешкоджали користувачам завершувати покупки, зокрема, оптимізували процес передзамовлення та покращили картки товарів. Додавання бонусів, таких як закладки або стікери, створили додаткову цінність для клієнтів, що сприяє збільшенню середнього показника додавання товарів у кошик.
  2. Покращення задоволеності користувачів. Рекомендації на основі даних Microsoft Clarity дозволять зробити інтерфейс інтуїтивнішим.
  3. Оптимізація мобільної версії. Зважаючи на те, що 73,9% користувачів сайту заходять через мобільні пристрої, важливо покращити для неї функціональність фільтрів, додавши індикатор кількості обраних параметрів.
  4. Зниження показника відмов та покращення утримання користувачів. Впровадження рекомендацій товарів при відсутності результатів пошуку дозволить утримати користувачів на сайті та підвищити шанси на покупку.
  5. Покращення продуктивності та вирішення технічних проблем. Ми ідентифікували та виправили технічну помилку з некоректним відображенням кількості товарів у кошику, що знизило ризик виникнення плутанини серед користувачів та забезпечило стабільне функціонування сайту. Це також допомогло уникнути негативних емоцій у клієнтів, пов’язаних із помилками в інтерфейсі.
  6. Підвищення довіри до передзамовлень. Для нових користувачів (~84% new users) ми додали чітку комунікацію про безпечність передзамовлень, можливість отримати бонуси та повернути кошти в разі затримок.
Дізнатися більше
4
0
0
(5 out of 5 based on 6 marks)