iTAB — редизайн карточки товара
iTAB — российский магазин товаров для здоровья. Все экраны сняты с работающего сайта и приложения, товары настоящие. Я пересобрала карточку для веба и мобильного: выстроила информацию вокруг решения о покупке, добавила сигналы доверия и продумала состояния наличия.
- Воронка
- Реже уходят с карточки · NDA
- Покупка
- Больше добавлений в корзину · NDA
- Внедрение
- Весь каталог
Проблема
В категории БАДов решение о покупке особенно зависит от доверия, но карточка была слабым звеном воронки: люди уходили, не добавив товар в корзину. Польза, состав, лабораторные проверки, отзывы и наличие были разбросаны по странице и не помогали быстро оценить предложение.
Задача
Пересобрать карточку товара для веба и мобильного на примере категории БАДов: сделать так, чтобы с карточки реже уходили, собрать аргументы для выбора рядом с зоной покупки и продумать сценарий для отсутствующего товара.
Пользователи
Товары для здоровья выбирают внимательно. Перед покупкой человеку важно понять назначение и состав, проверить лабораторные подтверждения, сравнить варианты и узнать, что делать, если нужного товара нет.
Что изменилось
Карточка теперь следует логике решения о покупке: понять, подходит ли товар; проверить состав и подтверждения; сравнить варианты; купить. Даже если товара нет, сценарий не обрывается.
Аудит и конкуренты
Сначала проверила текущую карточку по вопросам, которые человек задаёт перед покупкой. Затем разобрала карточки конкурентов из смежных категорий. Оба анализа сошлись на одних и тех же проблемах.
Добавление в корзину
После нажатия кнопки было непонятно, добавился ли товар
Сигналы доверия
Отзывы, лабораторные проверки и исследования были разнесены по странице и не складывались в убедительную картину
Нет в наличии
Без альтернатив и подписки на поступление пользователь мог только уйти
Визуальный шум
Бейджи, плашки и маркеры конкурировали за внимание и мешали увидеть главное
1. Понятные состояния покупки
Я продумала два базовых состояния карточки. После добавления товара кнопка сразу превращается в счётчик: действие подтверждено, количество можно изменить на месте. Если товара нет, карточка предлагает подписку на поступление и альтернативы, поэтому сценарий не обрывается.
2. Доверие без перегрузки
Разделила источники информации по ролям: исследования объясняют свойства товара, а AI-сводка отзывов показывает, что покупатели отмечают чаще всего, и зона покупки остаётся свободной.
Подробности остаются вторым слоем: их можно открыть по запросу, не превращая карточку в длинную медицинскую статью.
3. Единая система сигналов
Бейджи, лабораторные подтверждения, категорийные маркеры и промоплашки я объединила в одну визуальную систему. Подробности о проверках открываются по запросу: информация доступна, но не занимает место постоянно.
Результат
После запуска метрики улучшились на всех изменённых шагах воронки.
«Нет в наличии» больше не тупик: часть посетителей продолжила путь через подписку на поступление или альтернативы, а не ушла; доля под NDA.
Одна система карточки: доверие, наличие и состояния покупки устроены одинаково во всех категориях.