Anton Murlykin design

3axapoV Drive

Цель проекта: спроектировать и запустить независимую медиа-платформу для автоблогера, которая объединяет контент из разных каналов в единый опыт.

Роль: UX/UI (IA, сценарии, прототипирование, UI-система) + разработка на Tilda + кастомный CSS/JS.

IA / UX UI System Tilda + Code
Постановка задачи

Исходная точка

Сергей Захаров — автомобильный обозреватель, чья аудитория активно следит за контентом на Drive2, Telegram и Rutube. Контент был качественным, но “разбросанным”.

Бизнес-проблема: отсутствие собственного медиа-пространства, где аудитория может удобно читать и смотреть свежие обзоры.

  • Создать независимую медиа-площадку.
  • Улучшить восприятие материалов.
  • Усилить узнаваемость бренда “3axapoV Drive”.
Сайт становится основной ссылкой в коммуникациях. Аналитика показывает рост глубины просмотра.

До → После

До
  • UX-сценарии не управлялись централизованно
  • Аналитика ограничена внешними платформами
После
  • Единая структура контента: Обзоры / Новости / Блог
  • Content-first и читабельный UI
Аналитика и исследование

Конкуренты, боли, JTBD

На старте были изучены лидеры ниши: Drive2, Motor.ru, Авторевю. В большинстве решений повторялись проблемы: визуальный шум, избыток рекламы.

Фокус: ускорить путь к нужному обзору и сделать чтение комфортным.

Persona Alex

Активный читатель

Цель — получать честные обзоры и быстро находить нужное.

Решение: фильтры и понятная структура.
Persona Kate

Практичный покупатель

Цель — быстро понять плюсы/минусы модели.

Решение: ясная иерархия и акценты.

Content-first

Структура: Обзоры / Новости / Блог. Фильтрация по регионам (Европа, Китай, Япония, Корея).

Решения

  • Sticky-header для навигации
  • Карточки обзоров с быстрыми фильтрами
  • CTA-зоны к свежим публикациям
  • Мягкое появление контента
Архитектура продукта

IA → User Flow → Прототипирование

01. Информационная архитектура

Блог (лонгриды), Новости (кратко), Обзоры (карточки).

02. UX-логика

Сценарии: “главная → обзор”, “новость → блог”.

03. Wireframe

Сетка 12 колонок, кликабельные зоны ≥ 44px.

Визуальный язык

Цвета, типографика, компоненты

В основе — фирменные цвета заказчика: синий и оранжевый. Типографика: динамичные заголовки + читаемый текст.

Primary
#214DA3
Надёжность.
Accent
#FB9127
Драйв.
Aa
Sofia Sans Extra Condensed
Aa
Open Sans
Разработка

Tilda Zero Block + Code

Кастомные блоки и анимации на чистом CSS/JS без тяжёлых библиотек.

Результаты

Запуск и эффект

Сайт стал основной точкой входа для аудитории и партнёрских интеграций.

KPI

0
CTR карточек
0
Глубина просмотра
0
Повторные визиты

Честные обзоры
Чистый драйв

Смотреть сайт