Как мы собрали MVP для нового бренда электробайков.

1. Вводная задача от заказчика, проблематика, цели

«Элекарика» — молодой бренд, который продаёт электровелосипеды и электросамокаты в Москве. Это наш второй совместный проект: до этого мы с тем же заказчиком запустили сайт премиального автодилера — ZEUSE, поэтому в работе с «Элекарикой» ребята доверяли нам на 100%.

Цель — создать MVP, с которым бренд может быстро войти в онлайн, начать продажи и тестировать гипотезы. При этом важно было не просто показать технику, а сформировать вокруг неё образ: стремительный, уверенный, драйвовый.

Интернет-магазин с коротким каталогом, в котором ключевую роль играет имиджевая подача. А ещё — сайт, с которого удобно начать путь: посмотреть модели, выбрать, влюбиться, отправить заявку.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Анализ

Мы начали с брифа и изучения продукта: что важно покупателям, чем бренд отличается от конкурентов, какие модели самые продаваемые. Из брифа поняли УТП проекта: делаем уникальное доступным. Электровелосипеды и электросамокаты — достаточно дорогой товар, а заказчик собрал модели, которые потребитель может себе позволить.

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

Есть большие ритейлеры и небольшие магазины, где упор на обычные велосипеды и пара электромоделей как добавочный товар. Поэтому мы смотрели ещё и в сторону зарубежных сайтов и онлайн-магазинов.

Так родился прототип — с текстами, картой сайта и понятной логикой движения пользователя. Прототип согласовали быстро — доверие уже было. Осталось только доточить детали, всего-то 3 этапа и 3 недели работы)

Структура

Мы сфокусировались на пути пользователя: продумали меню, категории, фильтры и сценарии навигации.

• Сделали горизонтальное меню в компьютерной версии, которое фиксируется, и боковое меню в мобильной версии, чтобы всегда можно было быстро вернуться к любой странице.
• Выделили категорию электровелосипедов — это флагманский товар, поэтому мы вынесли его в меню отдельным пунктом. При наведении на категорию пользователь сразу видит популярные модели электровелосипедов.
• В карточки товаров добавили фото, которые сделала компания, подробные характеристики и блок «Смотри также» для увеличения продаж.
• На странице «Каталог» пошли следующим образом: сначала закрыли основные вопросы по типу «А в Казахстан доставляете?», «Есть рассрочка или кредит?», а ниже показали преимущества продукции.
• Помимо того, что мы рассказали о базовых характеристиках электровелосипедов, таких как: разгоняется до 40 км/час, 2 дня держит зарядку, подсветили и классную фишку компании: байк можно кастомизировать или вообще собрать самому.
• Настроили фильтрацию по ключевым параметрам: тип, стоимость, категория.
• Добавили поиск по сайту для тех, кто пришёл за конкретной моделью.
• Предусмотрели корзину, но купить модель сразу не получится, корзина ведет на созвон с менеджером. Чек высокий, поэтому важно обсудить все нюансы сразу.

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

Визуальные решения

Все визуальные решения сайта работают на то, чтобы погрузить в драйв свободы. Сайт должен цеплять. И цепляет:

• Яркий акцентный цвет — кислотно-зелёный. Работает на контрасте с тёмным фоном, выделяет кнопки, элементы навигации, важные блоки.
• Фотографии с оранжевым цветом — выделяют модели. Когда пользователь изучает сайт, его внимание останавливается на новом цвете.
• Изображения, которые нашли дизайнеры, передают нужный вайб: драйв, свободу, спорт. Помимо фотографий моделей, фотографий на проекте не было, и это хороший выход.
• Анимация по скроллу делает сайт «живым» — элементы появляются в ритме прокрутки, за счёт чего пользователь физически не может быстро пролистнуть сайт и успевает изучить информацию.
• Слайдер на первом экране и бегущая строка задают темп.

На первом экране затронуты обе категории транспорта: детский и взрослый.

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

2 слайд — показали, что есть детский транспорт, и сразу отработали главное возражение родителей: транспорт безопасный! Ещё сделали упор на эмоции, дети всё-таки.

3 слайд — транспорт для взрослых, там и показали УТП: делаем уникальное доступным.

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

Технические решения

Несмотря на то, что это MVP, мы сделали проработанную техническую базу.

• Все формы подключены к CRM, можно отследить, откуда приходят заявки, и зафиксировать их.
• Страницы сайта несколько раз показывают возможность кастомизации — один из ключевых поводов купить именно у «Элекарика».
• Обязательные страницы для интернет-магазинов: «Доставка и оплата», «Гарантия и возврат» размещены и сделаны по всем правилам.
• Базовые страницы «Политика конфиденциальности», «404» и «Спасибо за заказ» — тоже на месте.
• Адаптивность под мобильные устройства — обязательный must-have, особенно в B2C-сегменте.
• Прописаны title, description и метатеги H1-H3, чтобы поисковые роботы правильно индексировали сайт и в будущем, если проект хорошо себя покажет, приносили органический трафик.

Мы заложили в проект техническую основу, с которой не страшно расти: всё подключено, всё отслеживается, всё адаптировано.

3. Результаты сотрудничества

Подробно решения мы расписали выше, но если выделять главные, то:

• разработали MVP сайта с фокусом на имидж;
• создали каталог с удобной фильтрацией и детализированными карточками;
• сделали акцент на флагманские модели;
• настроили визуальные и анимационные акценты, чтобы усилить ощущение скорости и энергии;
• интегрировали все формы с CRM;
• использовали динамичные UI-приёмы: горизонтальный скролл, анимации, бегущая строка;
• сверстали все технические страницы;
• сделали адаптив под мобильные устройства.