Cервис для записи на техобслуживание автомобиля Garage.co.uk

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

О проекте

Garage.co.uk — это агрегатор автосервисов из Великобритании, где хозяевам авто предлагается быстро получить квалифицированный ремонт или полное техобслуживание по подходящей цене в одной из мастерских, зарегистрированных в сервисе. Владельцы Garage зарабатывают на комиссионных процентах, взимаемых с каждой оплаты услуг мастерской.   

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

Технологии: React JS, Next JS, Symfony, Elasticsearch, Customer.io

Роли пользователей сервиса

Garage объединяет в себе три приложения — для владельцев автомастерской, владельцев автомобилей и администраторов сервиса. 

Владелец автомастерской

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

Самая массивная и ответственная работа в рамках оформления профиля мастерской — это составление прейскуранта на все основные и дополнительные услуги. Интерфейс интерактивен благодаря JavaScript-библиотеке React. Например, когда мы впервые вводим или меняем такие параметры, как ставка (Service Labour Rate) и цену литра масла (Standard Oil), стоимость замены масла, в нижней части страницы рассчитывается в реальном времени без перезагрузки страницы. 

Для веб-приложений на React характерно, что часть контента приходит на сайт с сервера по запросу через JavaScript. Т.к. JavaScript не индексируется поисковыми роботами, у React-приложений всё плохо с поисковой оптимизацией. Чтобы решить эту проблему, мы используем фреймворк Next.js, который частично отрисовывает интерфейс на стороне сервера и передаёт его в браузер до того, как успевают прийти JavaScript-файлы, чтобы роботы успели его просканировать.

Владелец гаража может создать и сохранить несколько прейскурантов, но мы сделали так, чтобы система находила противоречия между ними и, например, не давала сохранить два прейскуранта с услугой “MOT (class 4)” для одного и того же автомобиля. Это лишь одно из множества возможных пересечений, которые система может отследить.

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

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

Владелец автомобиля

В личном кабинете автовладельца хранятся данные о его автомобилях, пройденных диагностиках (Inspections), оценки заявок на услуги разных мастерских (Quotes), заявки на работу с конкретной проблемой (Bookings) и отзывы (Reviews), а также вкладка для оформления заявки техподдержке онлайн-сервиса. 

Администратор

Администратору Garage доступны для просмотра аккаунты всех мастерских и их клиентов. Также он может:

• редактировать информацию о мастерской,

• блокировать и удалять аккаунты мастерских и клиентов,

• добавлять мастерские,

• проверять жалобы мастерских на оставленные отзывы.

Поиск подходящей автомастерской

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

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

Оформление заявки на техосмотр

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

После нажатия на кнопку Compare Prices Instantly на экран выводятся мастерские, по умолчанию отсортированные по релевантности. На порядок мастерских влияет специальная формула, которая учитывает средний рейтинг и расстояние до них. В боковом меню можно отфильтровать мастерские по различным параметрам. В подходящей мастерской пользователь накликивает, какие дополнительные услуги хотел бы получить, жмёт кнопку Book Now и переходит на страницу подтверждения заказа. Там ему остаётся назначить дату прохождения осмотра и уточнить личные данные.  

Мастерской приходит оповещение о том, что создана страница с новой заявкой.  

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

А также есть чат для связи. Чат работает по протоколу Mercure с использованием стандарта Server-sent events, что позволяет хранить переписку на сервере клиента.

После завершения работы мастерская выставляет клиенту счёт.

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

Завершённая заявка сохраняется во вкладке Bookings на стороне автовладельца и мастерской. Информацию о заказе всегда можно посмотреть повторно.

Имейл-кампании 

Вся коммуникация с пользователями построена через Customer.io — CDP-платформу, которая использует данные о поведении клиента и правила для отправки сообщений пользователям. 

Используется для сборки и отправки имейл-рассылок и отдельных писем, среди которых:

• уведомления об изменении статуса заказа,

• сообщения об особенностях работы с сервисом, 

• кампании по допродажам, 

• напоминания об истечении срока прохождения техосмотра или страховки,

• напоминания о не до конца заполненных формах с возвратом к заполнению,

• запрос отзыва у конкретного автовладельца,

• письмо со ссылкой для сброса пароля.

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

Информация о сроках напоминания хранится на Symfony-сервере. Когда на пользователя или их группу нужно запустить рассылку, сервер отправляет событие в Customer.io, который регулирует весь процесс в дальнейшем.

Для рассылки SMS используется сервис Twillo, у которого с Customer.io настроена прямая интеграция.

Заключение

Работа над проектом продолжается.

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

Результаты:

В результате сотрудничества мы разработали высоконагруженный B2B2C-сервис для рынка Великобритании, который объединяет три типа пользователей в единой экосистеме. Ключевые достижения проекта:

1. Комплексная платформа для автовладельцев:

   • Создан умный поиск и агрегация автосервисов с фильтрацией по рейтингу, цене, расстоянию и специализации (марки авто, типы услуг).

   • Разработаны три сценария создания заявки: фиксированный ТО (MOT), заявка на диагностику и заказ с детальным описанием проблемы (с фото/видео). Это покрывает 100% потребностей пользователей при обращении в сервис.

   • Интегрированы государственные API для мгновенной проверки статуса MOT, транспортного налога и соответствия экологическому стандарту ULEZ по госномеру авто.

2. Многофункциональный инструмент для мастерских:

   • Внедрен интерактивный конструктор прейскурантов с динамическим пересчетом цен (на React) и системой валидации, предотвращающей дублирование и конфликты услуг.

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

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

   • Интегрирована синхронизация с календарями Google, Outlook и Apple для удобного планирования работ.

3. Эффективная система коммуникации и маркетинга:

   • Настроена автоматическая коммуникация через Customer.io, включающая цепочки писем (onboarding, допродажи, напоминания об истечении MOT/страховки) и SMS-уведомления через Twilio.

   • Реализован встроенный чат на основе Mercure (Server-sent events) для оперативного общения между клиентом и мастерской прямо в заявке.

   • Создана система сбора и модерации отзывов с функцией их оспаривания мастерскими.

4. Технические и UX-решения:

   • Использована связка React + Next.js, что обеспечило высокую производительность интерфейса и отличную SEO-оптимизацию (серверный рендеринг) для страниц мастерских и услуг.

   • Разработана масштабируемая архитектура с разделением на три типа аккаунтов (клиент, мастерская, администратор) с разными уровнями доступа.

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