Сделали сайт для оптовых закупок спортивного оборудования Foreman — строгий, подтянутый и дико удобный.
Результат Процесс
Foreman: спортивный сайт для B2B продаж
Сибирикс

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

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

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

  • Создать современный привлекательный дизайн на основе нового фирменного стиля, сформировать имидж ведущего производителя спортивного оборудования в России.
  • Представить широкой клиентской аудитории товары и услуги компании: сделать удобный каталог и поиск по нему.
  • Обеспечить обратную связь с потенциальными клиентами и партнерами.
  • Организовать приватную презентацию военных проектов заинтересованным лицам.
Аналитика
Чтобы выполнить первую задачу и сделать лучший сайт производителя спортивного оборудования в России, аналитику нужно было изучить конкурентов. Прощупать их сайты, найти сильные стороны, чтобы сделать еще круче у Foreman, и слабые, чтобы у нас они не появились.
Я начала делать аналитику и на следующее утро пошла в спортзал — посмотреть, какие производители инвентаря представлены на рынке и какие сайты можно рассмотреть в конкурентном анализе. У конкурентов много интересных фишек, было что анализировать.

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

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

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

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

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

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

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

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

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

Для каждой категории товаров — а их 9 — дизайнер нарисовал иконки, а разработчики научили их по-спортивному подпрыгивать при наведении курсора.
Подробное описание товара выводится прямо в каталоге при наведении мыши. Появляются габариты, цвета, описание и кнопка для добавления в корзину. Когда выводится информация, плитка с товаром затемняется и по-эппловски размывается — красота!
В подробной карточке товара больше фотографий, прописаны преимущества, показаны рекомендуемые товары, для мебели выводится цветовая палитра. Товар можно расшарить в социальных сетях, чтобы люди знали, где брать добро. И добавить его в корзину.
У корзин на сайтах B2B куча заморочек и нюансов. В идеале она должна выдавать покупателю КП или счет, как это делает сайт ПК Титан. Но это не всегда реализуемо. На Foreman мы сделали простую мини-корзину, которая фиксирует заказ и отправляет лид в админку сайта.
Здесь пришлось потягать железо. В переносном смысле, конечно :) Это вам не танцы с анимацией! Суровый каталог с несколькими уровнями вложенности, фильтрация по отраслям, Ajax и многое, многое другое. Для реализации всего этого мы максимально использовали новые технологии, например ядро Битрикса D7.

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

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