Разработка сайта для производителя алкогольных напитков — Niva Distillery

презентация бренда через интерактивный динамичный дизайн
Сайт для производителя алкогольных напитков
  • регион: Россия
  • вид сайта: Промосайт, сайт-каталог
  • дата релиза: май, 2023

Заказчик: лидер рынка, крупнейший в России ликеро-водочный завод NIVA

Три поинта о задаче:

  • Амбициозный проект, нацеленный на осуществление дерзкой стратегии импортозамещения в отношении ушедших с рынка мировых брендов
  • Новый продукт — линейка уникальных ликеров из 18 вкусов, предназначенных для сегмента HoReCa и домашних баров
  • Цель — не просто создание презентационного диджитал-продукта, но и яркий дебют на рынке, отстраивающий от конкурентов и стимулирующий конверсию

Заказчик стремится к тому, чтобы продукт стал не просто напитком, а частью уникального и неповторимого опыта, ценного как для профессиональных барменов, так и для любителей экспериментировать с коктейлями на домашних вечеринках. Значит, кроме разработки эффективного сайта для алкогольной продукции, предстоит мощный релиз, который создаст атмосферу party вокруг «барного меню» и вызовет яркий интерес у целевой аудитории.

Фиксируем. Вызвать эмоциональный отклик у потребителей, предоставив им не просто напиток, но осязаемый экспириенс

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

Цель — установить прочную эмоциональную связь пользователей с брендом и:

1. Информировать рынок о новом продукте по грамотной маркетинговой стратегии

2. Сформировать спрос через мета креативный дизайн-инжиниринг

3. Стимулировать интерес и мотивировать на покупку интерактивными элементами

4. Создать аутентичный образ бренда в онлайне

Ингредиенты для создания выдающегося цифрового продукта: экспертиза и practice-based опыт, усиленные экспериментальным креативом

1. Ninen – кроссфункциональная in-house & full-time команда нишевых экспертов, стремящихся создать уникальный продукт и взорвать тренды медиа, фиксирующих реальные KPI и миксующих реальные данные с живыми эмоциями

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

Head of PM лично подключился к организации работы на проекте, управлению рисками и связал команду точными коммуникационными потоками, не упуская контроль за сроками и бюджетом. Для этого наш проджект не загадывает желания под бой курантов, не пьет кофе с корицей по четвергам и не медитирует для потоков и ресурсов — вместо этого он юзает каждый soft и hard skill, дотошно совмещая ТЗ с системным подходом и параллельно мотивируя экспертов на продуктивность и позитив.

Шаг 1. Формирование маркетинговой стратегии — собираем ингредиенты в коктейль «Сайт-каталог по сложным данными на реальной экспертизе и с тонкой ноткой креатива»

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

Мы убеждены, что только тщательно изучив продукт, можно качественно его продвигать. Поэтому отправляемся на завод, общаемся с сотрудниками, следим за всем процессом производства — от выбора сырья до розлива по бутылкам, дегустируем ликеры (все, конечно, в профессиональных целях!)

Чтобы создать новый напиток, необходимо глубоко понимать особенности коктейльной индустрии. Анализируем сайты конкурентов, изучаем их офферы, позиционирование, структуру и стилистические особенности. На основе полученных данных формируем детальную Mind Map с проверенными рецептами и инновационными идеями.

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

Шаг 2. Филигранное проектирование и точный копирайтинг для идеального вкусового баланса

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

Разрабатываем специальный блок и простые фильтры для экспериментов с ликерами NIVA. Хотите приготовить коктейль — рецепты уже собраны. Получаем высокий уровень вовлеченности пользователя. Кто фоткает экран, кто записывает на бумажку, а кто скринит — каждое поколение найдет себе кое-что по вкусу. Интеграция сайта с CMS позволяет легко обновлять коктейльные сеты и предоставлять пользователю возможность сохранить сайт в закладки.

