Шереметьево Паркинг: сайт для официального паркинга аэропорта Шереметьево

Шереметьево Паркинг — дочерняя компания Международного аэропорта Шереметьево, его официальная парковка. Один из самых крупных паркингов в Европе: содержит более 12 000 парковочных мест.

Целевая аудитория Шереметьево Паркинг — водители авто, которые совершают авиаперелеты, а также сотрудники аэропорта, которые ежедневно приезжают на своих машинах на работу. Особенность аудитории: большая часть пользователей взаимодействует с сайтом Шереметьево Паркинг с телефона (обычно сидя в машине по дороге в аэропорт).

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

— на котором коллеги из Шереметьево Паркинг смогут самостоятельно добавлять и редактировать информацию;

— где будут отражены новые функции и личный кабинет;

— который будет выглядеть современно и будет удобен как на ПК, так и на мобильных устройствах.

Также после запуска сайта нам нужно было провести работы по его SEO-продвижению.

1. Создали сайт масштабируемым по функционалу, тем самым облегчили коллегам из Шереметьево Паркинг работу с ним. 

— С нуля переписали сайт на современном фреймворке Laravel в соответствии со всеми стандартами разработки;

— Добавили админ-панель, так что теперь клиент может самостоятельно вносить изменения на сайт;

— Покрыли тестами наш код и ключевой функционал сайта.

2. Добавили новый функционал.

— Проработали личный кабинет: теперь пользователь может самостоятельно контролировать свои бронирования;

— Добавили льготные программы и выбор дополнительных услуг;

— Проработали систему лояльности.

3. Обновили дизайн: сделали его современным, простым в восприятии, адаптировали под привычки и потребности пользователей. 

Особое внимание уделили мобильным устройствам — так как большинство пользователей бронируют и оплачивают парковки именно с телефона. 

4. Сделали процесс бронирования парковочных мест простым и понятным пользователю. 

— Добавили подробную информацию о парковках;

— Проработали детальную карту парковочной территории.

5. Запустили работы по SEO-продвижению, благодаря чему уже на третий месяц продвижения органический трафик на сайт вырос на 70% относительно того же периода прошлого года. 

Чтобы лучше познакомиться с проектом, первую нашу встречу мы провели в аэропорту Шереметьево: изучили тонкости работы аэропорта, посетили все терминалы и каждый паркинг Шереметьево — узнали, как работают выезд и въезд на парковках, особенности работы шлагбаумов, VIP-зон, мест для инвалидов и т.д.

Для погружения в бизнес клиента провели несколько личных встреч, на которых изучили и структурировали для себя бизнес-процессы компании. Благодаря этому начали говорить с заказчиком на одном языке, синхронизировались в видении будущего продукта и поняли, как отразить на сайте нужный функционал (на фото примеры наших записей по структуре сайта и личного кабинета, которые фиксировали на встречах).

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

В результате сформировали фич-лист будущего сайта и видение его структуры.

И собрали вайрфреймы будущего сайта. 

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

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

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

Поэтому дизайн нового сайта сделали современным и ненагруженным лишними акцентами. 

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

Для встречи по согласованию дизайн-концепта на совете директоров Шереметьево мы подготовили презентацию, чтобы нагляднее рассказать про проблемы текущего сайта и наши решения. Клиент одобрил дизайн, и мы приступили к следующему этапу.

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

Мы переписали весь проект на современный фреймворк Laravel, структурировали код, следуя всем стандартам разработки. Так что теперь сайт стал масштабируемым по функционалу, а поддержка текущих и добавление новых функций просты и понятны любому разработчику.

Кроме этого мы покрыли код и ключевой функционал тестами. 

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

Сайт разработали на React, что сделало его более быстрым, производительным и отзывчивым к действиям пользователей.

При разработке использовали технологию Progressive Web Application (PWA), она позволяет отображать часть информации пользователю в офлайн-режиме. Благодаря этому, например, пользователь может открывать свой парковочный билет на сайте даже без доступа к интернету. 

1. Личный кабинет 

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

2. Дополнительные услуги на сайте

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

3. Льготная программа 

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

Страница «Парковки» — один из самых посещаемых разделов сайта. По карточкам пользователь выбирает место, где оставить машину. Поэтому нам важно было сделать этот раздел максимально информативным.

Во-первых, снабдили нужной информацией карточки. Раньше, когда пользователь заходил на страницу «Парковки», ему приходилось открывать каждую карточку, чтобы узнать характеристики и выбрать подходящую. Причина — на карточках было мало информации. 

Исправили это. Например, добавили больше фото (раньше было одно, теперь их от 2 до 8 штук). Также добавили плашки с важными характеристиками: «Электро», «Оплата при выезде» и т.д. Благодаря этому теперь пользователь может проводить первичный отбор парковок быстрее, не переходя внутрь карточек.

Во-вторых, добавили больше информации внутрь всех страниц парковок. 

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

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

Раньше: 

— при уменьшении масштаба карты пользователю сложно понять, сколько парковок расположено в тех или иных районах (парковки были отмечены флажками — и из-за их наслоения друг на друга было сложно считывать информацию)

— информация о парковках прописана на карте мелким шрифтом;

— непонятны зоны вылета и прилета.

Сейчас: 

— при уменьшении масштаба можно легко понять количество парковок на территории — их число отмечено на карте цифрами; 

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

— при уменьшении масштаба можно легко найти зоны вылета и прилета — они отмечены на карте разными цветами.

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

Стартовали продвижение в ноябре 2023. За это время: 

1. внедрили необходимые доработки по техническому аудиту сайта;

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

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

4. без потерь трафика перенесли сайт с домена parkingsvo.ru на parking.svo.aero. Переезд сайта на новый домен часто болезненный процесс — запускается переиндексация сайта, трафик на сайт падает, из-за этого идет сокращение продаж. В нашем случае переход происходил под контролем SEO-специалиста, что помогло не только удержать текущие позиции, но и увеличить трафик на 70% относительно этого же периода прошлого года и полностью сохранить все позиции (и даже улучшить их).

Создали сайт, на котором пользователи могут быстро забронировать парковки Паркинга Шереметьево и отслеживать свои бронирования в личном кабинете. Сайт отвечает требованиям клиента и потребностям пользователей: удобен в использовании как с мобильных устройств, так и с ПК. На сайте много информации, подробная карта парковок и понятный пользовательский путь. 

— Обновили дизайн. Теперь это аккуратный сервис с простым и логичным визуалом: чтобы люди любых возрастов и в разных ситуациях могли быстро разобраться и забронировать места.

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

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

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

Успешно стартовали SEO-продвижение: повысили позиции в поисковой выдаче, что привело к росту органического трафика.

Результат в цифрах

1. Трафик на сайт вырос почти на 70% относительно того же периода прошлого года (январь 2023 / январь 2024). И на 16% относительно последнего месяца до SEO-продвижения.

2. После редизайна сайта средний показатель отказов упал с 17% до 2.46%.

3. Глубина просмотра возросла с 2,6 страниц до 4 страницы за сеанс.

Планы

Текущая версия сайта Шереметьево Паркинг еще не финальная, в ближайшее время мы планируем:

— активно развивать систему лояльности;

— запустить удобную систему работы с абонементами и денежными кошельками для сотрудников аэропорта; 

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