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

Главное о кейсе

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

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

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

1. Made the process of reserving parking spaces simple and user-friendly:
— Added essential information about parking areas
— Included a detailed map of the parking territory

2. Expanded the website's functionality:
— Enhanced the personal account section – now users can independently manage their reservations
— Introduced discount programs and options for additional services
— Developed a loyalty system

3. Made the website scalable in terms of functionality and facilitated its operation for Sheremetyevo Parking:
— Completely rewrote the website using the modern Laravel framework, adhering to all development standards
— Implemented an admin panel, enabling clients to independently make changes to the website
— Covered our code and the website's key functionalities with tests

Как проект изменил жизнь пользователей

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

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

Добавили плашки с классификациями на обложки: «Электро», «Оплата при выезде», «Места для инвалидов» и т.д. Также нарисовали простую схему, которая показывает сколько идти до ближайшей парковки (например, «1 мин, 100 м») и прикрепили больше фото.

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

2. При бронировании парковочных мест пользователь видит больше возможностей, чем на старом сайте.

2.1 Добавили дополнительные услуги, которые можно редактировать и настраивать под себя.
У Паркинга есть доп. услуги, которые предлагаются пользователю при бронировании: мойка автомобиля, подкачка шин, запуск двигателя. При этом раньше пользователи не могли настроить эти услуги на сайте — например, выбрать услугу «мойка автомобиля» и помыть не весь авто, а только диски и коврики. Хотя по факту у Паркинга была и есть такая «подуслуга» — просто она не была отражена на старом сайте.
Мы это исправили: теперь в процессе бронирования на сайте пользователь может настраивать дополнительные услуги под свои потребности и мыть только диски и коврики, если ему потребуется.

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

2.3 Добавили систему бонусных баллов — так что теперь пользователи могут накапливать бонусы в процессе использования услуг Паркинга и тратить их на оплату следующих сессий парковок.

3. На новом сайте пользователь может найти больше информации о территории рядом со своей парковкой — мы сделали подробнее динамические карты парковочных мест.

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

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

4. Навигация по сайту стала проще и комфортнее.

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

Дизайн нового сайта сделали современным и простым в восприятии. Через цвета, акценты, фотографии и схемы добились того, чтобы навигация по сайту была понятной пользователю любого возраста.
Так, на странице «Парковки» сейчас максимально простой интерфейс — белый фон, цветом выделены только основные элементы: карта парковок, сами парковки и кнопка «Показать парковки» в помощнике при поиске мест.

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

1. Now, it's easier for users to navigate through the parking reservation process.

Firstly, we've equipped the parking cards' covers with necessary information.

Previously, when users accessed the parking page, they had to open each parking card to study its features and select a suitable one. The reason was the lack of information on the card covers.

We've rectified this. For instance, we've added labels with classifications on the covers like "Electric", "Pay at Exit", "Disabled Spaces", etc. We've drawn a simple scheme indicating the distance to the nearest parking (e.g., "1 min, 100 m") and attached more photos.

Secondly, we've added more information inside each parking card.

For example, we've enlarged the photos and names of the parking lots, added sections on "How to Get There" to key points (to the terminals, parking building, etc.), and duplicated the map of the airport and parking area.

2. During the parking reservation, users now see more options than on the old website.
2.1 We've added additional services that can be edited and customized.
The Parking offers extra services during reservation — car washing, tire inflation, engine start. Previously, users couldn't customize these services — for instance, choosing the "car washing" service and washing only the wheels and mats. Although Parking had such a "sub-service," it wasn't reflected on the old site. We've corrected this — now, during reservation, users can customize additional services and wash only the wheels and mats if needed.
2.2 We've expanded information about discount programs on the website and set up the ability to send documents for approval for large families, always guaranteeing parking availability for disabled persons.
2.3 We've introduced a bonus points system — so now users can accumulate points while using Parking services and spend them on paying for subsequent parking sessions.

