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 - тот механизм, тот винтик, которого нам не хватало".
Вперёд
Сделаем проект вместе