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

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

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

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

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

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

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

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

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

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

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

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

1. Новая концепция сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

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

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

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

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

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

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

Скриншоты