Редизайн сайту 100CBD: як продуманий UX зменшив bounce rate на 17%

Як за допомогою інтерфейсу пояснити новий і складний продукт, й навіть категорію? Як транслювати переваги компанії та підвищити довіру аудиторії? На прикладі кейсу 100CBD розповідаємо та показуємо, як редизайн сайту й оптимізація інтерфейсу не лише зменшили показник відмов на 17% та збільшили час перебування на сайті на 198%, а й підготували бізнес до зростання трафіку.

Про проєкт: цілі, задачі та запит власника

100CBD — це український преміальний бренд натуральних БАДів на основі канабідіолу (CBD) та фракційної кокосової олії, які допомагають підвищити резилʼєнтність, зняти мʼязові спазми, покращити сон і зменшити емоційну напругу. Завдяки високій точності концентрації, зручному використанню та різноманіттю смаку бренд завоював довіру клієнтів і лікарів.

Клієнт звернувся до агенції Турум-бурум у момент запуску B2C-напряму, щоб посилити власний e-commerce-канал. До 2023 року бренд переважно працював через офлайн-дистрибуцію. Однак через блекаути та загальне зростання втоми й проблем зі сном серед українців компанія зробила акцент на онлайн-продажах.

Основні завдання проєкту:

• Підготовка сайту до зростання трафіку. Маркетинг мав привести нових клієнтів, тож треба було забезпечити їм легкий і зрозумілий шлях до покупки.
• Трансляція преміальності бренду через інтерфейс. Створення дизайну сайту, де кожен елемент підкреслює переваги компанії, якість, науковий підхід і унікальність продукту.
• Підвищення довіри та лояльності. Треба було додати соціальний доказ, тобто відгуки клієнтів і лікарів для збільшення довіри нових користувачів до компанії та продукту в цілому.
• Інформативність та підвищення рівня обізнаності аудиторії. Забезпечити легкий доступ до всієї необхідної інформації, щоб користувачі легко знаходили відповіді на свої питання про компанію та продукт.
• Оптимізація користувацького шляху. Усунення бар’єрів та скорочення зайвих кроків у воронці на шляху до покупки. 

Як ми працювали над 100CBD: підхід, аналіз та результати юзабіліті аудиту

Робота над проєктом почалася з глибокого аналізу ніші бізнесу, його цілей, поведінки користувачів та дослідження конкурентів. Окрім UX-аудиту сайту, аналізу даних аналітики та теплових карт, ми також опрацювали клієнтські дані щодо сприйняття товару. Бренд надав нам результати опитувань, які вони проводили як серед покупців, так і серед тих, хто не здійснив покупку, що дозволило нам краще зрозуміти бар’єри на шляху до конверсії. Враховуючи реальні відгуки та потреби користувачів, ми змогли виявити ключові проблеми юзабіліті й точки росту та запропонувати рішення, які справді працюють в інтересах аудиторії:

• 97% відвідувачів — нові користувачі, однак вони часто швидко залишають сайт, оскільки не знаходять ключової інформації. 
• Головна сторінка — основна точка входу та стартовий майданчик для 50% користувачів, але 48% виходять, так і не зрозумівши, що таке CBD, для чого він їм і які його переваги. 
• Сторінка «Про CBD» друга за популярністю як точка входу, але перше як виходу з exit rate 55%. Користувачі проводять на сторінці не більше 2 хвилин і часто йдуть, не знайшовши відповідей на свої питання.
• 75% трафіку з мобільних пристроїв, але час перебування вдвічі менший ніж на десктопі, вказуючи на те, що мобільний інтерфейс потребує покращення та більшої адаптації під різні девайси.
• Близько 76% користувачів покидають воронку на сторінці товарів, не знайшовши достатньої інформації для прийняття рішення.
• Лише 1,5% користувачів проходять воронку до кінця і завершують покупки, а 98,5% стикаються з різними перешкодами та виходять з сайту на різних етапах.

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

Редизайн сайту: задовільняємо потреби користувача, розв’язуємо задачі бізнесу

Ми розпочали роботу з 100CBD у листопаді 2023 року, а вже в липні 2024 оновлений сайт запустили, на основі наших прототипів та рекомендацій. 

Головна сторінка: утримуємо увагу, ведемо до покупки‍

Проблема: непродумана структура сторінки

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

‍
Рішення: Додати на перші екрани ключову інформацію про продукт, його цінність і користь. Впровадити блоки з описом товару, перевагами, відгуками, FAQ і рекомендаціями.

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