Шаг 3. UI аналитика и мудборды для проработки текстуры

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

  • проводим UI-исследование, анализируем стили и приемы конкурентов, изучаем предпочтения ЦА в визуальном отношении и определяем вектор развития
  • учитываем визуальные ожидания заказчика, стремясь соответствовать его образам и айдентике бренда

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

Шаг 4. Концепции первого экрана в философии гипер персонализированного дизайна, основанного на данных, смыслах, бизнес-целях

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

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

Шаг 5. Дизайн страницы и всех второстепенных элементов с поправкой на юридические аспекты и фокусом на эффектность

После выбора концепции заказчиком, на смену Мохито приходит Пина Колада, а наш дизайнер, вооружившись не кистями, а законодательством, начинает исследование в рамках тематики 18+. 

Объясним: существуют ограничения по визуальному контенту. Изображения людей, употребляющих алкоголь, строго запрещены на сайтах алкогольных брендов. Мы внимательно изучаем законодательство и консультируемся с юристами, чтобы учесть все нюансы и избежать возможных блокировок.

Наша цель по ТЗ — создать яркий промосайт с сочными иллюстрациями. Однако, где взять эффектные фотографии, соответствующие визуальной концепции? Заказчик высылает прямиком в офис всю новую линейку ликеров, а мы — обращаемся к профессиональному фотографу. Выстраиваем свет, подбираем ракурсы — вот и получился уникальный, не стоковый контент. Дизайнер получает возможность создать кастомный контент, воплощая в реальность образы, заставляющие пользователей ощущать атмосферу вечеринки. Результат — изображения, погружающие в атмосферу, которые ощущаются на всех уровнях чувств.

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

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

Шаг 6. Адаптивная pixel perfect верстка и комплексное QA QC тестирование

Мы приближаемся к завершающему этапу! Верстальщик ведет работу, следуя лучшим практикам Pixel Perfect. Однако перед нами встает новое испытание: дизайнер настаивает на каждом пикселе изображений Full HD, в то время как верстальщик выступает за оптимизацию производительности. Умело балансируем между визуальными и техническими требованиями, достигая идеального качества изображений и сохраняя высокую скорость загрузки сайта. Даже при нарастающем напряжении у верстальщика, результат превосходит ожидания.

Тем временем, менеджер проекта уже готовит новую задачу. Проводим комплексное QA QC тестирование на различных устройствах и экранах с учетом опыта целевой аудитории и используемых ими браузеров последних версий. Проверяем анимацию, функциональность, скорость загрузки, оптимизируем скрипты и изображения. Углубляемся в процесс, тестируя сайт как представители целевой аудитории: тестировщик размещает заказ на сайте, а дизайнер настраивает фильтры для создания идеального коктейльного меню. Менеджер проекта уверенно завершает этап, выдавая задание на интеграцию сайта с CMS.

Шаг 7. Интеграция с CMS: искусство миксологии

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

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

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

Используем ключевые технологии
стекподбираем наиболее эффективный стек под конкретный проект
  • проектирование и дизайн: Figma / Axure RP / Adobe Photoshop / Adobe Illustrator / Adobe After Effects
  • frontend: HTML / CSS / JavaScript
6 специалистов работали над проектом
Head of PM параллелил итерации разработки, senior маркетолог погружался в ЦА, middle+ копирайтер упаковал сложные смыслы в емкие тезисы, middle UI-дизайнер создал эмоциональный визуал, senior frontend верстал сложные анимации, senior backend интегрировал с CMS

Больше продуктов с эмоциональным дизайном и маркетингом повышенной вовлеченности

Синергия экспертизы и креатива в каждом проекте
  • 100+

    приложений разного масштаба

  • 50+

    ниш охватывают кейсы

  • 14

    международных наград за кейсы

Подготовим точное коммерческое предложение
с расчетом стоимости и сроков проекта

Сделаем расчеты с учетом маржинальности и конверсии. Проанализируем вашу задачу, построим гипотезы с конкретными прогнозами гарантируемых нами KPI

Расчет стоимости и СРОКОВ РАЗРАБОТКИ вашего проекта за 5 минут

Нажмите
для расчета