Сайт в сфере транспорта, логистики и доставки Лаборатории Умного Вождения

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

Ссылка на развернутый кейс: https://bit.ly/3HNs9q1

Заказчик: Лаборатория Умного Вождения. Это IT-компания ‒ разработчик высокотехнологичной платформы, которая объединяет в себе технологии, данные и автомобили. А также с помощью специального оборудования позволяет удаленно управлять автомобилем и обеспечивает его безопасность.

Сайт заказчика: https://smartdriving.io/

Вводные данные
Заказчик обратился к нам в декабре 2019 года. Это был идеальный заказ. Не нужно было ничего переделывать, нужно было сделать все с нуля.
Заказчик разработал умную систему управления и защиты автомобиля «Элемент». Эта система помогает автовладельцу экономить, всегда быть уверенным в безопасности своего автомобиля и чувствовать себя защищенным в пути. «Элемент» умеет удаленно открывать и закрывать автомобиль, запускать и блокировать двигатель по запросу или заданному расписанию, контролировать уровень топлива и оценивать качество вождения. Кнопка SOS на метке безопасности позволяет автовладельцу получить своевременную помощь, а автономный поисковый маяк ‒ оперативно найти автомобиль в случае угона. Владельцы системы получают содействие на дорогах, быстрое реагирование МВД, скидки на КАСКО и другие привилегии.
Для этого продукта нужно было разработать сайт на платформе «1С-Битрикс», сделать верстку и интеграцию адаптивного дизайна сайта.

Что у нас получилось: визуальные решения

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

Презентация компании

Вместо скучного рассказа о достижениях, которые обычно никто не читает, посетители сайта видят анимированную историю «Лаборатории Умного Вождения» и процесса создания системы «Элемент».
Демонстрация приложения

Автовладельцу гораздо удобнее посмотреть короткое видео, как все устроено в приложении, чем пытаться это понять по текстовому описанию и паре картинок.
Расчет скидок на КАСКО

Так выглядит на сайте расчет скидок на КАСКО от разных страховых компаний. Анимация позволяет автовладельцу быстрее ориентироваться среди большого количества предложений.
Иллюстрация работы системы скоринга и оценки рисков
Также анимация использована для объяснения, как работает Atlas Scoring и нейросеть Crash AI. Систему скоринга и оценки рисков Atlas Scoring используют страховщики при расчетах по КАСКО.

Технические решения и маркетинг

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

Раздел «Блог»

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


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

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

Также в 2021 году мы подключили заказчику технологию «Композитный сайт», которая позволяет быстро загружать страницы сайта, даже при большом количестве качественной графики и анимации.
В 2022 году мы продолжили работы по оптимизации скорости работы сайта. В начале года мы перевели все изображения в формат WebP и оптимизировали загрузку данных при открытии страниц.

А в декабре 2022 обновили программное обеспечение. В целях защиты клиентов от несанкционированного доступа мы это делаем регулярно на всех наших долгосрочных проектах. Работы проходят в плановом режиме и поддерживают безопасность на должном уровне.

Активная визуализация помогает продажам

Такие продукты, как система «Элемент», продавать непросто. Сама система технически очень сложная, а покупатель ‒ обычный автолюбитель, который часто не хочет разбираться ни в каких тонкостях. Он просто хочет комфорта и безопасности.

В таких ситуациях на помощь приходит визуализация. Мы приложили максимум усилий для того, чтобы Лаборатория Умного Вождения могла демонстрировать клиентам все возможности своей системы.
А быстрая загрузка страниц, обработка фото и видео, бесперебойная работа сайта и все остальные технические тонкости ‒ это уже наша забота.

Выставлено в номинациях:
   — Сайт в сфере транспорта, логистики и доставки