WOG

Дизайн Frontend Backend QA
WOG
WOG - Всюди, де люди
WOG - перша національна мережа автозаправних комплексів. Замовник прийшов до нас за редизайном головної сторінки та оновленням дизайну, щоб привести його до нового фірмового стилю, розробленим агентством Fedoriv.

Ми це зробили

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

Створили концепт головної сторінки, на якій кожен блок був обґрунтований цифрами. Показали замовнику, і робота пішла далі.

Зробили набагато більше

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

Але спочатку ми створили принципи, згідно з якими продумували структуру, спроєктувати сторінки та написали тексти.

Люди, а не водії. Місця для людей, а не АЗК.

Головне - люди, а потім їх авто. Ви не побачите на сайті розділу "Водіям", не буде згадок АЗК (хоча подекуди без них ніяк). На головній сторінці та на сторінці сервісу спочатку можливості для вас, а вже потім для авто. Це закладено в меню, і безліч деталей, хоча б в кількості АЗК на карті.

Навіть на сторінці "Про компанії", де інші говорять про свою історію і корпоративні цінності, у нас на першому місці - людина. "Будуємо WOG для тебе", і говоримо про майбутнє, плани та мрії, а не про минуле.

App First

Практично всі можливості для людей, які є на сайті, є в додатку. Воно зручніше, ближче, більш функціональне. А ще в додатку немає конкурентів за запитами в Google, коли шукають найближчу АЗК, або ціни на паливо.

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

Більше залучення

Придумали та продумали, як мотивувати користувача дивитися більше інформації про наші послуги. В кінці кожної сторінки людина побачить великий банер з інформацією, найбільш пов'язаною з поточним. Наприклад, на сторінці "Паливо" (заправка) ми пропонуємо "Кафе" (їжа).

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

Час діяти

На всіх сторінках є місце дії. Прочитали про "Кафе", завантажте додаток і замовте їжу, або подивіться, куди їхати. Дивіться акцію - відразу беріть участь.

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

Простота і доступність

Скролл і тап, самі зрозумілі та доступні дії. Ні - каруселі. По можливості без поп-апів. Великий шрифт. Без лоадерів завантаження і довгих очікувань.

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

Висновки:

  1. Сайт WOG відповідає новому стилю, він говорить і виглядає по новому.
  2. Кожна сторінка сайту підштовхує користувача до дії, і головне на сайті - додаток.
  3. Не бійтеся переробляти, якщо можна краще.

Технології

Backend

Symfony 4 / RabbitMQ / Redis / MySQL / Lua / nginx / Docker
Відгуки
  Подивитись відео
Head of Digital WOG
Євген Чорний

"WOG" - перша національна мережа автозаправних комплексів. На ринку вже понад 20 років.

Ми отримали злагоджений процес. Отримали якісний продукт, з яким продовжуємо далі працювати й розвивати. Намагаємося інтегрувати нові ідеї.

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

5
5 з 5 - "Brander - той механізм, той гвинтик, якого нам не вистачало".
Далі
Ми чекаємо на ваш проект