Приглашаем на party: креативный лендинг для алкогольного завода NIVA со 100% выполнением ТЗ

Задача

Когда наш UI-дизайнер под бой курантов судорожно взбалтывал, но не смешивал пепел с шампанским и мечтательно шептал «Сайт для известного алкогольного бренда», он даже не догадывался, куда приведет этот запрос во Вселенную. Но! Кто не рискует – тот игристое не употребляет.

Заказчик – лидер рынка, крупнейший в России ликеро-водочный завод NIVA. Команда выпускает на рынок новый продукт для дерзкого импортозамещения ушедших мировых брендов – линейку уникальных ликеров из 18 вкусов для сегмента HoReCa и домашнего бара. Мощная презентация требует не просто лендинга, но громкого релиза сочного «барного меню»: ощущение бокала в руке, приятное покалывание на кончике языка и настоящий взрыв вкуса, задевающий осколками конкурентов.

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

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

1. Проинформировать рынок о новом продукте

2. Сформировать спрос на него

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

Ингредиенты взрывного диджитал продукта:

1. Команда Ninen – зумеры. Устраивают громкую вечеринку с амбициями взорвать все светские Telegram-каналы.

2. Заказчик – ответственный родитель. Контролирует каждый шаг и хочет «как лучше».

Как при таких вводных создать идеальный коктейль из креативного диджитал продукта, строгих требований и рефов? Открывайте заметки и записывайте рецепт!

Решение

Нашему PMу не нужно входить в ресурсное состояние и пить кофе с корицей по четвергам, чтобы сходу разбить задачу на этапы и выдать ЦЭУ каждому специалисту с точными  ̶г̶р̶а̶м̶м̶о̶в̶к̶а̶м̶и̶ дедлайнами. Принимать литры правок, параллелить  ̶з̶а̶к̶а̶з̶ы̶ процессы, поддерживать скорость работы команды и контролировать кассовые операции помогает не кофе, а безупречные hard и soft skills. Think about it.

Маркетинговая стратегия aka коктейльная база

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

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

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

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

- результаты подробного ресерча рынка,

- детально прорисованный портрет ЦА,

- требования заказчика.

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

Проектирование и копирайтинг aka поиск вкусового баланса

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

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

UI аналитика и мудборды aka проработка текстуры

Вы собираетесь на вечеринку, а мама говорит, что в этой футболке из дома не выпустит. Знакомо? Примерно такие юношеские флэшбэки ловил наш UI-боец, пока работал над визуалом.

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

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

Концепции первого экрана aka выбор гарнишей

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

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

Дизайн страницы и второстепенных элементов aka визуальный экстаз

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

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

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

Адаптивная верстка и тестирование aka презентация коктейля фокус-группе

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

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

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

Интеграция с CMS aka искусство миксологии

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

Результат

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