Як ми доробляли картку товару в магазині Технікс-Маркет

Постановка завдання і виявлення проблем

Від клієнта поступило замовлення: підвищити конверсію картки товару з 0,5% до 5%.

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

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

Чому саме так? На нашу думку, саме кінцеві сторінки з товарами вимагали доопрацювання, оскільки їх основна мета — продавати товари, а картки товару, що слабо пропрацювали, мають низьку конверсію.

Итак, дивимося типову картку товару, які були до доопрацювання:

Так виглядала картка товару до «переробки»

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

1. На першому екрані користувача майже немає інформації про товар

Перший екран користувача

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

2. Назва товару була не в тегу h1 і виглядала несерйозно

Невірний висновок назви товару

Візуально немає акценту на назві товару. Нікуди прив'язувати погляд відвідувача.

3. У товарів є фотографії, причому в хорошій якості

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

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

4. Інформація про товар

По-умовчанню виводився опис товару. Інша інформація ховалася в табки. От як це виглядало:

Висновок інформації про товар

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

5. Бічне меню

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

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

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

6. Додати на сайт траста

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

7. Додати елементи навігації

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

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

Процес роботи

Що б не порушувати гармонію існуючої картки товару, програміст зробив параметр, при додаванні якого до будь-якої сторінки, можна було бачити результат нашої роботи. Це допомогло відловити Глюка такого плану :

  • кількість фото — якщо їх більше 4х у товару, все ламається.
  • якщо у товару немає характеристик — все ламається.
  • Глюк з виведенням ціни і кнопки «замовити» за відсутності товару на складі.

і ще сотні дрібних проблем.

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

Воістину тестування важливе!

Усі ескізи нового виведення компонентів малювалися від руки на А4. Чому  не використали спеціальне ПЗ? Від руки було швидше. )) І якось наочніше. Принаймні для нас. Правда до програміста наші ідеї доходили вже у відсканованому виді, тому про наочність наших матеріалів із його точки зору ми тільки здогадувалися.

Що в результаті?

Перед переглядом картки товару варто звернути увагу, як ми розв'язали проблему "що заважає" вертикального меню.

Нове горизонтальне меню

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

Отже, проблему меню розв'язали, повернемося до картки товару.

Ось що у нас вийшло:


Зовнішній вигляд оновленої картки товару

Давайте розглянемо детальніше.

Перший екран відвідувача

Перший екран користувача

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

  • Назва
  • Картинка товара
  • Вартість
  • Наявність і кликнути на «замовити»

Назва товару тепер є в тегу H1 і не втрачається на сторінці. Так само добре «впадає у вічі» вартість товару і кнопка «замовити».

Блок з фото

Блок оформили компактно, що дозволило на невеликій площі вивести основне фото + мини-галерейку.

Компонування зовнішнього вигляду блоку з фото

По кліку на картинку у нас завантажується «превью» у окремому вікні з можливістю перегортати фото по усій галереї.

Характеристики

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


Виведення блоку специфікацій товару

 Центральний блок

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

Центральний блок на картці товару

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

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

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

Інформація про вартість доставки недорогих товарів

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

Висновок інформації про доставку «на сьогодні»

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

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

«Блок траста»

Ще один блок для посилення довіри клієнта до магазину ми розробили і розмістили нижче основної інформації по товару.

Виведення трастових блоків магазину

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

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

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

Підтверджуємо замовлення за 60 хвилин — чітко розмежовуємо час відгуку магазину. Клієнт повинен розуміти, що залишивши заявку і оформивши кошик, він «залізно» отримає відповідь максимум за годину. Це політика магазину і стандарт обслуговування.

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

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

Приймаємо Visa/mastercard — можливість оплачувати товари картою. Так, наша доставка їздить з терміналами оплати, тому тут повна свобода вибору у клієнта.

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

Блок «Описи».

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

Блок «Витратні матеріали».

Цей блок залишили без змін. Він був корисний на минулій версії картки товару, буде корисний і тут.

Блок — «Ви переглядаєте»

Виведення блоку «Ви переглядаєте»

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

Блок «Інші товари».

Перелинковка з іншими товарами цієї категорії

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

Підсумки

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

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