Комментарии
Интернет-магазин с личным кабинетом для официального дистрибьютора продукции KAMA TYRES — группы «Татнефть»
Результат Процесс
Рыцарям дорог
Сибирикс
Рыцарям дорог
Интернет-магазин с личным кабинетом для официального дистрибьютора продукции KAMA TYRES — группы «Татнефть»
Конкуренция на рынке шин бешеная — зайдите в любой специализированный магазин, и всё поймёте: миллиард вариантов разных брендов, характеристик и ценовых категорий. Если вы в них не разбираетесь, придётся полагаться на помощь консультанта или читать в интернетах отзывы. Но вообще-то на дворе век технологий, и можно даже не выходить из дома — а просто зайти на обновлённый сайт KAMA TYRES, чтобы легко и быстро подобрать шины. А после — тут же оплатить их картой и заказать доставку.
Задачи
Заказчик пришёл к нам с большим проектом: его текущий сайт был выполнен в соответствии с новым брендбуком, но функционала всё-таки не хватало. На обработку заказов уходило много менеджерского времени и ресурсов, а процесс покупки для пользователя превращался в квест: как таковой корзины на сайте не было — покупатели по ссылкам направлялись в Яндекс.Маркет.
Более того — это был тендер, где наш подход к документообороту по SCRUM использовать было нельзя: заказчику было принципиально зафиксировать бюджет до старта работ. Надо было заранее подготовить и подписать все приложения на все этапы. При этом делать единый договор, как при водопадной модели, не хотелось — еще на этапе продажи состав этапов уточнялся, а запуск проекта планировался поэтапный.
Анна
Финансовый директор
Мы подготовили рамочный договор и сразу шесть приложений на этапы работ. Пока мы согласовывали их с юристами заказчика, состав работ и смета успели поменяться несколько раз: уточнялись требования к проекту. Чтобы все сошлось, мы сделали расшивочную таблицу со сметой, которая автоматически скриптом обновляла данные в гугл-доках с Приложениями. Финальные документы аккаунт-менеджер готовил до двух часов ночи :) После этапов аналитики состав работ тоже, ожидаемо, менялся. Подписывали дополнительные соглашения, чтобы состав работ в документах и тот, что необходим по факту, — совпадали.
Дмитрий
Аккаунт-менеджер
ТД «Кама» входит в производственный холдинг ПАО «Татнефть». А у него, в свою очередь, собственная торговая площадка, на которой требовалось поучаствовать в аукционе. Мы не часто светимся на торговых площадках, но здесь не было сомнений — идём ва-банк. Я впервые собственноручно принимал участие в коварной игре на понижение — было весьма волнительно :)
Для больших корпораций веб-разработка — всегда непростой процесс, связанный с множественными согласованиями и большими единовременными инвестициями. Мы закрыли опасения насчёт разработки за счёт процессов, построенных на основе agile и scrum.

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

