Тофрис

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

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

Интернет-магазин должен был решить сразу несколько задач:

Дополнительным критически важным требованием стала интеграция с существующей учетной системой 1С, в которой уже велись остатки, цены и заказы. Онлайн-платформа не должна была становиться «отдельным ресурсом» — она должна была органично встроиться в текущие бизнес-процессы, автоматизировать рутину и снизить нагрузку на менеджеров.

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

Таким образом, проект предполагал создание не просто сайта, а полноценной e-commerce системы, способной масштабироваться, поддерживать рост продаж и работать как для B2C-, так и для B2B-аудитории.

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

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

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

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

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

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

Далее пользователь видит блок с преимуществами компании. Он отвечает на ключевой вопрос «почему стоит покупать именно здесь» и формирует первичное доверие. Быстрая доставка, бонусная программа, клиентский сервис и гарантия качества вынесены в отдельный визуальный акцент, чтобы пользователь получил эти аргументы в первые секунды взаимодействия с сайтом.

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

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

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

Каталог стал центральным элементом проекта, так как именно здесь пользователь проводит большую часть времени и принимает решение о покупке. В случае с автокомпонентами особенно важно быстро сузить выбор и получить релевантные позиции без лишнего поиска.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Личный кабинет был расширен по сравнению с предыдущей версией сайта и стал полноценным инструментом взаимодействия с брендом. Его структура выстроена так, чтобы пользователь мог быстро получить доступ к ключевым данным без лишней навигации.

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

Блок «Текущие доставки» спроектирован как быстрый обзор активных заказов. Каждая карточка показывает ключевые данные: номер и дату заказа, сумму, актуальный статус и превью товаров внутри заказа. За счет такой структуры пользователь за несколько секунд понимает, какой заказ на каком этапе находится, и может быстро перейти к просмотру подробной информации. Формат карточек и горизонтальная навигация позволяют удобно работать сразу с несколькими заказами, что особенно важно для клиентов с регулярными закупками.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В совокупности эти интеграции сделали процесс обработки заказов более быстрым, управляемым и предсказуемым для бизнеса.

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

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

В результате проекта компания «Тофрис» получила не просто интернет-магазин, а полноценный цифровой канал продаж и коммуникации с клиентами. Новый сайт позволил расширить географию продаж, снизить зависимость от офлайн-канала и систематизировать работу с заказами. Благодаря интеграции с 1С, CRM Битрикс24 и Telegram, внутренние процессы стали максимально автоматизированы — от приема заказов до их обработки и передачи в бухгалтерию.

Конкретными результатами нашей работы по разработке интернет-магазина для компании «Тофрис» стали:

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

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