‍Проблема: відсутність інформації про переваги бренду та місця продажу

Блоки типу «Made in Ukraine» і «Пшикай і підтримуй спокій» виглядали красиво, але не надавали реальних причин обрати цей бренд. Також відсутність блоку з місцями офлайн-продажу змушувала користувачів самостійно шукати інформацію де можна придбати продукцію окрім як онлайн.

‍Рішення: Додати блок з ключовими перевагами бренду та інтегрувати блок з картою для пошуку офлайн магазинів та аптек у регіонах, де можна придбати продукцію.

‍Проблема: неможливість додати товари в кошик без переходу на сторінку товару

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

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

Дизайн головної сторінки сайту: що врахувати?

‍Головна сторінка — це візитівка вашого інтернет-магазину та перше враження про ваш бізнес. І якщо за кілька секунд користувач не зрозуміє, що ви пропонуєте та чому йому це потрібно, він просто закриє вкладку.

Щоб цього не сталося, головна сторінка має відповідати на три запитання:

• Що це за магазин і що тут пропонують? Додайте яскраві банери з продукцією та поясненням, які болі користувача закриває.
• Чому це варто купити? Виділяємо головні переваги компанії, додаємо соціальний доказ та відповідаємо на поширені запитання.
• Що тут можна придбати? Забезпечуємо достатню кількість точок входу та шляхи до покупки.

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

Список товарів: спрощуємо вибір і скорочуємо шлях користувача.‍

Проблема: недостатня інформативність та зручність плиток товарів

‍На етапі перегляду каталогу користувачі, особливо нові, не могли швидко знайти відповіді на ключові питання: «Що це за товар?», «Чи легальний він?», «Як його використовувати?» або «З якими проблемами допоможе?». Це змушувало їх залишати сторінку або переходити на інші розділи сайту. До того ж відсутність кнопки «Купити» на прев’ю не давала можливості швидко додати товар у кошик, що створювало зайві кроки в процесі покупки.

Рішення: ‍

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

Проблема: завеликі фото товарів у мобільній версії‍

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

Рішення:

‍Оптимізувати розмір зображень у мобільній версії, щоб користувачі бачили ключову інформацію про товар на одному екрані. 

У результаті редизайну показник виходів зі сторінки списку товарів зменшився на 8%, а тривалість сесії на сторінці списку товарів збільшилась на 32%.

Дизайн сторінки списку товарів: на що звернути увагу?

Список товарів — це вітрина, де користувач вивчає асортимент вашого інтернет-магазину та шукає потрібний йому товар. Якщо інформація неочевидна, а вибір здається складним, користувач покине сайт або витратить забагато часу на пошуки.

Щоб уникнути цього, важливо:

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

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

Сторінка товару: інформативність, зручність, функціональність

‍Проблема: недостатньо інформації для прийняття рішення

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

Рішення: Реорганізувати структуру сторінки та додати:

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

‍Як результат кількість виходів зі сторінки товару зменшилася на 45%. 

Дизайн сторінки товару: на що звернути увагу?

Сторінка товару — це місце, де користувач ухвалює остаточне рішення про покупку. Якщо тут бракує ключової інформації, користувач піде шукати її деінде, а в гіршому випадку у вашого конкурента.Щоб не втратити користувача на цьому етапі, на сторінці товару важливо:

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

Оформлення замовлення: спрощуємо та скорочуємо

‍Проблема: заплутаний та складний процес замовлення

Близько 50% користувачів залишали сторінку оформлення замовлення через незрозумілу структуру форми, складність полів для різних типів доставки та плутанину з назвою сторінки («Кошик» замість «Оформлення замовлення»). Крім того, кнопка «Оплатити замовлення» при виборі способу оплати при доставці збивала користувачів з пантелику.

Рішення: Спростити структуру форми, зробити її компактнішою (2/3 екрану), адаптувати поля до різних типів доставки, а назву сторінки змінити на «Оформлення замовлення». Крім того, кнопка «Оформити замовлення» інформує користувача про підтвердження замовлення, попри те, який спосіб оплати обрано.

Дизайн сторінки чекауту: що слід врахувати?

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

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

Зміни — це вікно можливостей: результати редизайну сайту 100CBD

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

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

• Кількість користувачів зросла у 6 разів;
• Показник відмов знизився на 17%;
• Тривалість сесій мобільних користувачів зросла на 32%;
• Виходи зі сторінок товарів скоротились на 45%;
• Сесії зі сторінок товарів стали довшими на 198%.

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

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