Як редизайн інтерфейсу сайту може вплинути на користувацький досвід — UX/UI для Zavezu

Хто наш партнер

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

Цілі співпраці

Клієнт звернувся щодо редизайну сайту, поскаржившись, що платформа виглядає заплутаною й важкою для користувачів. Утім, визначити, конкретні елементи, які спричиняють складнощі, наш партнер не міг. Аби розібратись, з чого почати, ми застосували комплексний підхід до вивчення UX&UI на zavezu.ua.

На основі потреб клієнта ми запланували:

1. Покращити навігацію сайту. Переробити її на зрозумілу й зручну для користувачів — замовників, які шукають перевізників.
2. Вдосконалити користувацький досвід, щоби більше відвідувачів залишалися на zavezu.ua та завершували свої дії (наприклад, знаходили перевізника або пропонували послуги).
3. Оптимізувати сторінки для пошуку основних функцій. Покращити функціональність сторінок, щоб користувачі могли швидше знаходити перевізників або потрібні послуги.
4. Підвищити коефіцієнт конверсії. Збільшити кількість користувачів, які успішно бронюють перевізника або пропонують свої послуги.

Дії команди

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

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

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

Кожна з аудиторій вимагала унікального підходу до UX/UI.

Аналіз користувацького досвіду й конкурентів

1. Вивчили поведінку користувачів на ресурсі за допомогою інструменту Microsoft Clarity. Сервіс надає теплові мапи й записи сесій відвідування сайту. Їхній аналіз дає зрозуміти, як користувачі взаємодіють із zavezu.ua, які елементи на сторінках (кнопки, картинки, навігація) привертають найбільшу увагу та де виникають проблеми з навігацією.

2. Щоби краще зрозуміти стандарти й очікування ринку, ми проаналізували конкурентів у ніші. 

3. Дані з Google Analytics 4 допомогли нам виявити конкретні проблеми, такі як високий показник відмов на певних сторінках і низький час перебування користувачів на сайті. Це дало змогу конкретизувати проблемні зони й визначити, на яких сторінках необхідно зосередити увагу.

Некоректна навігація та інтерфейс головної сторінки

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

Основні виклики полягали в тому, що користувачі не могли знайти потрібну інформацію, кнопкою «Знайти перевізника» користувалися лише ~1,73%.

Головною Call-to-Action на сайті «Показати номер перевізника» користувалися лише 2,84%.

Навігація й візуальна структура спричиняли плутанину

Згідно з даними Google Analytics 4 за один місяць, це сприяло високому рівню відмов ~55% і коефіцієнту User Key Event Rate ~10,9% (коефіцієнт здійснення покупки або створення замовлень).

Некоректне використання забарвлення й неструктурованість 

Мова про невідповідність кольорів і брак чіткої ієрархії елементів, які призводили до хаотичності.

Подивіться на основні кнопки на головній сторінці сайту.

Вони виконують різні дії, але не мають пріоритету. Це некоректно.

Відсутність на головній основного функціоналу — каталогу з перевізниками

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

Це все впливало на макроконверсію — створення замовлення і пошук перевізників.

Для показу номера телефону на сторінці «Каталог», користувачу потрібно було відкривати номер у два кліки, і, згідно з даними Google Analytics за червень 2024, номер переглядали лише 2,84%.

Рішення щодо редизайну

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

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

3. Запровадили додаткову монетизацію, погодивши з партнером — категорію «Картки Топ перевізників» у каталозі. Аби потрапити в топ оголошень, перевізники доплачуватимуть сайту. 

Спростили процес створення замовлення

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

Процес створення замовлення був занадто складним та довгим, це знижувало рівень конверсії. Згідно з даними аналітики форму на замовлення заповнювати до кінця тільки 4,7% тих, хто починав.

1. Ми зменшили кількість інформації на головній сторінці, зробили каталог перевізників основним функціоналом.

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

3. Виправили функціонал фільтрів — працював лише один обраний користувачем. Наразі ж можна обрати різні фільтри і відфільтрувати сторінку під свої потреби.

4. Оптимізували форму заявки, скоротивши кількість полів і спростивши процес подачі заявки.

Результати та бізнес-інсайти

Є конкретні перформанс-інструменти й показники, які дозволяють зрозуміти:

• що потрібно оптимізувати в дизайні (про це розповіли вище);
• чи дадуть запроваджені дії результат (про це далі).

Використання мікроконверсій

У Google Analytics ми налаштували мікроконверсії, які допомогли відстежувати проміжні дії користувачів, такі як перегляди важливих сторінок, натискання на кнопки «Замовити» й інші ключові взаємодії. Це дало змогу проаналізувати, наскільки добре налаштовані кроки до основної конверсії та де користувачі можуть зупинятися або натрапляти на труднощі.

Покращення швидкості завантаження

Ми також використовували звіти про швидкість сторінок з Google Analytics і Google PageSpeed Insights. Це корисно для оптимізації часу завантаження сторінок на мобільних пристроях, що позитивно вплинуло на утримання користувачів й знизило відсоток відмов.

Результати покращень UX(користувацького досвіду) впливають на бізнес-цілі, такі як підвищення коефіцієнта конверсії та збільшення доходу.

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

Відгуки про співпрацю

Юлія Турчин, засновниця zavezu.ua

Данило Мінін, Head of Usability Department в Netpeak Ukraine