Конкуренция на рынке шин бешеная — зайдите в любой специализированный магазин, и всё поймёте: миллиард вариантов разных брендов, характеристик и ценовых категорий. Если вы в них не разбираетесь, придётся полагаться на помощь консультанта или читать в интернетах отзывы. Но вообще-то на дворе век технологий, и можно даже не выходить из дома — а просто зайти в новый интернет-магазин от генерального дистрибьютора Шинного бизнеса ПАО «Татнефть» KAMA TYRES — ООО «ТД «Кама», чтобы легко и быстро подобрать шины. А после — тут же оплатить их картой и заказать доставку.

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

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

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

Сначала мы с клиентом остановились на MVP (minimum viable product) — минимально жизнеспособном продукте. После его реализации удобно поэтапно допиливать фичи, добавлять нужные блоки, разделы и функционал.

По MPV был жесткий дедлайн — на разработку первой версии сайта у нас было всего 3 месяца со всеми согласованиями. Это очень короткий срок, особенно при взаимодействии с большой компанией, где решение принимается через сложные обсуждения в рабочей группе.

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

На 2-ом этапе мы реализовали многогородовость для показа актуальных остатков в торговых точках, а также адаптирующийся под разные аудитории личный кабинет (для пользователей, представителей мелкого опта и сотрудников Шинного бизнеса ПАО «Татнефть» KAMA TYRES).

Добавили возможность покупки комплектов для грузовых шин и подключили конструктор «Битрикс.Сайты» для создания лендингов под свои нужды. А ещё — создали под каждый бренд отдельные не-текстовые страницы (на первом этапе мы ограничились типовыми).

Чтобы оценить конкурентную среду, мы просмотрели 20+ интернет-магазинов производителей шин. И почти не нашли интересных решений: у всех есть какой-то промо-блок с акциями, почти у всех — подборщик шин. Но самое главное: интернет-магазин в его классическом понимании (выбрал, положил в корзину, оплатил картой, заказал доставку) — большая редкость. Обычно на сайтах конкурентов шины можно заказать только через менеджера.

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

На главной не обошлось без подборщика шин (стандарт отрасли всё-таки), который помогает выбрать колёса не только по параметрам, но и по модели автомобиля — без него пользователь потерялся бы в ассортименте.

У заказчика был брендбук, фирменные цвета и формы которого мы развили в дизайн-концепцию. Идея промо-блока возникла еще на подготовке прототипов и легла в основу дизайна.

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

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

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

Другая частая проблема интернет-магазинов — линейки товаров, которые отличаются одним параметром (например, фасовкой в граммах). Каждый из них — отдельное торговое предложение. Из-за этого в каталоге выводится огромное количество с виду одинаковых товаров, которые отличаются лишь парочкой характеристик.

В каталоге Камы мы предлагаем пользователю сначала выбрать сезон и бренд, после — один из 3−4 вариантов моделей шин (они же — товары). И только потом посетитель погружается в тонкости — радиусы, ширину и высоту — в карточке товара (здесь товары превращаются уже в торговые предложения).

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

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

Чтобы интернет-магазин начал приносить прибыль сразу после запуска, мы настроили эквайринг Сбербанка и интегрировали способы доставки на выбор: самовывоз или доставку транспортной компанией (ПЭК или Деловые линии).

Стандартные модули доставки пришлось переписывать на базе их API — модули не учитывали, что точки отправки заказа на карте могут быть разными. По умолчанию в настройках можно было задать только один город отправки в админке, но нам это не подходило: ТД «Кама» доставляет товары с множества складов, разбросанных по всей России.

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

При большом объёме заказа может получиться, что не все товары будут в наличии на ближайшем складе. Тогда есть варианты:

1. заказать только те, что там есть — тогда к конкретному складу прикрепится заказ;
2. заказать все позиции — сайт автоматически разобьет заказ на два: один для товаров в наличии, второй — для тех, что под заказ.

Если же пользователь находится в отдаленном населенном пункте, где поблизости нет ни точек продаж, ни складов, можно создать заказ без привязки к складу. Тогда, правда, придется созваниваться с менеджером и решать вопросы по доставке (ну, а что вы хотели, живя на Камчатке).

Ситуация осложнялась тем, что изначально в стандартном модуле Битрикса к юрлицу в качестве адреса доставки прикреплялся именно юридический адрес. Хотя в жизни всё может быть иначе. Мы дописали модуль так, чтобы можно было выбрать между фактическим и юридическим или добавить совершенно иной адрес доставки, никак не связанный с юрлицом (адрес ближайшей шиномонтажки, например).

Из интеграций для удобства самого заказчика — интеграция с конструктором Битрикс24. Сайты. Сделано для того, чтобы клиент мог самостоятельно собирать посадочные страницы.

В личном кабинете реализовано три роли: обычные покупатели, мелкооптовые покупатели и сотрудники «Шинного бизнеса ПАО „Татнефть“ KAMA TYRES». Под каждую группу — свой функционал и фишки. Например, для сотрудников реализовали возможность купить здесь шины в рассрочку — сумма будет списываться с их зарплатного счёта (для этого сотруднику достаточно указать свой табельный номер).

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

На сайте реализовано три варианта оплаты: покупка в кредит через модуль «Хоум Кредит энд Финанс Банк и Кредитные системы» (частый сценарий при покупке колёс, как оказалось), оплата при получении наличными и платёж банковской картой.

Фишка сайта — анимированные слайды с параллаксом в промо-блоке. Заказчик может редактировать заголовки и описания, а на слайде с видео менять контент (подгружается с ютуба).

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