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

1. Вводная задача от заказчика, проблематика, цели

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

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

После этого вывели сам продукт крупным планом и сделали акцент на деталях:

• необычная форма;
• эстетика дизайна;
• чистота вкуса.

Мы сознательно замедляем темп страницы и даем аудитории возможность рассмотреть продукт.

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

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

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

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

3. Результаты сотрудничества

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

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

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

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

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