Как визуал, текст и анимация управляют ощущениями пользователя: кейс AQTAYA

Заказчик

ООО «Национальная водная компания «Ниагара» производит и продает безалкогольную продукцию, более 25 лет на рынке и входит в топ-10 производителей б/а напитков России.

Задача

Недавно в портфеле ООО «НВК «Ниагара» появился новый бренд воды — AQTAYA, и Надежда, бренд-менеджер компании, обратилась к нам за разработкой имиджевого сайта.

Задача

ООО «Национальная водная компания «Ниагара» производит и продает безалкогольную продукцию, более 25 лет на рынке и входит в топ-10 производителей б/а напитков России.

В портфеле ООО «НВК «Ниагара» более десяти брендов, от питьевой воды до энергетиков. А недавно появился новый бренд воды — AQTAYA, и Надежда, бренд-менеджер компании, обратилась к нам за разработкой имиджевого сайта.

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

Решение

Разработали имиджевый лендинг, который передает позиционирование AQTAYA, его философию и ценности за счет слаженной работы текста, структуры и приёмов в дизайне.

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

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

Лендинг решил сразу несколько задач:

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

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

О том, как проанализировали конкурентов, составили мудборд и выстроили работу 

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

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

В итоге из интересных смыслов и анализа получился прототип-франкенштейн, который задал структуру:

• обозначить продукт;
• дать смысл;
• зафиксировать бренд;
• показать варианты продукта;
• объяснить, как он встраивается в жизнь;
• снять рациональные сомнения;
• показать производителя;

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

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

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

По реакции Надежды, бренд-менеджера, поняли, что верно нащупали направление и двинулись в сторону прототипа отражать смыслы бренда.

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

О структуре и дизайне проекта, которые отражают бренд AQTAYA

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

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

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

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

Второй блок формирует потребность и одновременно показывает философию бренда. Мы ориентировались на аудиторию, для которой вода — способ замедлиться среди дня. Поэтому погрузили пользователя в узнаваемый контекст: нескончаемый поток задач, общения, ответственности, и острая потребность выдохнуть.

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

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

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

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

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

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

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

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

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

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

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

Обычно такие преимущества читают по верхушкам, поэтому в блоке есть дополнительный акцент. На фоне расположено название производителя, а при скролле резко появляются 3D объекты с ключевыми фактами. Прием привлекает внимание и создает эффект неожиданности.

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

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

Результат: 

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

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

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

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

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

Перейти на сайт