Редизайн сайту The Spy Store: як підвищити конверсію на 16% за 1 місяць?

Як підвищити конверсію на 16% за 1 місяць завдяки еволюційному редизайну сайту (ESR)? Як UX-аудит може допомогти виявити наявні проблеми з юзабіліті та знайти нові точки зростання для підвищення конверсії? Дізнайтеся, як це зробити на прикладі редизайну сайту інтернет-магазину Spy Store. 

The Spy Store: знайомство з проектом

The Spy Store — це авторитетна австралійська компанія, яка спеціалізується на обладнанні та послугах спостереження. Маючи майже 10 років досвіду роботи на ринку, магазин цінує свою репутацію і пропонує високоякісні інструменти, ретельно перевірені фахівцями компанії.

Цільова аудиторія the Spy Store включає:

• Звичайні люди;
• Приватні детективи;
• Правоохоронні органи;
• Бізнес.

Попри популярність послуг, що надаються компанією, її вебсайт показав низький рівень лояльності клієнтів та залучення до інтерфейсу, що вплинуло на продажі та конверсію. Ось чому The Spy Store звернувся до Турум-бурум з такими цілями:

• Зрозуміти причини низьких показників KPI електронної комерції;
• Виявити присутні проблеми з юзабіліті;
• Знайти нові точки зростання;
• Розробити зручний для користувача інтерфейс;
• Впровадити інтуїтивно зрозумілу навігацію;
• Виправити акценти інтерфейсу;
• Підвищити коефіцієнт конверсії бізнесу.

Інтерфейс the Spy Store: 6 найкритичніших помилок та їх вирішення 

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

1. Недопрацьована стилістика та перевантажена шапка сайту

Проблема: UX-аудит показав, що сесія для нових користувачів завершувалася в 54% випадків, а коефіцієнт конверсії електронної комерції був утричі гіршим, ніж для постійних користувачів. І головна причина цього — ускладнена навігація сайту.

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

Рішення: Шапка сайту є ключовим елементом для навігації, тому ми запропонували спростити та скоротити її, зробивши шапку стилістично та функціонально більш доступною. На основі даних аналітики ми пріоритезували всі елементи за їх популярністю та розставили відповідні акценти, зробивши навігацію більш інтуїтивно зрозумілою. Оскільки узгодженість бренду може допомогти збільшити дохід на 10-20%, ми адаптували її до певної палітри кольорів та стилю, пов'язаного з компанією, але зробили дизайн сайту більш зрозумілим та зручним для користувачів.

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

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

2. Головна сторінка: неочевидні послуги інтернет-магазину

Проблема: Вебсайт мав високий показник відмов (77,87%) і показник виходів (54,03%), оскільки клієнти не мали достатньо інформації про послуги компанії та не розуміли переваги, які вони можуть отримати. Це тому, що головний банер вебсайт не передавав основне повідомлення компанії і не міг залучити користувачів до воронки продажів.

Рішення: Ми створили естетично приємний банер з описовим заголовком та чітким закликом до дії (CTA). Він мотивує відвідувачів заглибитися в веб-сайт, водночас відсіюючи людей, які не є цільовою аудиторією The Spy Store.

Практичні рекомендації: Користувачам потрібно близько 0,05 секунди, щоб скласти думку про ваш бренд. Тому домашня сторінка повинна привертати увагу клієнтів, передавати місію компанії та спонукати користувачів продовжувати перегляд сайту. Яскравий та інформативний банер з акцентом на послуги та переваги — це хороший спосіб залучити користувачів до воронки продажів.

3. Неструктурована та захаращена видача категорії

Проблема: Після UX-аудиту ми отримали наступні дані: 48,23% нових користувачів і 50,49% постійних покупців залишали вебсайт, не переглянувши жодну іншу сторінку. Окрім того, лише 0,13% усіх користувачів переходили на сторінку порівняння товарів. Це було викликано тим, що сторінка видачі категорії була погано структурована та складна для навігації: текстовий опис перемістив список товарів нижче першого екрана, назви товарів були занадто великими, ціна та знижка були важко помітними, кнопка порівняння була незручною та незвичною.

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

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

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

4. Відсутність кнопок «додати в обране та купити» 

Проблема: Згідно з нашим дослідженням, лише 2,9% нових користувачів і 8,21% тих, хто повернувся, додали товар до кошика після перегляду видачі категорії. Причиною цього було те, що на прев'ю картки товару на сторінці видачі категорії не було двох ключових кнопок, необхідних для оптимізації бізнес-конверсії: «додати до списку бажань» та «додати до кошика». Через це користувачам сайту доводилося робити додаткові кроки, щоб завершити цільову дію — здійснити покупку.

