Лендинг для мужского парфюма: как побудить к покупке духов онлайн?

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

Кейс Feromon 47 - одностраничный сайт для продажи лимитированной коллекции мужского парфюма
Кейс Feromon 47 - одностраничный сайт для продажи лимитированной коллекции мужского парфюма

Описание проекта

Feromon 47 - это духи, созданные итальянским парфюмером Маурицио Фурильясом. Они выпускаются лимитированной партией и исключительно для мужчин. Сайт должен убедить пользователя, что продукт уникальный, эксклюзивный, качественный, "импортный" и доступный для покупки в России (через сервис доставки на сайте или в магазинах-дистрибьютерах).

Трудности

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

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

Решение: флакон парфюма, создавая круги на ранее гладкой поверхности воды, даёт нам понять, что это не просто духи. Это аромат, который затронет каждого как притягательный феромон, распространяющийся подобно волнам и запоминающийся своей неповторимостью. Как «шлейф духов».

То самое фото, которое послужило источником вдохновения.
То самое фото, которое послужило источником вдохновения.

Этапы разработки

  1. Подготовка - 1 рабочий день
    - определение задачи;
    - выявление особенностей бизнеса;
    - составление плана работы и определение сроков.
  2. Исследование - 2 рабочих дня
    - анализ конкурентов;
    - подбор референсов;
    - анализ целевой аудитории.
  3. Прототипирование - 2 рабочих дня
    - проработка структуры сайта;
    - определение контентной части;
    - создание пути пользователя;
    - демонстрация интерактивного прототипа.
  4. Подбор шрифтов и цветовой палитры - 1 рабочий день
    - создание карты ассоциаций;
    - создание мудборда;
    - подбор шрифта;
    - подбор цветовой гаммы.
  5. Отрисовка макетов - 3 рабочих дня
    - создание дизайн-концепции;
    - отрисовка страницы;
    - анимирование макета;
    - согласование и утверждение дизайна.

Анализ конкурентов

Исследовались как крупные продавцы на рынке (онлайн-магазины и приложения), так и небольшие бизнесы с маленькими производствами. При анализе были выявлены следующие моменты:

  • закономерность - вокруг флакона на главном экране стараются располагать "составляющие аромата", например, фрукты, ягоды, травы и т.п. При одном взгляде на такую обложку становится понятно общее настроение духов. Но именно этот прием и обезличивает продукт за счет его повсеместного использования;
  • в крупных интернет-магазинах поиск можно осуществлять, исходя из лидирующей ноты в парфюмерной композиции. Например, мне нравится духи с кедром - вводим в поиск "кедр" или "кедровый" и нам выпадает список с парфюмами, в которых есть эта нота и она является основной. В описании в карточке товара пользователю снова напоминают о том, что это за аромат (мятный, персиковый и т.д.). Также используют разделение на верхние и нижние ноты. Это выглядит понятно, если составляющих немного. Но при большом количестве компонентов ценность этого приема теряется;
  • на многих сайтах есть возможность заказать мини-версию или получить пробник бесплатно - это значимо повышает уровень доверия потребителя;
  • на всех сайтах стремятся к чистому, лаконичному дизайну, акцентируя внимание именно на коробке с парфюмом (чтобы ничего не отвлекало от выбора);
  • сайты с анимацией значительно выигрывают в ранжировании, чем сайты без неё. Но! важно, чтобы это были простые эффекты, тяжелые приемы сильно снижают скорость загрузки;
  • на крупных маркетплейсах отзывы смотрятся органично и повышают доверие. На сайтах производителей они зачастую выглядят нелепо и неправдоподобно.

Референсы

Референсы, которые подходят концепции и отражают стилистику проекта. 
Референсы, которые подходят концепции и отражают стилистику проекта. 

Целевая аудитория

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

Целевой потребитель - мужчина, средних лет, с высоким уровнем достатка, уделяющий внимание деталям и предпочитающий эксклюзивную одежду, обувь и парфюм. Его гораздо сложнее убедить купить духи, так как необходимо привести больше аргументов. Такому покупателю будут важны: оригинальность парфюма, уникальность бренда, лимитированность аромата, качество продукта и быстрая, комфортная доставка. Устройство - ПК/смартфон.

