Foreman: спортивный сайт для B2B продаж

Если ваш фитнес-клуб знает толк в спортивном инвентаре, то вы уже знакомы с компанией, сайту которой посвящен этот кейс. Он о российском производителе спортивного оборудования Foreman. Ребята делают тренажеры, аксессуары, мебель для спортивного инвентаря и одежды, оборудование для игр и единоборств.

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

Чтобы выполнить первую задачу и сделать лучший сайт производителя спортивного оборудования в России, аналитику нужно было изучить конкурентов. Прощупать их сайты, найти сильные стороны, чтобы сделать еще круче у Foreman, и слабые, чтобы у нас они не появились.

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

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

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

В дизайне отталкивались от фирменного цвета Foreman — красного. И первым желанием было замиксовать его с черным, сделать стильно, броско, но строго.

Совсем отказываться от черного мы не стали, а вторым основным цветом сделали нейтральный серый.

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

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

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

• сделали дополнительную фильтрацию в каталоге. По всем товарам и по каждому разделу можно отфильтровать товары для медицинских центров, силовых структур, фитнес-клубов и строительных организаций (они угарают по мебели Foreman);
• на главную добавили блоки для каждой организации. По клику на них загружается уже отфильтрованный каталог.
• сделали поиск, который ищет по разделам: по каталогу, новостям, проектам и всему остальному.

У каталога три уровня вложенности: категория товаров (например, кардиотренажеры), вид товара (степперы, велотренажеры и т.д.) и фильтрация по отрасли использования (медицина, армия, фитнес-центры).

Для каждой категории товаров — а их 9 — дизайнер нарисовал иконки, а разработчики научили их по-спортивному подпрыгивать при наведении курсора.

Подробное описание товара выводится прямо в каталоге при наведении мыши. Появляются габариты, цвета, описание и кнопка для добавления в корзину. Когда выводится информация, плитка с товаром затемняется и по-эппловски размывается — красота!

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

У корзин на сайтах B2B куча заморочек и нюансов. В идеале она должна выдавать покупателю КП или счет, как это делает сайт ПК Титан. Но это не всегда реализуемо. На Foreman мы сделали простую мини-корзину, которая фиксирует заказ и отправляет лид в админку сайта.

Второй по важности после каталога раздел — «Проекты». Здесь показаны объекты, которые оборудованы изделиями Foreman. Заказчик предоставил реальные фотографии, и мы решили акцентировать на них внимание, показав не на отдельной страничке, а в аккуратном фэнсибоксе. С ним-то мы горя и хлебнули.

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