Контакты
Главная · десктоп
2023Интернет-магазин косметики собственного производстваUX/UI-дизайн, разработка

COCOSBEAUTY: магазин натуральной косметики, который показывает состав, текстуру и человека за брендомCOCOSBEAUTY

  • Web
  • Mobile
  • Косметика
  • E-commerce
Главная · десктоп
01 / 04
Задача

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

Решение

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

Сроки

3 недели

Стек
  • Joomla
  • Bootstrap 5
  • jQuery
  • Owl Carousel
  • AOS
  • GTranslate
Результат

Магазин на 26 товаров в шести категориях с корзиной, бокс за 13 000 ₽ с возможностью собрать свой набор, −10% на первый заказ за подписку на рассылку и переход на маркетплейсы для тех, кому так привычнее. Английская версия включается флажком в шапке.

Главные фишки

01

Каталог на одной странице

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

02

Состав вместо обещаний

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

03

Лицо бренда

Дарья Морунова рассказывает о бренде в видео, её подпись прорисовывается на экране линией, а цитата «Все женщины красивы» занимает отдельный экран. Рядом пять вертикальных роликов: продукт в руках, текстура, нанесение — то, чего не видно на фото с маркетплейса.

04

Повод купить здесь

Подарочный COCOS BOX с пятью продуктами и сборкой набора на выбор, промокод −10% на первый заказ за подписку и условия для дилеров в подвале. А тем, кто привык к маркетплейсам, сайт сам даёт ссылки на Золотое Яблоко и Wildberries.

26товаров в шести категориях
8ингредиентов с фото и описанием
5видео с продуктом в руках

Сделаю похожий проект для вас – сам, от макета до запуска

Ключевые экраны

COCOSBEAUTY: Первый экран
COCOSBEAUTY: Основные компоненты
COCOSBEAUTY: Видео и основательница
COCOSBEAUTY: COCOS BOX
01Цель: передать настроение бренда за секунду

Первый экран

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

  1. 1На фоне видео с листьями монстеры, поверх — логотип во всю ширину и слоган «Love. Cocos. Beauty.»: тропики и кокос из названия без лишних слов.
  2. 2Меню — это категории ухода. Каждый пункт прокручивает страницу к своей витрине, рядом корзина и переключатель языка.
  3. 3Соцсети бренда всегда под рукой: VK, Telegram и YouTube у правого края.
  4. 4Первая витрина — новинки. Метка NEW, название, назначение, цена и кнопка «Купить» прямо на карточке, без перехода на страницу товара.
02Цель: объяснить, за что платить

Основные компоненты

Между витринами — разбор состава, ради которого бренд и выбирают.

  1. 1Заголовок называет конкретный продукт: не «натуральная косметика» вообще, а что лежит в банке Body Scrub.
  2. 2Продукт снят как в рекламе: банка, лист монстеры и всплеск молока. Тот же приём повторяется у геля для душа ниже по странице.
  3. 3Четыре ингредиента, у каждого фото и короткая польза: кокосовая стружка отшелушивает, масла ши и миндаля питают, рисовая пудра выравнивает, витамин Е держит влагу.
03Цель: показать продукт вживую и человека за ним

Видео и основательница

То, чего нет на маркетплейсе: текстура в движении и история бренда от первого лица.

  1. 1Пять вертикальных роликов: продукт в руках, текстура, нанесение. Формат как в сторис, привычный для аудитории.
  2. 2Розовый акцент в заголовке тот же, что на упаковке и кнопках «Купить».
  3. 3Дарья Морунова рассказывает, что Cocos — это ещё студия со своими технологиями и школа для бьюти-мастеров: косметику делают люди, которые сами ей работают.
  4. 4Видеообращение основательницы и её подпись, которая прорисовывается линией при появлении блока.
04Цель: поднять средний чек

COCOS BOX

Готовый подарок вместо одной баночки и короткие витрины для остальных категорий.

  1. 1Наполнение бокса нарисовано линейными иконками: мыло для бровей, баттер, крем для рук, гель для душа и масло для загара.
  2. 2Рядом аргумент про собственное производство и статус ЭКО-продукта и обещание собрать набор из любимых продуктов покупателя.
  3. 3Цена 13 000 ₽ и кнопка «В корзину» на одной линии: бокс покупается так же, как обычный товар.
  4. 4Ниже три короткие витрины рядом: для рук, для душа, для лица. Маленькие категории не растягивают страницу отдельными блоками.

Нужен похожий проект?

Расскажите о задаче, и я предложу решение и сроки.

Следующий кейсENDIGOСайт марки профессиональной автохимии