Структура сайта (путь пользователя)

Целевое действие у одностраничного сайта всегда одно - купить продукт. Поэтому мы не даем иных кнопок для пользователя. *Исключение - покупка товара в магазине-дистрибьюторе - эта ссылка на карточку товара в выбранном магазине.
Целевое действие у одностраничного сайта всегда одно - купить продукт. Поэтому мы не даем иных кнопок для пользователя. *Исключение - покупка товара в магазине-дистрибьюторе - эта ссылка на карточку товара в выбранном магазине.

Карта ассоциаций

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

Мудборд

Мудборд на основе карты ассоциаций снова дает понять, что вариант с природой, джунглями и водопадами сильно не клеится с образом серьезного бизнесмена. Нужно что-то проще и спокойнее (идея с кругами на воде нашлась примерно через 10 мин))).
Мудборд на основе карты ассоциаций снова дает понять, что вариант с природой, джунглями и водопадами сильно не клеится с образом серьезного бизнесмена. Нужно что-то проще и спокойнее (идея с кругами на воде нашлась примерно через 10 мин))).

Шрифт и цветовая гамма

Лендинг для мужского парфюма: как побудить к покупке духов онлайн?

Почему именно эти шрифты?

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

Шрифт для основного текста - классическая Helvetica, хорошо сочетающаяся со многими шрифтами, основное требование к которой - удобочитаемость.

Лендинг для мужского парфюма: как побудить к покупке духов онлайн?

Выбор цвета обусловлен в первую очередь концептом проекта.

Черный - в мужском обществе символизирует силу, авторитет, влияние, спокойствие, умение принимать осознанные и взвешенные решения.

Фиолетовый и его оттенки - акцентный цвет. Цвет власти, таинственности и богатства. Отлично подходит для кнопок, иконок и элементов, требующих привлечения внимания.

Макет Десктоп

Главный экран
Главный экран

Итак, главный экран, построенный по классической схеме: картинка справа, текст слева. Понятный, простой интерфейс с минимумом деталей.

2 блок - ноты парфюма
2 блок - ноты парфюма

Тут я реализовала скромную, но и залипательную анимацию - при наведении на иконку с нотой парфюма, она оживает и становится цветной. Здесь скрыт и другой смысл - у каждого из нас аромат на коже раскрывается по-своему. У кого-то первой нотой будет цитрус, а у кого-то белый кедр. Яркая нота индивидуальна.

3 Блок - ассоциации. 
3 Блок - ассоциации. 

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

Блок 4. О создателе
Блок 4. О создателе

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

Блок 5. Преимущества
Блок 5. Преимущества

Повторяем прием с анимацией. Даем аргументацию по стойкости аромата (до 7 часов), концентрации (EDP) и особенностям аромата.

Блок 6. Выбор продукта
Блок 6. Выбор продукта

Самый важный блок - минимум кнопок и форм:
- показываем товар;
- называем цену;
- напоминаем главную ноту (свежий и цитрусовый аромат);
- даем возможность выбрать объем;
- количество флаконов;
- купить - переходим на страницу оформления доставки.

Блок 7. Акция
Блок 7. Акция

И еще одно условие заказчика - добавить на сайт блок с акцией (диффузор в подарок). Интересный момент, который был продуман клиентом - пробник в оффлайн-магазине можно получить только при предъявлении скриншота сайта. В онлайн - диффузор добавится автоматически. Так был решен вопрос с логистикой и поставщиками (+побуждаем заказывать на сайте без посредников).

Блок 8. Магазины-дистрибьюторы
Блок 8. Магазины-дистрибьюторы

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

Блок 9. Подвал
Блок 9. Подвал

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

Макет Мобил

В мобильной версии меню реализовано с помощью "бургера".
В мобильной версии меню реализовано с помощью "бургера".
Примеры остальных экранов
Примеры остальных экранов

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

Если вы хотите начать работать со мной, свяжитесь со мной в Телеграм.

А если вам интересен дизайн и нравится мой подход - подписывайтесь на мой канал в Telegram.

Спасибо за то, что прочитали эту статью! Не забудьте поставить оценку, это помогает мне стать лучше*)

22
Начать дискуссию