Лайфхаки

Ксенія Савчук

Кейс “Антошка”: як редизайн інтернет-магазину привів до зростання коефіцієнта конверсії на 36%

13:17, 15/10/2020

Мережа дитячих магазинів “Антошка” з 2011 року до 2018 року займалася змінами внутрішніх процесів, підвищенням ефективності магазинів, зміною логотипу, створенням нового формату. Перепрошивка торкнулася й інтернет-магазину. Його почали міняти у 2014 році. В результаті редизайну коефіцієнт конверсії інтернет-магазина виріс на 36%.

Дмитро Куруза, виконавчий директор компанії з проектування і дизайну інтерфейсів “Турум-бурум”, розповів про кейс “Антошка” в колонці вийшла у виданні ain.ua. Наводимо його в повному обсязі.

Крім внутрішніх процесів змінювалися запити користувачів. З 2014 року на сайти частіше стали заходити з мобільних пристроїв – за останні шість років цей показник зріс на 400%.

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

Зростала і кількість покупок здійснених в інтернеті. Навантаження на сайти росла при низькій його завантаженні, що не зовсім подобалося покупцям. Крім швидкості було важливо і дозвіл сторінок. Був потрібен перехід з ширини робочої області в 960 px на широкоформатний в 1280 px.

Що змінилося

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

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

  • Картка товару;
  • Кошик;
  • Чекаут.

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

Аналіз використання старої картки товару показав кілька проблем.

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

Картка товару в колишньому дизайні

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

Погано структурована інформація про оплату та доставку.

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

  • Світлина 
  • Блок прийняття рішення: ціна, притягає основна увага кнопка купити, і другорядні заклики – видрукувати картку товару, поділитися товаром через email. 
  • Службова інформація про доставку та оплату. 

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

Пропрацювали близько 10 видів карток товару в залежності від групи товарів, так як для продажу взуття та іграшок важливі різні акценти.  

 Додали інструмент, який дозволяє відстежити наявність обраного товару в офлайн магазинах. 

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

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

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

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

Результат змін сторінки картки товару. При порівнянні даних аналітики за 2 місяці до редизайну і через два місяці після виділили наступне:

  • Кількість користувачів, які оформили замовлення після перегляду картки товару в desktop, зросла на 45%, в mobile – на 47%.
  • Мікроконверсія з картки товару в корзину залишилася без змін, що є гарним показникам, якщо брати до уваги, що за період вимірювань трафік збільшився на 34% і 52%, в mobile і desktop відповідно. 

Кошик

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

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

Рішення.  Реалізували кошик у двох видах: як окрему сторінку і як поп-ап.

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

Додали вкладку “Вибране” та “Ви переглядали”, звідки користувач одним кліком може додати товар в корзину. Використання таких інструментів cross-sale дозволяє нагадати користувачеві, ніж він цікавився раніше і збільшити середній чек інтернет-магазину. 

Реалізували можливість поділитися кошиком. Наприклад, молода мама, перебуваючи вдома з дитиною, може наповнити кошик потрібними товарами, поділитися посиланням з батьком, а він – оформити замовлення, оплатити та забрати по дорозі з роботи.

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

Результати змін сторінки кошика.

Після порівняння даних аналітики за 2 місяці до редизайну і через два місяці після ми побачили, що конверсія з кошика в чекаут в mobile зросла на 31%, в desktop – на 29%. 

Чекаут

За даними аналітиків 53% користувачів не завершували оформлення замовлення в інтернет-магазині.

Основні проблеми:

  • Громіздка довга форма з великою кількістю полів для заповнення, що відштовхувало, лякало користувача рутинністю.
  • Кнопка завершення цільового дії перебувала в самому низу сторінки, тому користувач міг її відразу не помітити.
  • Через збільшення з роками варіантів доставки та оплати, подача інформації в цьому блоці стала некоректною
  • Щоб зрозуміти які варіанти доставки та оплати доступні, користувачеві необхідно було здійснювати додаткові кроки, відкриваючи кожне підменю. Була відсутня інформація про режим роботи магазинів і наявності товарів в них.
  •  У шапці на сторінці оформлення замовлення знаходилися посилання на адреси магазинів, умови доставки та оплати, питання і відповіді, які перекидали користувача на інші сторінки, віддаляючи його від завершення цільового дії.
  • Були відсутні підказки і автозаповнення в формах.

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

Рішення.  Структурували інформацію в формі замовлення, розбили її на смислові блоки, шляхом візуальних акцентів. Реалізували прилипає блок з основними параметрами замовлення. 

Мінімізували кроки при переході до оформлення замовлення, заклавши не обов’язково перехід в кошик.

Передбачили можливість оформлення замовлення без авторизації. 

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

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

Результат. В mobile відсоток користувачів, які оформили замовлення, виріс на 35%, якщо порівнювати період 2 місяці до і після редизайну. У desktop кількість користувачів, які оформили замовлення, зросла на 43%. 

додатковий функціонал

  • В особистому кабінеті інтернет-магазину Антошка додали вкладку “Моя сім’я”, куди користувач може додати дані про своїх дітей і отримувати більш релевантну, персональну видачу товарів.  

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

  • На стартовій сторінці в шапці розмістили кнопку “Відстежити замовлення”, щоб покупець міг швидко дізнатися всю інформацію про свою покупку, не витрачаючи час на вхід в особистий кабінет і інші дії.
  • Дизайн особистого кабінету дитячого інтернет-магазину Антошка дозволяє з переліку “Вибране” створювати списки бажань. Це частина особистого простору користувача: він може оформити свої побажання в окремий список і піти з сайту, всі товари при цьому збережуться і при авторизації будуть доступні.

Так можна підготувати список подарунків на день народження дитини і поділитися ним з гостями або порадитися з іншим батьком з приводу покупки.

  • Компанія синхронізувала офлайн і онлайн роботу знижкових і накопичувальних програм, щоб вести загальну базу. Тому в особистому кабінеті ми передбачили окрему вкладку “Моя знижка”, де користувач бачить детальну інформацію про всі можливі вигоди. 

висновок

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