3. On the new website, users can find more information about the area near their parking — we've detailed the dynamic maps of parking spaces.
Previously:
— When zooming out on the map, it was difficult for users to understand the number of parking spots in various areas (parkings were marked with flags, and their overlapping made it hard to read the information).
— Information about parking lots was written on the map in small font;
— The departure and arrival zones were unclear.
Now:
— When zooming out, it's easy to understand the number of parking spots on the territory — they are marked with numbers on the map;
— When a user taps on a specific parking lot, a large window pops up with information about the parking price and the option to immediately plot a route from the user to that spot;
— When zooming out, it's easy to find departure and arrival zones — they are marked on the map in different colors.

4. Navigating the website has become simpler and more comfortable.
The old website had an outdated design, poor accents, and visual noise that hindered users from scanning information and interacting with the interface.
For example, when accessing the "Parking" page of the old site, users were overwhelmed by an abundance of colors and shapes: nearly a third of the screen was occupied by blocks unrelated to parking — latest news, promotions, online calculator announcements, etc.

We made the design of the new site modern and easy to perceive. Through colors, accents, photographs, and schemes, we've achieved a navigation system that is understandable to users of any age.

For instance, the "Parking" page now has a maximally simple interface — a white background, with only the main elements highlighted in color: the parking map, the parking lots themselves, and the "Show Parking" button in the search assistant.

5. We've added a personal account. As a result, users always have their reservation number, date and time of their booking, and other order information at hand. Also, in the personal account, users can cancel their parking reservation — previously, this had to be done through customer service.

Бизнес-задача и ее решение

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

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

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

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

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

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

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

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

Sheremetyevo Parking — a subsidiary of Sheremetyevo Airport, its official parking service. The company approached us to develop a website for managing the parking reservation system.
The old website lacked new features, was difficult to maintain, and looked outdated. Therefore, we needed to create a site from scratch:
— where the client can independently add and edit information,
— which would showcase new features and a personal account,
— that looks good and modern both on PCs and mobile devices.

Solution
1. We rewrote the project code from scratch, giving the client the ability to expand the site's functionality and not be tied to specific developers.

1.1 Before us, the Sheremetyevo Parking website was managed by a very small development team, which used a lot of custom code without popular frameworks. That is, the code was complex and undocumented. Therefore, the client was tied to this team — if someone else started making changes, there was a high probability that they would accidentally break other site functionalities, and it would be difficult to track.

So, we rewrote the entire project using the modern Laravel framework, structured the code, and followed all development standards. This makes supporting current and adding new functions easy and understandable for any developer.

1.2 Covered the code and key functionalities with tests.
Previously, when making changes, it was necessary to manually check the entire site's functionality (to see if anything broke). Now, this is immediately done by automatic tests — and they notify the developer if there is a breakdown somewhere.

2. The site became easier to maintain
We added and thoroughly worked on the admin panel — so now the client can independently manage content, add new information, view information about reservations and requests that came from feedback forms, etc.

3. Implemented new functionalities on the site: discount programs and the selection of additional services, developed a loyalty system. Also reflected on the site a personal account and expanded its capabilities.

4. Updated the design: made it modern, easy to perceive, adapted to the habits and needs of users. Now it's a neat service with a simple and clear visual — so that people of all ages can quickly figure it out and book places.
Special attention was paid to mobile devices — as most users book and pay for parking from their phones.

Крафт (мастерство), реализация, технические детали

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

During development, we utilized the Progressive Web Application (PWA) technology, which allows the website to display some information to the user in offline mode. Thanks to this, for example, a user can open their parking ticket on the site even without internet access.

Скриншоты

Комментарий заказчика

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

Oxem ответственно подошли к выполнению многих задач: подготовили подробное описание логики работы сложного функционала Личного кабинета, блок-схемы взаимодействия сайта и автоматизированной парковочной системы, стали постоянными участниками рабочих групп по внедрению Программы лояльности, CRM, сервиса речевой аналитики и др. Кроме того, найденные специалистами Oxem дизайнерские решения были отмечены в материнской компании и учтены при разработке обновлённого гайда по стилистике сайтов дочерних и зависимых Обществ.

Мы удовлетворены совместной работой с Oxem, и считаем новый сайт «Шереметьево Паркинг» современным, функциональным и привлекательным.