Перевод продаж из маркетплейсов в собственный интернет-магазин: кейс TOTTI

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

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

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

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

С чего начинали

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

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

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

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

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

На первых этапах фокус на разработке помог выявить, что постепенное обновление сайта превращается в масштабный проект. Нужно было не просто изменить его внешний вид, а создать основу для самостоятельного e-commerce-канала, который сможет развиваться вместе с TOTTI.

Собрали весь путь покупки внутри одного сайта

В основе интернет-магазина стоит привычный e-commerce-маршрут:

1. каталог
2. товар
3. корзина
4. оформление
5. оплата
6. доставка.

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

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

Каталог

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

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

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

Карточка товара

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

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

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

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

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

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

Дизайн

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

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

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

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

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

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

Оформление заказа

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

Мы интегрировали интернет-магазин TOTTI с СДЭК, Boxberry, ЮKassa и МодульКассой.

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

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

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

Магазин, готовый к тому, что происходит после первой покупки

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

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

Для бизнеса это уже другой уровень работы с e-commerce. Можно возвращать пользователя, запускать персональные предложения, развивать CRM-механики и работать с повторными продажами на собственной площадке.

Что было под капотом

В проекте использовали Next.js, TypeScript, next-i18next, SASS/SCSS, PostCSS и Docker.

Redux Toolkit использовали для управления состоянием приложения, а инфраструктуру разработки выстроили вокруг GitLab и CI/CD.

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

Результат: у бренда появился свой канал продаж

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

В результате проекта мы:

1. Запустили собственный D2C-канал для прямых онлайн-продаж
2. Настроили интеграцию с ЮKassa, МодульКассой, СДЭК и Boxberry
3. Адаптировали сценарий покупки под мобильные устройства
4. Подготовили платформу для программы лояльности, акций и повторных продаж

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

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

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

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