Рішення: Додайте кнопки «Купити» та «Додати в обране» в прев'ю картки товару, щоб користувачі могли додавати товари до списку бажань або кошика без зайвих дій і повертатися до них, коли вони будуть готові до покупки. Таким чином, якщо користувачу сподобалося кілька товарів, він може додати їх до списку бажань/кошика, не відволікаючись від перегляду асортименту. Таким чином, ми дбаємо про клієнтів і допомагаємо їм вибрати продукт, який найкраще відповідає їхнім потребам.

Практичні рекомендації: Щоб максимально задовольнити вимоги цільової аудиторії, враховуйте особливості пропонованих товарів. Наприклад, The Spy Store продає електроніку — товари середнього та високого цінових сегментів. Може виникнути ситуація, коли покупець не може дозволити собі купити товар прямо зараз, але збирається зробити це після отримання зарплати тощо. У таких випадках кнопка «Додати до списку бажань» дозволяє вибрати товар і купити його пізніше. Водночас можливість одразу додати товар до кошика збільшує шанси на спонтанну покупку.

5. Порушення візуальної ієрархії картки товару

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

Рішення: Ми запропонували збільшити відступи між інформаційними розділами та виправити візуальну ієрархію блоків на сторінці. Спочатку ми розмістили розділ з інформацією, необхідною для прийняття рішення про покупку (ціна товару, наявність коду, рейтинг), потім — блок з деталями про товар і доставку, а нижче — cross-sale блок. Така ієрархія відповідає маркетинговій стратегії AIDA: увага (attention) — інтерес (interest) — бажання (desire) — дія (action). Вона полегшує сприйняття інформації користувачем і підвищує конверсію інтернет-магазину.

Практичні рекомендації: Переконайтеся, що сторінка товару не перевантажена інформацією, але при цьому містить всі важливі деталі, і користувачі можуть знайти їх без зайвих зусиль. Розставте пріоритети блоків відповідно до специфіки товару, розмістивши на першому екрані найважливіші дані, такі як назва, ціна, рейтинг, кнопка «Додати до кошика» тощо. У такому випадку покупці отримають всю необхідну інформацію для прийняття рішення перед очима. Всі інші деталі, такі як опис, характеристики, блок cross-sale, upsell тощо, можна розмістити нижче для тих, хто потребує додаткової інформації перед покупкою.

6. Труднощі з покупкою одразу декількох товарів

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

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

Практичні рекомендації: Обов'язково надайте покупцям всю необхідну інформацію про замовлення з можливістю його редагування безпосередньо на сторінці кошика. Інструменти cross-sale та upsell також можуть і повинні бути присутні в кошику. Надайте покупцеві можливість додати супутні товари, додаткові послуги або комплектуючі, не виходячи з кошика — це зробить ваш інтернет-магазин більш клієнтоорієнтованим і допоможе збільшити середній чек.

Результати редизайну сайту The Spy Store: основні зміни KPIs

У цій статті ми висвітлили лише невелику частину виконаної нами роботи. Після UX-аудиту команда Turum-burum склала перелік з понад 60 рекомендацій для оптимізації конверсії The Spy Store. У тісній співпраці з підрядником ми визначили найбільш критичні помилки юзабіліті та виправили їх завдяки еволюційному редизайну сайту. 

Як змінилися KPIs після впровадження нових UX/UI рішень вже через 1 місяць:

• Коефіцієнт конверсії електронної комерції збільшився на 16%;
• Збільшилася кількість відвідувачів сайту з мобільних пристроїв;
• Коефіцієнт бізнес-конверсії для клієнтів, що повертаються, покращився на 4%;
• Ми простежили позитивну тенденцію в конвертації нових відвідувачів у покупців;
• Кількість товарів, доданих до кошика в мобільній версії, збільшилася на 100%, а в десктопній — на 39%;
• Відсоток користувачів, які додають товари з картки товару, зріс на 80%;
• Середній дохід на одного користувача (ARPU) збільшився на 20%.

Як видно з цієї статистики, UX-аудит The Spy Store дозволив інтернет-магазину отримати дохід, який не міг бути отриманий раніше через наявні помилки в інтерфейсі та функціоналі. А оскільки 75% опитаних користувачів стверджують, що формують свою думку про компанію та довіру до неї лише на основі її вебсайту, інвестиції в якісне юзабіліті-тестування можуть допомогти бізнесу знайти нові точки зростання та підвищити конверсію. Зараз ми продовжуємо оптимізацію дизайну, контенту та користувацького досвіду сайту The Spy Store, щоб ще більше посилити ці позитивні тенденції.

‍