Сайт оператора платной дороги

Немного истории

Компания-оператор платной автодороги М1-«Беларусь» (это участок трассы от пересечения с 33-м км трассы М1 до Молодогвардейской развязки с МКАД) — наш давний клиент. Мы сотрудничаем и поддерживаем сайт m-road.ru с 2014 года.

С этого момента сайт был переведен на платформу 1С-Битрикс (начало 2015 года). Прежняя платформа была не удобна для работы с контентом и имела ряд ограничений по масштабированию. Это был Concrete 5 CMS.

В начале 2016 года было принято решение о полном визуальном изменении сайта.

Предпосылки для обновления сайта

Основными предпосылками для этого стали:

Сложная навигация по разделам ресурса
Огромное количество ненужной информации для пользователя
Устаревший визуальный стиль
Сложность донесения важной информации для пользователя (отсутствие необходимых инструментов для этого)

Начало

Прежде всего – это анализ действий аудитории ресурса на его прежней версии (Вебвизор от Яндекс).

Как мы поняли, наличие запутанной структуры разделов не позволяло пользователям найти даже самую явную информацию.

Например, крайне сложно было узнать стоимость транспондера
(это коробочка, которая крепится на лобовое стекло вашего автомобиля, с помощью которой вы сможете проезжать пункты оплаты проезда без остановки).

Далее...

...в результате длительных переговоров с заказчиком, было принято решение применять обновленный фирменный стиль компании на новом разрабатываемом ресурсе. Это касалось и цветов, и шрифтов.

Проектирование

Первый шаг – проектирование. На этом проекте мы впервые применили интерактивные прототипы.

Делали их в Axure 7.

Сразу согласовали новую структуру - нами было предложено упростить структуру разделов сайта, разделив также контент для 2 целевых аудиторий, частных лиц и корпоративных клиентов.

Выделили то, что важно для посетителя

Выделили самые важные для пользователя материалы и вывели их на первый экран ресурса: доступ к наиболее необходимой для пользователя информации он (пользователь) теперь сможет получить сразу, не тратя время на поиски.

Интерактивная карта дороги

Проработали схему взаимодействия пользователя с новой интерактивной картой дороги: упростили работу настолько, что для получения маршрута проезда и его стоимости потребовалось всего пару кликов.

Читаемый контент

Уменьшили объем контента, убрав «официоз» из текста: доработали текст до простого и понятного.

Новые функции

Новый формат интерактивной карты автодороги, позволяющей в несколько кликов получить маршрут поездки и рассчитать стоимость поездки.

Набор полезных виджетов (время, пробки и погода на дороге) и новая «фишка» проекта – непрочитанные важные сообщения с сайта.

Это позволяет пользователю не пропустить важное оповещение, например, изменение стоимости проезда или ремонтных работах на дороге.

Подробная информация о проезде по дороге, системе оплаты и вариантах пополнения баланса, об устройстве и преимуществах работы транспондера – вся полезная информация собрана в «лонгридах», доступ к которым осуществляется с первой строки навигационного меню.

Что в итоге

Несомненно, новый ресурс – это новый виток развития бизнеса заказчика.

Насколько удобным он получился для пользователя – покажет время.

Очень надеемся на это.

Перейти на сайт

... В итоге мы получили современный web-источник необходимой для пользователя нашей дороги информации с большим набором сервисов.

Такой результат достигнут благодаря активному участию разработчика с глубоким проникновением в тематику деятельности компании, быстрому реагированию на все запросы и изменения со стороны заказчика, профессионализму и, самое главное, большому желанию предоставить нашим пользователям достойный и удобный web-инструмент ...

Олег Алексеевич Л.

Зам. начальника отдела

5

предложенных концепций
визуального стиля
проекта

200

отрисованных макетов,
за время работы
над проектом

20

уникальных страниц ресурса,
а также их представление
для планшетов и смартфонов

68

макетов,
показывающих различные ситуации на этих макетах

50

подготовленных маршрутов
для интерактивной
карты дороги

10

уникальных
иконок

150

часов работы
front-end разработчика

220

часов работы
дизайнеров

Технологический стек

Серверная часть:

PHP

Веб-интерфейс:

HTML5/CSS3, jQuery

Вернуться в портфолио