Ближайшая станция
Карта сети помогает перейти от знакомства с брендом к конкретному месту заправки.
Карта · География сетиHelios.
Сервисы по пути
Сайт сети АЗС, который помогает найти станцию, познакомиться с топливом и разобраться в возможностях смарт-карты.
Обсудить проект
- Клиент
- Helios
- Сфера
- Сеть АЗС
- Работа ABC
- Разработка под ключ
- Формат
- Корпоративный сайт
Задача проекта
Не просто сеть АЗС. Сервисы по пути
На сайт заходят с разными намерениями: найти станцию, узнать о топливе или разобраться в программе лояльности. Для каждого предусмотрен свой вход в структуру.
Мы связали знакомство с брендом с конкретными действиями посетителя. У информационных разделов и пользовательских сервисов — свои места в общей структуре.
ABC Design выполнила дизайн и разработку. В кейсе показываем визуальную систему и ключевые сценарии проекта.
Три задачи — три понятных маршрута
Начать со своей цели и перейти к нужному разделу.
Возможности карты
Отдельный раздел объясняет программу лояльности и использование смарт-карты.
Лояльность · Смарт-карта
Больше, чем топливо
Магазины и сервисы сети дополняют основной маршрут автомобилиста.
Магазины · СервисКонцепция и визуальный язык
Узнаваемость — в цвете. Удобство — в структуре
Жёлтые акценты Helios связывают интерфейс с реальными станциями. Крупные промоблоки отвечают за первое впечатление, а отдельные переходы к карте и смарт-карте помогают быстро перейти к делу.
Один визуальный язык
От знакомства
к следующему действию
Детали визуальной системы
Впечатление складывается из деталей
Для каждого приёма — своя роль в общей истории.
Цвет · Образ · КомпозицияПервое впечатление
Крупный визуальный акцент знакомит с характером бренда. Типографика и изображения удерживают главную мысль.
Структура · Акценты · ИерархияПоследовательный ритм
Информационные и эмоциональные блоки чередуются. Посетитель постепенно переходит от знакомства к нужной ему теме.
Изображения · Типографика · ЦветОбщий характер материалов
Фотографии, предметная графика и интерфейс собраны в согласованную систему. Детали поддерживают общую подачу сайта.
Структура и подача
От впечатления —
к содержанию
Жёлтые акценты Helios связывают интерфейс с реальными станциями. Крупные промоблоки отвечают за первое впечатление, а отдельные переходы к карте и смарт-карте помогают быстро перейти к делу.
Для сети АЗС география — часть продукта. Карта вынесена в самостоятельный сценарий: посетителю не приходится искать нужную станцию среди новостей и рекламных материалов.
Мобильная версия
Тот же характер.
Другой масштаб
Визуальная система продолжается на небольшом экране.
Контент выстраивается под вертикальную прокрутку. Изображения сохраняют пропорции, а заголовки и действия — своё место в иерархии.
Каждый экран продолжает общий визуальный язык проекта.
Сценарии сайта
Станция — конкретная точка на карте
Для сети АЗС география — часть продукта. Карта вынесена в самостоятельный сценарий: посетителю не приходится искать нужную станцию среди новостей и рекламных материалов.
Возможности смарт-карты раскрыты на отдельной странице. У программы есть собственная визуальная подача, но навигация и привычные элементы интерфейса остаются общими для сайта.
Интерфейс поддерживает конкретную задачу посетителя и сохраняет связь с общей структурой сайта.
Пользовательская задача
Найти нужное.
Изучить детали.
Продолжить действие.
От общего представления — к деталям
У каждого раздела — собственная роль в маршруте посетителя.
Знакомство
Станция — конкретная точка на карте
Для сети АЗС география — часть продукта. Карта вынесена в самостоятельный сценарий: посетителю не приходится искать нужную станцию среди новостей и рекламных материалов.
Подробности
Лояльность, в которой можно разобраться
Возможности смарт-карты раскрыты на отдельной странице. У программы есть собственная визуальная подача, но навигация и привычные элементы интерфейса остаются общими для сайта.
Продолжение маршрута
Понятный следующий шаг
Информация и навигация помогают продолжить знакомство с проектом без поиска среди несвязанных страниц.
Рассмотреть экраны подробнее
Дизайн в работе
Самостоятельные разделы.
Общий язык интерфейса
Разные задачи раскрыты на отдельных страницах. Общая навигация и согласованная подача связывают их в один сайт.
Связь между сценариями
Одна структура.
Разные точки входа
Эмоциональная презентация и подробные материалы выполняют разные задачи, сохраняя связь внутри общей структуры.
Структура сайта HeliosЗнакомство с брендомОбраз и ключевая информацияКонкретная задачаПодробности и следующий шаг
Итог работы
Бренд и повседневные задачи — на одном сайте
Сайт объединяет презентацию Helios с практической информацией для водителя: сетью станций, сервисами и программой лояльности. За яркой подачей остаётся понятная структура.
Визуальная система
Узнаваемость — в цвете. Удобство — в структуре
Жёлтые акценты Helios связывают интерфейс с реальными станциями. Крупные промоблоки отвечают за первое впечатление, а отдельные переходы к карте и смарт-карте помогают быстро перейти к делу.
Рабочие сценарии
Станция — конкретная точка на карте
Для сети АЗС география — часть продукта. Карта вынесена в самостоятельный сценарий: посетителю не приходится искать нужную станцию среди новостей и рекламных материалов.
Обсудим вашу задачу
Ваш следующий проект
Расскажите, что хотите изменить. Обсудим сайт и цифровые инструменты для вашей команды.
