Креативный сайт-каталог для крупнейшего в России ликеро-водочного завода NIVA

Practice-based опыт команды Ninen подтверждает: круто упаковать можно только тот продукт, который понимаешь на 100%. В поисках понимания отправляемся на завод:

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

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

• офферы,
• позиционирование,
• структура,
• лингвистические
• и стилистические фишки.

Формируем подробную Mind Map c проверенными рецептами и новаторскими идеями.

Исследуем ЦА. Неплохой Лонг-Айленд могут смешать везде, а вот создать нужный гостям вайб — искусство. Изучаем соцсети, пишем комменты, общаемся с топовыми барменами и частыми гостями модных тусовок, чтобы собрать боли и возражения. Оказываемся в закрытых списках лучших вечеринок города (да, у нашего маркетолога есть связи на все случаи жизни), растворяемся в энергетике, становимся частью ядра ЦА и начинаем мыслить как они.

В результате в шейкер отправляются:

• результаты подробного ресерча рынка,
• детально прорисованный портрет ЦА.

Маркетинговая стратегия готова! Пробуем. Отличная база, которой самое время добавить пикантности.

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

К слову о вовлеченности.

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

Наглядный пример. Пользователи заходят на сайт, чтобы пополнить бар перед шумной домашней пати. А какая вечеринка без приготовления коктейлей by yourself? Вывод — проектируем отдельный блок и простые фильтры для экспериментов с ликерами NIVA. Спойлер: блок имеет самый высокий коэффициент вовлеченности без просадок. А интеграция сайта с CMS — чит-код для регулярного обновления коктейльных сетов в несколько кликов и реального повода добавить сайт в закладки.

Можно мне Кровавую Мэри без томатного сока, пожалуйста? Примерно так копирайтер воспринимает ТЗ заказчика «Яркий промосайт с минимумом текста». Вспоминаем вечное «Если судьба преподносит тебе лимон, сделай из него лимонад», и заставляем любые ограничения работать на себя. Идеально выверенные фразы без букв ради букв, незамутненное послевкусие каждого предложения — точное попадание в ожидания команды NIVA.

Сформировать незабываемый визуальный образ алкогольного продукта в онлайне? Звучит интригующе! Но есть нюанс: фантомный пинтерест в голове заказчика, который с безупречной точностью должен быть перенесен в реальность.

Чтобы однозначно отстроиться от визуальных образов конкурентов и получить представление о ситуации на рынке, выполняем полноценное UI-исследование:

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

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

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

Подключаем к работе лид-дизайнера, проводим многочасовые дискуссии в зуме, учитываем позицию заказчика, приводим результаты аналитики и подкрепленные данными аргументы и… Cheers! Ловим общий вайб и начинаем разговаривать с заказчиком на одном визуальном языке.

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

Предлагаем решения с кардинально разными концептуальными идеями, компоновками элементов, смысловыми и визуальными акцентами, графическими фишками.

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

Заказчик выбирает концепцию, на смену Мохито приходит Пина Колада, и дизайнер берется… нет, не за кисти, а за изучение законодательства. Тематика 18+, а значит, есть ограничения по визуалу: например, изображения людей, употребляющих алкоголь, (да даже просто руки с эстетичными бокалами) на сайтах алкогольных брендов строго запрещены.

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

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

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

Финишная прямая! Верстальщик приступает к работе в лучших традициях Pixel Perfect.

И тут новый вызов: дизайнер отстаивает каждый пиксель роскошных Full HD картинок, а верстальщик топит за производительность.

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

В это время PM уже ставит задачку на тест. Проводим комплексное QA QC тестирование на разных устройствах и разрешениях экранов с учетом пользовательского опыта ЦА, и обязательно в браузерах последних версий. Проверяем соответствие анимации и функциональности всех элементов подготовленному ТЗ, замеряем скорость загрузки, оптимизируем скрипты и изображения.

На несколько часов сами становимся адептами home parties и тестим сайт как ядро ЦА. Тестировщик оформляет заказ на сайте, а дизайнер играет с фильтрами, чтобы составить идеальную коктейльную карту для вечеринки в субботу.

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

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