INDEPENDENT AUTOMOTIVE MEDIA
3AXAPOV ДРАЙВ
Независимая медиа-платформа для автомобильного обозревателя Сергея Захарова. Объединение качественного контента из Drive2, Telegram и Rutube в единый премиальный опыт чтения и просмотра.
Исходная точка и Задачи
Создание независимого "Hub-а" для аудитории, чтобы избавиться от ограничений внешних платформ и улучшить опыт взаимодействия с контентом.
Бизнес-проблема:
Контент Сергея Захарова качественный, но разбросан по разным платформам (Drive2, Telegram). Пользователям неудобно искать старые обзоры, а автор теряет трафик и контроль над рекламными интеграциями. Внешние площадки диктуют свои правила оформления и монетизации.
Решение:
Спроектировать собственное медиа-пространство. Место, где обзоры, новости и статьи живут в понятной иерархии. Читатель получает опыт глянцевого авто-журнала, а бизнес — полный контроль над аудиторией.
Контент Сергея Захарова качественный, но разбросан по разным платформам (Drive2, Telegram). Пользователям неудобно искать старые обзоры, а автор теряет трафик и контроль над рекламными интеграциями. Внешние площадки диктуют свои правила оформления и монетизации.
Решение:
Спроектировать собственное медиа-пространство. Место, где обзоры, новости и статьи живут в понятной иерархии. Читатель получает опыт глянцевого авто-журнала, а бизнес — полный контроль над аудиторией.
- Создать независимую площадку-агрегатор.
- Улучшить читабельность лонгридов (типографика, сетка).
- Усилить узнаваемость личного бренда автора.
Сайт становится основной ссылкой в коммуникациях. Пользователи проводят больше времени за чтением смежных статей (рост глубины просмотра).
До → После
Было (Внешние площадки)
- UX-сценарии не управлялись автором
- Много чужого баннерного шума
- Сложный поиск архивных обзоров
Стало (Свой Hub)
- Единая структура: Обзоры / Новости / Блог
- Content-first интерфейс: ничего не отвлекает от текста и фото
- Удобные фильтры по странам производителей
Аналитика и аудитория
Анализ конкурентов (Drive2, Motor.ru) показал избыток визуального шума. Фокус сместился на чистоту интерфейса и JTBD пользователей.
Портреты пользователей: ![Alex]()
![Kate]()
Активный читатель
Цель — получать честные обзоры на новинки автопрома и быстро находить нужную модель без кликбейта.
Решение: Быстрые визуальные фильтры и понятная рубрикация.
Практичный покупатель
Цель — быстро понять плюсы/минусы конкретной модели перед визитом в дилерский центр.
Решение: Ясная иерархия лонгрида, выноски с характеристиками.
Content-first подход
Пользователи устали от агрессивной рекламы. Структура разделена на: Обзоры (глубокая аналитика), Новости (короткие форматы), Блог (личное мнение). Введена визуальная навигация по регионам: Европа, Китай, Корея.
Решение: Карточки обзоров · Крупные фото, структура текста, фирменный цвет при ховере
Архитектура и логика
Проектирование информационной структуры (IA), создание бесшовного User Flow и отрисовка Wireframes для тестирования навигации.
01. Навигация
Sticky-header обеспечивает постоянный доступ к разделам при скролле длинных обзоров.
Sticky-header обеспечивает постоянный доступ к разделам при скролле длинных обзоров.
02. Сетка
Жесткая 12-колоночная сетка для стабильного отображения контента. Кликабельные зоны увеличены (≥ 44px) под мобильные экраны.
Жесткая 12-колоночная сетка для стабильного отображения контента. Кликабельные зоны увеличены (≥ 44px) под мобильные экраны.
03. Сценарии
Бесшовный переход: с главной страницы сразу в нужный обзор, а после прочтения — предложение смежных новостей (перелинковка).
Бесшовный переход: с главной страницы сразу в нужный обзор, а после прочтения — предложение смежных новостей (перелинковка).
UI System
Адаптация корпоративных цветов под веб-стандарты и создание строгой типографической иерархии для лонгридов.
Цвета бренда
Основа визуала клиента — глубокий синий и драйвовый оранжевый. Мы перевели их в digital-формат, обеспечив нужный контраст на светлых подложках медиа-сайта.
Основа визуала клиента — глубокий синий и драйвовый оранжевый. Мы перевели их в digital-формат, обеспечив нужный контраст на светлых подложках медиа-сайта.
#214DA3 Primary / Надёжность
#FB9127 Accent / Драйв
Типографика для медиа
Для проекта, где текст — это главное, мы выбрали комбинацию гротесков. Узкий, техничный шрифт для броских заголовков и нейтральный для комфортного чтения больших объемов текста.
Для проекта, где текст — это главное, мы выбрали комбинацию гротесков. Узкий, техничный шрифт для броских заголовков и нейтральный для комфортного чтения больших объемов текста.
Sofia Sans Extra Condensed
Используется для H1, H2. Компактный, позволяет уместить длинные названия автомобилей в мобильной верстке.
Open Sans
Используется для Body-текста. Отличная читабельность на любых экранах, выверенная высота строки (line-height: 1.55).
Разработка (Tilda + Custom Code)
Платформа собрана на Tilda Zero Blocks с внедрением кастомного CSS/JS. Это дало высокую скорость запуска, простоту наполнения статьями для автора и уникальные плавные анимации для пользователей.
KPI и Концепт-метрики
Переход на собственную платформу кардинально меняет показатели взаимодействия с аудиторией по сравнению с внешними блогами.
Вовлеченностьрост времени сессии
82%
Глубина просмотрастраниц за визит
2.8x
Читабельностьснижение отказов
94%
Монетизацияконтроль интеграций
76%
Итог
Запуск независимого медиа-хаба позволил объединить разрозненный контент и предоставить аудитории премиальный опыт чтения.
• Консолидация: сайт стал основной точкой входа для аудитории из всех соцсетей.
• Управление UX: полный контроль над путем пользователя и отображением рекламы.
• Масштабируемость: структура позволяет легко добавлять новые рубрики и форматы.
• Узнаваемость: сильный визуальный язык выделил проект на фоне агрегаторов.