По MPV был жесткий дедлайн — на разработку первой версии сайта у нас было всего 3 месяца со всеми согласованиями. Это очень короткий срок, особенно при взаимодействии с большой компанией, где решение принимается через сложные обсуждения в рабочей группе.
Владимир
CEO & Founder
Горящие сроки. Много работ с постоплатами. Много заинтересованных лиц на стороне заказчика — оно и понятно, проект важный! Выстраивание отношений с подрядчиками Клиента по 1С, их курирование. Но всё в срок, всё в графике, все чётко. Вот что я называю ХОРОШЕЙ КООРДИНАЦИЕЙ.
Так как планировался поэтапный запуск, задачи проекта поделились на те, что мы реализовали в первую очередь, и те, к которым мы приступили на втором этапе.
Задачи 1-го этапа
1
Выделить клиента среди конкурентов за счёт дизайна.
2
Реализовать полноценный процесс покупки в новом интернет-магазине — пришел-увидел-купил.
3
Продумать пользовательский интерфейс (адаптивность, чёткие формы обратной связи, навигация по физическим точкам продаж).
4
Подключить автоматический расчёт стоимости доставки.
5
Подключить интернет-эквайринг (Сбербанк + онлайн-касса АТОЛ).
На 2-ом этапе мы реализовали многогородовость для показа актуальных остатков в торговых точках, а также адаптирующийся под разные аудитории личный кабинет (для пользователей, дилеров и более 20 тысяч сотрудников ПАО «Татнефть»). Добавили возможность покупки комплектов для грузовых шин и подключили конструктор «Битрикс.Сайты» для создания дилерами лендингов под свои нужды. А ещё — создали под каждый бренд отдельные не-текстовые страницы (на первом этапе мы ограничились типовыми).
Дмитрий
Аккаунт-менеджер
В рамках одного интерфейса мы закрыли потребности двух важных целевых групп: розничных покупателей и представителей мелкого опта. В процессе разработки проект масштабировался: у клиента теперь есть возможность реализовывать через интернет-магазин не только продукцию торгового дома «Кама», но и всего холдинга «Татнефть».
Аналитика
Чтобы оценить конкурентную среду, мы просмотрели 20+ интернет-магазинов производителей шин. И почти не нашли интересных решений: у всех есть какой-то промо-блок с акциями, почти у всех — подборщик шин. Но самое главное: интернет-магазин в его классическом понимании (выбрал, положил в корзину, оплатил картой, заказал доставку) — большая редкость. Обычно на сайтах конкурентов шины можно заказать только через менеджера.

Мы сделали ставку на функциональность и продумали структуру всех жизненно-важных разделов сайта с нуля, отрисовав прототипы для каталога, детальной страницы товара, корзины и главной страницы.
На главной не обошлось без подборщика шин (стандарт отрасли всё-таки), который помогает выбрать колёса не только по параметрам, но и по модели автомобиля — без него пользователь потерялся бы в ассортименте.
Дизайн
У заказчика был брендбук, фирменные цвета и формы которого мы развили в дизайн-концепцию. Идея промо-блока возникла еще на подготовке прототипов и легла в основу дизайна.
Артем
Разработчик
На мобильных устройствах меняется логика работы меню: пункты из раскрывающихся списка переезжают из области справа (как на десктопе) вниз. Если подпунктов в выпадающем меню слишком много, при клике на этот раздел страница автоматически скроллится. Пришлось повозиться с блоком, идущим сразу под промо на главной: поскольку на мобилках нет ховера, плашки наслаивались друг на друга — пришлось их уменьшать.
Навигация и поиск
В подборщике шин на главной можно указать параметры шин вашего автомобиля (если вы знаете, что ищете). А можно просто указать его модель и годы выпуска — система выдаст все подходящие варианты.
Евгений
Разработчик
Клиент сотрудничает с сервисом, у которого есть база всех марок автомобилей и подходящих им модификаций шин по трём параметрам (радиус, ширина, высота). Битрикс забирает себе их CSV файл — мы написали парсер, который разбирает его по кусочкам и отдаёт данные в админку в виде конкретных параметров: марка, модель, модификация, год, размер. Подборщик обращается к ним, чтобы найти все шины, соответствующие поисковому запросу.
Подборщик на главной — не единственный удобный инструмент. На странице конкретного товара пользователь может выбирать конкретные параметры (радиус, высоту и ширину). Если выбранная комбинация параметров возможна — значит, такие шины есть в наличии, и их можно добавить в корзину. Это решение помогает снизить издержки заказчика на обработку заказа — пользователь легко справится с подбором самостоятельно.
Евгений
Разработчик
В типичном фильтре пришлось бы сначала выбирать 1 параметр, а уже после остальные по очереди. Но если пользователь не знает, какие именно значения указывать, ему будет сложно фильтровать поэтапно. Поэтому от стандартного фильтра мы отказались: стартовым может быть любой параметр — хоть радиус, хоть ширина, хоть высота. Наш подборщик выдаст подходящие варианты с их учетом.

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

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

