Як збільшити конверсію e-commerce проєкту за допомогою RSR і ESR підходів: Кейс Denika

Цей кейс — класичний приклад розвитку e-commerce проєкту в сучасних реаліях. Різка зміна дизайну за RSR підходом і потім поступові доопрацювання за ESR дають змогу сайту швидко адаптуватися під потреби користувачів.

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

Про інтернет-магазин побутової техніки Denika

З 2009 року інтернет-магазин Denika.ua відомий на ринку України як експерт з продажу побутової техніки. На сайті представлено понад 30 000 товарів. При цьому інтернет-магазин збирає коло 300 000 відвідувань щомісяця.

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

Революційний редизайн інтернет-магазину побутової техніки (RSR підхід)

У 2018 році компанія звернулася по допомогу з редизайном інтернет-магазину.

За час роботи над новим дизайном інтернет-магазину Denika було використано RSR (Revolutonary Site Redesign) підхід, адже сайт не змінювали понад п'ять років, а наявний набір інструментів уже значно застарів і не справлявся з поточними завданнями бізнесу.

Тому нам належало:

• повністю оновити стилістику
• переглянути функціонал
• поліпшити юзабіліті сайту.

Тобто створити новий дизайн інтернет-магазину побутової техніки.  

Робота над стилістикою

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

Ми створили різні мерчі з оновленим лого: футболки, горнятка, календарі, а також візитівки, рекламні плакати та інше.

З огляду на бажання власників вийти за межі локального ринку та скласти конкуренцію провідним магазинам електроніки, ми обрали стриману синю кольорову гаму. Крім того, блакитний є фірмовим кольором, тому було вирішено дотримуватися цієї лінії. Така палітра допомогла відбудуватися від конкурентів і домогтися впізнаваності. Оскільки асоціації з ринком електроніки виникають такі: Rozetka, Comfy — зелений колір; Eldorado, Фокстрот — червоний; Citrus — помаранчевий.

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

Цей дрібний, але важливий нюанс дає змогу підтримувати сайт свіжим і стильним. А також позитивно впливає на залученість і лояльність до бренду.

Оригінальне меню з розставленими акцентами

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

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

Індивідуальні фільтри для кожної категорії

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

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

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

Гнучка система пошуку

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

Гнучка система пошуку полегшує і прискорює процес вибору покупки.

Додаткові точки входу

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

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

Функціонал порівняння товарів

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

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

Продумана картка товару

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

На перший екран, біля основного call-to-action "Купити", ми вивели можливість покупки в кредит. Таке рішення актуальне для інтернет-магазину побутової техніки, в якому представлені дорогі товари. Тут ми також вказали перевагу магазину — тривалу гарантію на товар і розташували інформацію про доставку.

Ми також впровадили інструмент "Разом дешевше" для збільшення середнього чека. Опція виводить список супутніх продуктів і аксесуарів. При купівлі запропонованого комплекту користувач отримує знижку.

Плитку з товаром ми зробили такою, що прилипає при скролі. Так товар завжди перебуває в полі зору користувача і його зручно порівнювати з аналогічними товарами в блоці "Схожі товари" внизу сторінки.

У результаті редизайну ми отримали новий, зручний інтернет-магазин побутової техніки:

Ми порівняли коефіцієнт транзакцій за період з вересня по листопад 2018 року, коли дизайн ще не був змінений, і аналогічний період 2019 року після релізу нового сайту. За даними аналітики, внаслідок зміни дизайну сайту коефіцієнт транзакцій збільшився на 17,76%.

Але компанія не зупинилася на досягнутому результаті і вже у 2019 році звернулася до нас по допомогу в подальшому розвитку інтерфейсу.

Робота над інтерфейсом за ESR підходом

Evolutionary Site Redesign (ESR) — підхід, який заснований на поетапному поліпшенні дизайну сайту для збільшення конверсії та підвищення ефективності інших метрик.  

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

Дмитро Кукурудза, СEO Турум-бурум

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

UX-аналіз проєкту після релізу зазвичай складається з двох напрямів:

• Проаналізувати, чи правильно були реалізовані всі UX/UI рішення, задумані нами;
• Проаналізувати, як користувачі взаємодіють із новим сайтом.

Під час аналізу юзабіліті ми вивчили дані аналітики, підключили теплові карти, вебвізори і карти скролу Hotjar.

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

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

1. Оптимізація віджета онлайн-консультанта

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

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

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

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

2. Усунення багів у навігації

Коли ми аналізували, чи правильно було впроваджено задуманий нами дизайн, ми знайшли кілька критичних багів.

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

3. Усунення багів у картці товару

Аналогічну помилку ми знайшли і в картці товару.

Посилання "Показати на карті" на сторінці картки товару відводило користувача зі сторінки товару на сторінку про розташування магазину.

4 Оптимізація відображення меню

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

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

5. Відображення другого рівня каталогу

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

Користувачі часто нагадували про цю проблему, тому що не могли швидко знайти потрібний товар.

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

6. Не збереження даних користувача в чекауті

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

Тобто якщо користувач під час оформлення замовлення захотів вийти зі сторінки і прочитати детальні умови доставки, то всі заповнені ним дані зникали.

Результати першої ітерації ESR підходу

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

Після виправлення замовником цих 6 багів ми провели замір даних аналітики за 2 тижні до впровадження і через 2 тижні після за однорідного трафіку.

Конверсія збільшилася на 8,1% після виправлення цих 6 дрібних деталей.

Але цей результат — лише наслідок першої ітерації та вирішення не найпріоритетніших завдань. Опрацювання найбільш вузьких місць воронки дасть набагато більший приріст у конверсії (Читайте про це кейс Shiny&diski).

Як розвивати свій сайт у 2020-2023 роках?

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

‍

Відгук про роботу над проектом

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

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

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

Компанія Турум-бурум справила на нас враження як висококласних професіоналів, у яких хочеться вчитися.

Я безумовно б порекомендувала компанію Турум-бурум для великих проєктів для вирішення питань щодо UX/UI.

‍Єлизавета Коросташова, CMO DENIKA.UA

‍

‍