Бізнес, Маркетинг, Партнерська новина

Як оновлювали дизайн інтернет-магазину F.ua (екс-Fotos)

Жовтень 17, 2019

У своїй статті Олександр Сергєєв, CEO Sense Production , розповідає про те, як його компанія займалася редизайном сайту магазину техніки F.ua .

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

Що говорять і роблять клієнти F.ua?

Спочатку ми вирішили з’ясувати, який зворотний зв’язок дають клієнти F.ua. Що у них болить і на що вони скаржаться. Старт взяли із дзвінків операторам в колл-центрі, переглянули велику кількість відгуків на Facebook, повідомлень в Direct і месенджерах.

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

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

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

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

Нам знадобилося близько 30 000 сесій (записів поведінки людей), щоб побачити яскраво виражені закономірності. Місця, де ми точно знайшли помилки і причини їх виникнення.

Як оновлювали дизайн інтернет-магазину F.ua (екс-Fotos) - partners, online-marketing, business

Приблизно так виглядають записи сесій поведінки людей. Тут ми дивимося, як люди вибирають 42 “телевізор або вирішують закрити вкладку і продовжувати дивитися Лігу чемпіонів з 11” монітора.)

Після вивчення такого великого масиву даних виникла маса припущень і гіпотез. Що далі?

Sense Storm

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

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

У випадку з F.ua ми генерували ідеї з однією метою: спростити життя покупцеві в інтернеті. А після, з усією своєю підозрілістю відібрали кращі рішення на нашу думку. Далі справа залишалася за малим – реалізувати їх.

Як оновлювали дизайн інтернет-магазину F.ua (екс-Fotos) - partners, online-marketing, business

Так виглядає дошка з вибраними ідеями.

Зміна дизайну всього двох сторінок

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

І хоча може здатися, що дві сторінки зробити – це не така вже й складне завдання, на реалізацію інтерфейсу з урахуванням всіх вимог у нас пішло близько місяця, а на програмну реалізацію – близько двох.
Як оновлювали дизайн інтернет-магазину F.ua (екс-Fotos) - partners, online-marketing, business

Нам довелося продумати близько 30 карток товару для різних категорій і це – тільки на момент готовності до тесту. 30, Карл!

Як оновлювали дизайн інтернет-магазину F.ua (екс-Fotos) - partners, online-marketing, business

Ми опрацювали всі стани сторінки товару, а їх на F.ua, повірте, ой як не мало. Для деяких карток зробили по кілька варіантів відображення, щоб після А/Б тесту перевірити, яка буде краще.

Як оновлювали дизайн інтернет-магазину F.ua (екс-Fotos) - partners, online-marketing, business

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

Перемикаємо рубильник

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

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

Перші результати

У перші кілька днів ми включили лише 10% трафіку на новий дизайн. Відразу ж з колл-центру впала пачка питань від клієнтів по виниклих Багам, які ми оперативно виправили. Проте, з урахуванням цих багів конверсія на сайті зросла, а показник відмови впав.

Як оновлювали дизайн інтернет-магазину F.ua (екс-Fotos) - partners, online-marketing, business

Ми стали сміливішими і після декількох днів спостережень врубили ще 25% трафіку. В результаті показник відмов був стабільно нижче, а конверсія – вище.

Як оновлювали дизайн інтернет-магазину F.ua (екс-Fotos) - partners, online-marketing, business

Як оновлювали дизайн інтернет-магазину F.ua (екс-Fotos) - partners, online-marketing, business

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

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

А ще зворотні дзвінки?

Також ми звернули увагу, що на сайті збільшилася кількість заявок на зворотний дзвінок, відразу після запуску нового дизайну. Збільшення було близько 10%, що теж було приємно.

Facepalm

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

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

Ми природно все перевірили ще раз, навіть припустили, що, може, вони сайт F.ua переплутали з якимось іншим. Реєструвалися, перереєструвалися, відновлювали і все працювало, як в тому анекдоті про програмістів «а у мене все працює», а у клієнта немає.

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

Кому конкретно ми зробили особливо добре

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

Висновок

«Зробіть, як в Амазону», – так не працює. Не можна одразу змінити все. Чарівної таблетки немає, є тільки кропітка робота, увага до деталей і здоровий глузд. Ми рухалися своїм шляхом, були уважні до покупця і у нас щось вийшло. Зараз ми готуємо ще «щось» для F.ua і трохи пізніше я обов’язково поділюся новинами.

 

Автор: Александр Сергеев, CEO Sense Production, джерело – AIN.UA

Ми у соцмережах:

Слідкуйте за UAspectr у Facebook або ж читайте усе найцікавіше у нашому каналі в Telegram