Статті
Як відбувався редизайн сайту Zakaz.ua
Нові функції, ризики, ріст конверсії та шкода від перфекціонізму
10 лютого, 2021

Минулого року український сервіс доставки продуктів Zakaz.ua представив оновлений інтерфейс сайту. Зміни торкнулися і візуального стилю, і UI/UX сайту. Про процес вдосконалення сайту Zakaz.ua та перепони, з якими на шляху стикнулися розробники, розповіли CTO компанії Олексій Панасюк та менеджер продукту Дмитро Валовий.

Чому вирішили змінюватися

«Zakaz.ua працює на ринку вже понад 10 років. І у 2017 році вже було зрозуміло, що сайт потребує значних доопрацювань, — розповідає Олексій Панасюк. — По суті, Zakaz.ua є маркетплейсом, тобто майданчиком для продажу продуктів наших партнерів – торговельних мереж. Клієнт заходить на сайт, обирає потрібне місто та супермаркет, тисне кнопку і потрапляє на вітрину магазину».

Так сталось, що у Zakaz.ua працювало одразу дві версії сайту. До 2016 у роботі була найперша версія, написана на шаблонах django — внесення змін у цей legacy-code займало надто багато часу. Потім випустили другу версію, заклали в неї більше адаптивності, проте дизайн та функціональність потрібно було допрацьовувати. Розроблена стратегія розвитку та новий раунд інвестицій дозволили активізуватися та взятися за редизайн сайту.

Завдання редизайну

Третя версія сайту мала прискорити розробку продукту та збільшити його конверсію. Цього разу до питання вирішили підійти комплексно і якісно пропрацювати усі нюанси UI та UX-дизайну сайту. Через те, що в компанії працювало лише кілька програмістів, дизайн замовили на аутсорсі.

Щось пішло не так

«Спершу ми звернулись до однієї з продуктових компаній на ринку. Але через те, що недостатньо заглибили дизайнерів у наші бізнес-процеси, отримали e-commerce макети, які були красиві, але не вкладалися на 100% у нашу модель. — розповів CTO компанії. — Після цього вирішили займатися доопрацюванням проєкту самостійно».

Етап досліджень

За словами менеджера продукту Дмитра Валового, команда нічого нового не придумувала, а використовували усталені патерни e-commerce, які накладали на процеси компанії. Надихалися  Baymard, а також орієнтувались на зауваження клієнтів та співробітників, які вже накопичились за час роботи сервісу. «Релізили бету, дивились на метрики та збирали відгуки», — каже Дмитро.

Етапи редизайну і шкода від перфекціонізму

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

«Працювали за класичним проєктним підходом, — розповідає Олексій Панасюк, — коли визначаються дрібні задачі, з яких потім збирається одне ціле. Після кропіткої роботи отримали по-справжньому user-friendly інтерфейс. Здавалося б усе чудово і треба запускатись, але перфекціонізм зіграв з нами поганий жарт. Частина команди Zakaz.ua вважала, що в жодному разі не можна показувати клієнту неідеальний продукт. А недоліки ми звісно знаходили постійно — то тут баг виліз, то там підправити треба було».

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

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

«Ми могли бачити недоліки в одному, а наші користувачі — геть в іншому. То навіщо втрачати час?»

 

Slider image
Slider image
Slider image

Айдентику Zakaz.ua розробляли в Spiilka Design Buro, фото Spiilka.com

Ключові зміни

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

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

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

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

Оптимізували пошук: виводяться результати вже від 3-х символів у полі пошуку за товарами та категоріями, покращили алгоритм видачі.

«Кошик тепер можна зібрати з підказок», — зазначає Дмитро.

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

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

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

Результат змін: замість видалення та довгих пошуків у каталозі альтернативи користувачі  у 2 кліки замінюють близько 12 000 товарів щомісяця.

Процес оформлення замовлення теж змінився – тепер він відбувається поетапно. Користувач покроково вказує усю необхідну інформацію про себе, оплату, доставку і т.д. «Тут важливо було вибудувати правильну послідовність, адже від типу доставки залежать її вартість та спосіб оплати», — зазначив менеджер продукту.

Процес перезапуску сайту

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

Для першого експерименту обрали один з супермаркетів — ним погодився стати МегаМаркет. На першому етапі працювала альфа-версія для внутрішнього використання. Другий етап розпочався через місяць, коли команда розробників увімкнула бета-версію і запропонували користувачам основного сайту переходити на неї і тестувати. При цьому повідомлення бачили лише неавторизовані у системі користувачі. Конверсія була дуже низькою — близько 2% й росла дуже повільно.

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

«І ось тут був найризикованіший момент: оскільки у новій версії була й так невисока конверсія, вона просіла на 1,5%, а ось на старій версії конверсія виросла майже утричі. Що зрозуміло – клієнти приходили зробити замовлення і не хотіли розбиратися у тому, як функціонує новий сайт».

«Тоді ми прийняли вольове рішення вимкнути стару версію, — каже Дмитро Валовий. Вже за три місяці показники нової версії стали рости: bounce rate знизився з 50,29% до 23,50%. Візити на сайт з пошуком збільшились на 34%, а конверсія виросла на 24%. І ми також отримали збільшення середнього чека на 6,3% у порівнянні з 2019-им».

У лютому 2020 року процес запустився на повну — нова вітрина з’явилась у NOVUS, а у травні — у Ашан та METRO. Тепер усі нові партнери Zakaz.ua автоматично отримували оновлений дизайн вітрини.

Негативні відгуки

Звісно, не обійшлося без негативних відгуків про роботу сайту.

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

«Роботу над сайтом ми продовжуємо: висуваємо гіпотези щодо того, які покращення потрібно внести, тестуємо рішення та швидко запускаємо у роботу, аналізуючи результати. Найближчим часом у користувачів з’явиться можливість редагування замовлення. Вирішили додати цю функцію, оскільки близько 20% звернень у контакт-центру – це прохання додати або замінити якийсь товар у кошику. Це зекономить час і працівникам Zakaz.ua, і клієнтам».

 

avatar
Анастасія Кучнева
Колонка

У нас є ще дещо для вас