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

В рамках проведения работ по улучшению конверсии в карточках товара было принято решение сделать ее интерактивную веб-версию. Цель простая: дать покупателю «потрогать» наш главный бонус еще до покупки и превратить статичный мануал в живой инструмент. У пользователя есть возможность ознакомиться с несколькими зонами и понять технику работы.

Маркетинговая эффективность:

- Покупатель “трогает” УТП до покупки, а не просто читает о нём в карточке товара. Это принципиальная разница - между “у нас есть такой документ” и “вот он, попробуй прямо сейчас”;

- Интерактив удерживает внимание дольше статичного изображения. Пользователь сам кликает, исследует зоны, переключает сцены. Вовлечение растёт, как и желание получить полную версию инструкции;

- Снижает барьер сомнения “а вдруг мануал бесполезный?” - страх самоустраняется, ещё на этапе принятия решения о покупке;

- Работает как нативное доказательство ценности продукта без прямых продажных формулировок;

- Легко масштабировать в полноценный продукт, интегрировать на сайт, в карточку товара, лендинг и так далее;

Стек и реализация:

Виджет написан на TypeScript, никаких фреймворков - чистый vanilla JS/TS. Никакого оверхеда, грузится мгновенно, не тащит за собой лишний хвост.

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

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

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

Качество и скорость:

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

Процесс работы:

Сам SVG рисовался руками через Illustrator - контуры мышц, хит-области, пути стрелок. На все ушло около 4 дней параллельно другим задачам. Вся остальная часть - логика, архитектура, модули, анимации - делалась через Codex.