От фирменного стиля к цифровому продукту: разработка сайта для шинного ритейла

К нам обратилась компания «Горошина» — крупный поставщик автомобильных шин и дисков, который работает на российском рынке с 2014 года. Заказчик сотрудничает с ведущими брендами и дистрибьюторами, а также оказывает услуги шиномонтажа. Одним словом, это команда признанных экспертов в своей отрасли.

Запрос к Mobecan был такой: на основании брендбука и фирменного стиля разработать быстрый и привлекательный для клиентов сайт в формате интернет-магазина. При этом до начала проекта у «Горошины» никогда не было сайта-каталога.

Нам предстояло с нуля создать платформу, где пользователи смогут не просто смотреть ассортимент и делать заказы, но и подбирать шины под модель автомобиля. Кроме того, сайт должен быть готов к росту бизнеса. «Горошина» постоянно расширяет каталог, поэтому нужен интернет-магазин, который справится с растущей нагрузкой.

Отметим две особенности проекта: самописная CRM-система заказчика и обширный каталог товаров примерно на 40 000 артикулов. Их нужно было интегрировать с сайтом, чтобы обеспечить регулярное обновление цен и наличия товарных позиций.

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

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

Ключевые моменты в реализации проекта:

• разработка дизайна интерфейсов и прототипов страниц;

• адаптивная верстка;

• внедрение функционала на базе CMS «1С-Битрикс: Управление Сайтом»;

• настройка интеграции с самописной CRM;

• подключение необходимых внешних сервисов.

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

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

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

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

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

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

Шиномонтаж. В этом модуле описали услуги по установке шин, ремонту покрышек и балансировке колес. Добавили онлайн-запись в автосервис и калькулятор стоимости, чтобы клиент мог выбрать услугу и забронировать удобное время без звонка оператору. Разместили карточки с описанием оборудования. Они помогают привлекать клиентов: наличие современных стендов и станков говорит о качестве работы.

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

Интернет-магазин «Горошины» мы создавали на популярной CMS «1С-Битрикс: Управление Сайтом». Эту систему выбрали, потому что с ней легко подключать необходимые модули и интегрировать сайт со сторонними сервисами.

Самой трудоемкой частью проекта стала настройка взаимодействия с самописной CRM. При отсутствии готового модуля мы выполнили интеграцию через API и вручную наладили обмен данными. В режиме реального времени из CRM на сайт передаются: наличие товаров на складе, цены и артикулы. Десятки страниц и разделов интернет-магазина автоматически синхронизируются с системой складского учета.

Какие еще внешние сервисы интегрированы с сайтом «Горошины»:

• Платежная система «ЮKassa» — оплата онлайн-покупок через Систему быстрых платежей (СБП) или по QR-коду.

• Транспортные компании «ПЭК» и «Деловые Линии» — расчет стоимости и сроков доставки в регионы.

• Социальная сеть ВК — пользователь может войти в личный кабинет на сайте «Горошины» через персональную страницу во «ВКонтакте».

Эта функция облегчает выбор для покупателей и снимает часть нагрузки с консультантов «Горошины». Клиент указывает марку, модель, год выпуска машины и получает подборку подходящих шин и дисков. Пользователю доступна информация о совместимости и параметрах изделия, что снижает риск ошибки при заказе.

Ассортимент автомобилей постоянно обновляется, особенно в последнее время, когда на российский рынок массово заходят китайские производители. Это значит, новые модели авто нужно постоянно добавлять в модуль подбора шин. Мы автоматизировали процесс через интеграцию со сторонним источником: один раз в три месяца на сайт «Горошины» подгружаются карточки новых авто с партнерской платформы.

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

Модуль нужен покупателям, которые хотят заменить стандартные покрышки на аналоги другого типоразмера. Клиент вводит исходные параметры: ширину, профиль и диаметр шины. Калькулятор показывает, какого размера колеса можно поставить вместо «родных». Также пользователь видит, как при этом изменится сцепление с дорогой, уровень шума и расход топлива. 

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

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

Команде «Горошины» мы предоставили обучающий контент по работе с административной панелью платформы. Это нужно, чтобы заказчик в любой момент без участия разработчика мог менять информацию, ассортимент товаров и цены в интернет-магазине.

После завершения основной части проекта Mobecan и «Горошина» продолжают сотрудничать. Вот что мы делаем в рамках техподдержки сайта:

• обновляем лицензии;

• пополняем базу автомобилей для подбора шин;

• разрабатываем новые функции и совершенствуем модули;

• выполняем резервное копирование данных и восстановление сайта из бэкапов;

• устраняем технические неполадки, в том числе после сбоев или взлома;

• администрируем серверы и хостинг;

• контролируем оплату домена и SSL-сертификата.

В финале проекта заказчик получил полноценную онлайн-платформу для продаж и управления ассортиментом. При этом современный подход к дизайну выделяет сайт «Горошины» на фоне других интернет-магазинов шин и дисков.

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

Трафик. Сайт показывает стабильный рост вовлеченности. С момента запуска платформа собрала 963 000 просмотров страниц. При этом было 285 000 уникальных посетителей, а 37 000 пользователей возвращались снова.

Поведение. Метрики подтверждают качество UX-решений. Среднее время сессии составляет 2 минуты 45 секунд, а глубина просмотра — 3,74 страницы за визит. Сайт удерживает внимание пользователей, и они активно взаимодействуют с каталогом и сервисами.

Функционал. Анализ тепловых карт фиксирует интерес к основным пользовательским сценариям. Вот самые востребованные страницы: главная — 85 100 взаимодействий, подбор шин по авто — 20 700, калькулятор услуг шиномонтажа — 18 400. Наши разработчики корректно реализовали продуктовую логику сайта: быстрый подбор и удобную покупку.

Конверсия. Платформа превращает трафик в горячие лиды — показатель по добавлениям товаров в корзину составляет 1,48%. Это хороший результат с учетом сложности продукта, большого ассортимента и высокой конкуренции в отрасли.

Устройства. Покупателям удобно пользоваться интернет-магазином с любых гаджетов. 63% клиентов «Горошины» заходят на сайт со смартфона. Это критически важный показатель в электронной коммерции, где 65% покупок люди совершают с телефона. Интерфейс сайта адаптируется к мобильным устройствам и обеспечивает комфортный пользовательский опыт без разработки отдельного приложения.

Команда Mobecan гордится результатом и продолжает работать над тем, чтобы сайт приносил шинной компании «Горошина» максимальную пользу и оставался актуальным для пользователей!