The ACT
Дизайн и запуск нового интернет магазина популярного бренда уходовой косметики
О ПРОЕКТЕ
Продажи преимущественно шли через маркетплейсы, и команда решила открыть собственный канал: создать интернет‑магазин, который отражал бы ценности и эстетику бренда и был удобным для клиентов. Нужно было упорядочить навигацию по каталогу из более 200 товаров, спроектировать оформление заказа и внедрить механики вовлечения, которые повышали бы средний чек и лояльность.
ЗАДАЧА
The Act — российский бренд уходовой косметики, основанный в 2020 году в Ростове‑на‑Дону. За несколько лет бренд вырос от стартапа до крупного бизнеса с миллиардными оборотами и развивающейся розничной сетью.
РЕШЕНИЕ
Спроектировали и собрали интернет‑магазин с нуля: создали логичную структуру каталога, карточек товаров, корзины и оформления заказа. Особое внимание уделили эстетике: крупные атмосферные фото и видео подчёркивают натуральность и характер бренда. Добавили механики вовлечения и апсейла — истории с новыми товарами, сэмплы и подарки в корзине.
НА ЧЕМ ФОКУСИРОВАЛИСЬ?
Косметический e‑commerce отличается от классического ритейла: покупатель выбирает не только продукт, но и образ жизни, который за ним стоит. Визуальная подача, доверие к составу и простота выбора играют ключевую роль.
При этом бизнесу важно эффективно управлять большим ассортиментом, конвертировать трафик с маркетплейсов в покупки на собственном канале и наращивать средний чек через грамотные апсейл‑механики.
При этом бизнесу важно эффективно управлять большим ассортиментом, конвертировать трафик с маркетплейсов в покупки на собственном канале и наращивать средний чек через грамотные апсейл‑механики.
Каталог из 200+ товаров потребовал чёткой логики. Продумали фильтры по типу кожи, типу ухода и запросу: пользователь приходит не за конкретным названием, а с задачей — увлажнить, очистить, подойти для чувствительной кожи. Фильтры помогают найти подходящее средство быстро и без лишних усилий.
Навигация и структура каталога
01
The Act активно сотрудничает с блогерами и производит качественный контент. Добавили сторис на главной странице, интегрированные с каталогом: пользователь смотрит историю и сразу добавляет понравившийся товар в корзину, не выходя из просмотра. Так контент блогеров работает напрямую как точка продаж.
Контент как инструмент продаж
02
Сделали фокус на скорости принятия решения: галерея в превью, выбор позиции без перехода в карточку и упрощённая корзина сокращают путь от интереса до заказа. Количество действий стало меньше, сценарий — понятнее, что снижает количество брошенных корзин и повышает конверсию.
Быстрый путь к покупке
03
Сохранили единую логику сценариев на всех устройствах: корзина, фильтры и оформление заказа работают одинаково понятно в мобильной и на десктопе. Интерфейс спроектирован в логике mobile‑first: крупные карточки, быстрые фильтры и минимум кликов поддерживают привычные сценарии мобильных пользователей.
Единый опыт на мобильной и десктопе
04
ДИЗАЙН
ДИЗАЙН
The Act — бренд, в котором натуральность выражается не только в составе продуктов, но и в том, как бренд говорит с аудиторией. Изучили философию и ценности: минимализм, доступность и забота о себе без излишеств — и перевели их в визуальный язык сайта.
Интерфейс остаётся чистым и воздушным, а контент — крупным и атмосферным. Визуальная подача и сценарии взаимодействия работают вместе: помогают передать характер бренда и при этом не мешают пользователю быстро найти и купить нужное средство.
Интерфейс остаётся чистым и воздушным, а контент — крупным и атмосферным. Визуальная подача и сценарии взаимодействия работают вместе: помогают передать характер бренда и при этом не мешают пользователю быстро найти и купить нужное средство.
The Act — бренд, в котором натуральность выражается не только в составе продуктов, но и в том, как бренд говорит с аудиторией. Изучили философию и ценности: минимализм, доступность и забота о себе без излишеств — и перевели их в визуальный язык сайта.
Интерфейс остаётся чистым и воздушным, а контент — крупным и атмосферным. Визуальная подача и сценарии взаимодействия работают вместе: помогают передать характер бренда и при этом не мешают пользователю быстро найти и купить нужное средство.
Интерфейс остаётся чистым и воздушным, а контент — крупным и атмосферным. Визуальная подача и сценарии взаимодействия работают вместе: помогают передать характер бренда и при этом не мешают пользователю быстро найти и купить нужное средство.
МОБИЛЬНАЯ ВЕРСИЯ
Спроектировали мобильную версию в логике mobile‑first: большая часть аудитории косметического e‑commerce приходит именно со смартфона. Сценарии выбора товара, корзина и оформление заказа удобны прежде всего на мобильных, а логика ключевых шагов остаётся единой для десктопа и мобильных устройств — одинаковый бесшовный опыт на любом экране.
АДАПТИВНОСТЬ
ГЛАВНАЯ СТРАНИЦА
Главная страница построена на крупных атмосферных баннерах и интегрированных сторис, которые создают несколько сценариев входа в каталог с первого экрана. Баннеры ведут в новинки, линейки и промо‑разделы, а сторис с товарами позволяют сразу добавить понравившуюся позицию в корзину.
Такой подход задаёт настроение бренда, усиливает вовлечённость и превращает контент блогеров и собственные материалы в прямой инструмент продаж.
Такой подход задаёт настроение бренда, усиливает вовлечённость и превращает контент блогеров и собственные материалы в прямой инструмент продаж.
КАТАЛОГ
В листинге предусмотрели фильтры по типу кожи, типу ухода и задаче — чтобы пользователь мог выбрать средство под свой запрос, а не листать весь ассортимент вручную. Фильтры консистентны в десктопе и мобильной версии, вынесены в боковую панель — так листинг не перегружается, а конфигурацию фильтров легко менять под новые категории.
Вынесли подкатегории наверх — например, лицо / тело / волосы — чтобы упростить навигацию и ускорить поиск нужного раздела.
Вынесли подкатегории наверх — например, лицо / тело / волосы — чтобы упростить навигацию и ускорить поиск нужного раздела.
ВЫБОР ТОВАРА
ЛИНЕЙКИ
Добавили отдельный раздел линеек продуктов: здесь имиджевый контент и товары существуют вместе. Пользователь узнаёт про состав, философию и результат применения — и сразу переходит к покупке. Такой формат помогает бренду глубже рассказывать о продуктах и одновременно конвертирует интерес в заказ без перехода в каталог.
ПРЕВЬЮ ТОВАРОВ
Превью товаров мы спроектировали как важную точку принятия решения. В листинг встроены inline‑баннеры с подборками и акциями, которые не ломают сетку, но помогают направлять внимание к нужным категориям и коллекциям. В некоторых запускается короткое видео, которое подсвечивает детали продукта и усиливает имидж бренда: текстуру, упаковку, настроение.
КАРТОЧКА ТОВАРА
В карточке сосредоточили внимание на том, что важно для выбора ухода: добавили короткие сторис с продуктом и вынесли наверх ключевые описания — какой эффект даёт средство и за счёт каких ингредиентов это работает.
Остальные параметры и подробные характеристики открываются в боковых окнах, чтобы не перегружать первый экран, но оставаться доступными в один клик.
Для средств, которые входят в наборы или линейки ухода, предусмотрели возможность собирать комплект прямо из карточки. Это удобно для пользователей, которые хотят сразу взять полный ритуал, и одновременно апселлит сразу несколько товаров в одном заказе. В десктопной и мобильных версиях предусмотрели прилипающую кнопку добавления в корзину, чтобы возможность совершить целевое действие оставалась доступной в любой момент.
Остальные параметры и подробные характеристики открываются в боковых окнах, чтобы не перегружать первый экран, но оставаться доступными в один клик.
Для средств, которые входят в наборы или линейки ухода, предусмотрели возможность собирать комплект прямо из карточки. Это удобно для пользователей, которые хотят сразу взять полный ритуал, и одновременно апселлит сразу несколько товаров в одном заказе. В десктопной и мобильных версиях предусмотрели прилипающую кнопку добавления в корзину, чтобы возможность совершить целевое действие оставалась доступной в любой момент.
КОРЗИНА
Корзину сделали в формате бокового окна, которое выезжает при добавлении товара. Пользователь сразу видит, что позиция добавлена, может менять количество и удалять товары, не прерывая просмотр каталога. Оформление заказа доступно в один клик из любой точки сайта, риск брошенной корзины снижается — человек остаётся в потоке выбора.
В корзину встроили апсейл‑механики: сэмплы в подарок и подарок от суммы заказа. Пользователь видит, сколько осталось до подарка, и это стимулирует добавить ещё одну позицию — средний чек растёт нативно, без навязчивых баннеров. Один и тот же сценарий работает на десктопе и мобильных, что сокращает затраты на разработку и даёт единый опыт на всех устройствах.
В корзину встроили апсейл‑механики: сэмплы в подарок и подарок от суммы заказа. Пользователь видит, сколько осталось до подарка, и это стимулирует добавить ещё одну позицию — средний чек растёт нативно, без навязчивых баннеров. Один и тот же сценарий работает на десктопе и мобильных, что сокращает затраты на разработку и даёт единый опыт на всех устройствах.
ОФОРМЛЕНИЕ ЗАКАЗА
ОФОРМЛЕНИЕ ЗАКАЗА
Список товаров и оформление заказа объединены в одну страницу, процесс разбит на три понятных блока — данные, доставка, оплата.
К вариантам оплаты добавлены BNPL‑сервисы и оплата бонусами лояльности: пользователю проще принять решение о покупке, а бренд получает рост среднего чека и повторных заказов без усложнения сценария.
К вариантам оплаты добавлены BNPL‑сервисы и оплата бонусами лояльности: пользователю проще принять решение о покупке, а бренд получает рост среднего чека и повторных заказов без усложнения сценария.
Продуктовые сторис
Спроектирован блок продуктовых сторис по принципу рилсов: короткие вертикальные ролики о средствах, из которых товар можно сразу добавить в корзину. Такой формат планируется использовать под контент бренда и коллаборации с блогерами, чтобы живые обзоры и рекомендации работали не только на узнаваемость, но и на продажи.
Интерактивные сторис задумывались как инструмент апсейла: пользователь смотрит подборку по типу кожи или задаче, видит сразу несколько продуктов в действии и может добавить их в корзину прямо из сторис, увеличивая средний чек без ощущения навязчивых рекомендаций
Интерактивные сторис задумывались как инструмент апсейла: пользователь смотрит подборку по типу кожи или задаче, видит сразу несколько продуктов в действии и может добавить их в корзину прямо из сторис, увеличивая средний чек без ощущения навязчивых рекомендаций
ТЕХНОЛОГИЧЕСКИЕ РЕШЕНИЯ
Технологический стек подобран под крупный растущий e‑commerce: сайт работает на связке 1С‑Битрикс и 1С, одном из самых распространённых и надёжных решений на рынке с большим количеством готовых интеграций и возможностью масштабировать проект практически без ограничений.
Такой backend даёт устойчивость под нагрузкой, гибкость в работе с каталогом, ценами и акциями и хорошо подходит для дальнейшего роста бренда.
Часть страниц — имиджевые и контентные разделы, лендинги линеек и спецпроекты — реализована на low‑code‑решениях. Команда The Act самостоятельно собирает такие страницы, быстро запускает кампании и проверяет гипотезы, не привлекая разработчиков каждый раз.
Такой backend даёт устойчивость под нагрузкой, гибкость в работе с каталогом, ценами и акциями и хорошо подходит для дальнейшего роста бренда.
Часть страниц — имиджевые и контентные разделы, лендинги линеек и спецпроекты — реализована на low‑code‑решениях. Команда The Act самостоятельно собирает такие страницы, быстро запускает кампании и проверяет гипотезы, не привлекая разработчиков каждый раз.
ТЕХНОЛОГИИ
Давайте знакомиться.
Обязательные поля — только телефон и имейл. Остальное, на ваше усмотрение.
Нажимая на кнопку «Отправить» вы соглашаетесь с Политикой обработки персональных данных
РЕЗЮМЕ
Проделали масштабную работу по созданию интернет‑магазина The Act с нуля: спроектировали структуру каталога, карточек, корзины и оформления заказа, реализовали визуальную концепцию бренда через атмосферный контент и продуманные сценарии взаимодействия. Добавили механики вовлечения и апсейла — сторис с покупкой товаров, сэмплы в подарок, BNPL‑оплату — чтобы увеличить средний чек и конверсию.
После запуска изучили поведение реальных пользователей и на основе данных доработали отдельные экраны и сценарии. Сейчас продолжаем техническую поддержку и развитие проекта.
После запуска изучили поведение реальных пользователей и на основе данных доработали отдельные экраны и сценарии. Сейчас продолжаем техническую поддержку и развитие проекта.
УЗНАТЬ СТОИМОСТЬ
Мы изучим ваши задачи и цели, подберем решение и озвучим стоимость и сроки.
Нажимая на кнопку «Отправить» вы соглашаетесь с Политикой конфиденциальности
RUFORMAT®, 2008 — 2020 ©
МЕНЯЕМ БУДУЩЕЕ.™
КОМПАНИЯ
Давайте работать вместе.
Оставьте заявку.
Оставьте заявку.
№ 1 среди e-commerce разработчиков по версии Рейтинга рунета