Автомобиль как гаджет: новый сайт бренда Атом

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

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

Перед командой АЭРО стояла задача создать сайт, который:

- раскрывает философию бренда и технологичность продукта,

- поддерживает коммуникацию с рынком и сообществом,

- помогает пользователям решать ключевые задачи,

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

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

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

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

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

1. Визуальный язык: чистый, быстрый, технологичный

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

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

Анимации и переходы работают как элементы единой цифровой системы и продолжают эстетику самого продукта.

2. Сайт как интерфейс гаджета

Ключевая идея дизайна родилась из концепции «автомобиль-гаджет», которую команда заказчика последовательно развивает в продукте. Если смартфон — это современный центр управления жизнью, то Атом стремится занять аналогичную роль в городской мобильности.

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

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

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

3. Единый каталог для B2B и B2C

Каталог стал единым для частных и корпоративных покупателей. Характеристики меняются с помощью переключения табов. Благодаря минималистичной структуре интерфейса он работает как быстрый инструмент выбора: пользователь может сразу познакомиться с основными параметрами автомобиля и в один клик осуществить целевое действие — записаться в лист ожидания. 

1. Архитектура

Сайт строится вокруг трех основных разделов: 

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

- Бренд — знакомит пользователя с философией компании.

- Сообщество и медиа — включает новости проекта, материалы о технологиях и обновлениях продукта.

Для пользовательского интерфейса использовался фреймворк Next.js на основе React, а бэкэнд сайта был разработан с помощью Focus CMS — собственной системы АЭРО. Мы адаптировали ее стандартные модули под задачи проекта: управление баннерами, новостями, контентом и динамическими блоками. 

CMS была развернута в инфраструктуре заказчика и интегрирована с CI/CD-процессами компании, что позволило автоматизировать обновления сайта.

2. Масштабируемость платформы

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

3. Требования безопасности и интеграции

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

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

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

Изменения отразились и на пользовательском поведении: глубина просмотра выросла на 57%, а время на сайте — на 20%, что подтверждает вовлекающий характер нового интерфейса и сценариев взаимодействия.

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

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