В каталоге Камы мы предлагаем пользователю сначала выбрать сезон и бренд, после — один из 3−4 вариантов моделей шин (они же — товары). И только потом посетитель погружается в тонкости — радиусы, ширину и высоту — в карточке товара (здесь товары превращаются уже в торговые предложения).
Для грузовых шин своя специфика — они обычно покупаются комплектом: сама шина, плюс ободная лента, плюс камера. Просто покрышку без камеры купить нельзя, но возможны варианты: покрышка+камера+ободная лента либо покрышка+камера, а ободная лента — отдельно. Наш функционал это учитывает: в карточке конкретной шины есть чек-боксы.
Выбор товара и сравнение
Евгений
Арт-директор
Наша задача — показать товар ТД «Кама» лицом: что он крутой и соответствует мировым стандартам. Поэтому мельчить в карточке не стали: товар во весь экран, во всей красе. Чётко и по делу, ничего лишнего.
Товары можно добавлять к сравнению. Список для сравнения не ограничен количеством: добавляй шины хоть до бесконечности. При этом в таблице можно оставить только отличающиеся параметры, переключив тумблер — это поможет быстрее сориентироваться: пользователю не придется перечитывать все-все характеристики.
Интеграции
Чтобы интернет-магазин начал приносить прибыль сразу после запуска, мы настроили эквайринг Сбербанка и интегрировали способы доставки на выбор: самовывоз или доставку транспортной компанией (ПЭК или Деловые линии).

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

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

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

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

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

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

Из интеграций для удобства самого заказчика — интеграция с конструктором Битрикс24. Сайты. Сделано для того, чтобы клиент мог самостоятельно собирать посадочные страницы.
Андрей
Разработчик
С конструктором Битрикс24. Сайты заказчик сможет создавать крутые лендинги самостоятельно. Правда, не все стандартные битриксовские блоки вписывались в нашу дизайн-концепцию: пришлось писать свои — для них подключаются собственные стили и скрипты.
Личный кабинет
В личном кабинете реализовано три роли: обычные покупатели, мелкооптовые покупатели и сотрудники холдинга «Кама». Под каждую группу — свой функционал и фишки. Например, сотрудники могут купить здесь шины в рассрочку — сумма будет списываться с их зарплатного счёта (для этого сотруднику достаточно указать свой табельный номер).
В личном кабинете для дилеров настроили фильтр по заказам — можно искать по цене, номеру и статусу заказа. Варианты статусов и их цветовые индикаторы заказчик может задавать в админ-панели. А чтобы легче было найти свой заказ, в поле с номером мы настроили автозаполнение.
Евгений
Разработчик
Удивительно, но в админке Битрикса фильтр по маске доступен для любых полей, кроме ID заказа, а именно оно нам было нужно для фильтрации. Из-за этого банальная задача на 15 минут превратилась в эксперименты на 2 часа — мы нашли обходной путь, как это реализовать.
Удобные способы оплаты
На сайте реализовано три варианта оплаты: покупка в кредит через модуль Сбербанка (частый сценарий при покупке колёс, как оказалось), оплата при получении наличными и платёж банковской картой.
Анимации
Фишка сайта — анимированные слайды с параллаксом в промо-блоке. Заказчик может редактировать заголовки и описания, а на слайде с видео менять контент (подгружается с ютуба).
На этапе дизайна мы придумали крутую фишку для каталога — анимацию выкатывания колеса в карточке. Но когда выгрузили реальную базу, получилось забавно: все фото товаров оказались почему-то сделанными не в анфас, а в профиль. И анимация смотрелась очень смешно :) В итоге этот эффект мы оставили только для товаров без фото, а к остальным применили зум по ховеру.
Как планировалось
Как получилось с реальным контентом
Иван
Руководитель проекта
Проект сделан так, чтобы сразу приносить прибыль клиенту: есть удобный подборщик, структурированный каталог, интеграция с онлайн-кассами АТОЛ и транспортными компаниями, быстрые платежи и покупка в кредит.
Готовый проект