Спецпроект: промосайт для популярного ЗОЖ-бренда высокобелковых молочных напитков EXPONENTA

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

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

02/ Солюшн — комплексное исследование рынка / ресерч прямых и косвенных конкурентов / изучение брендбука компании / аналитика и сегментирование целевой аудитории / описание детализированных портретов / разработка позиционирования и формирование стратегии / определение наличия и последовательности блоков / разработка прототипа / наполнение прота текстовым контентом / проработка системы дизайна / UI-дизайн всех блоков и второстепенных элементов / кроссбраузерная валидная верстка / оптимизация скриптов и изображений / интеграция с CMS / комплексное QA QC тестирование / тест скорости загрузки / релиз

03/ Фичи — динамичное изображение флагманских продуктов на главном экране / яркий каталог с детализированными фото напитков / простой и удобный блок «Где купить» / выверенный копирайт без текста ради текста

Вызываем флоу эмоции с первого касания!

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

Погружение в философию бренда и hight-concept бренда.

EXPONENTA — популярный в Беларуси продукт с узнаваемой айдентикой, активно представленный на полках магазинов. Команда перманентно работает над повышением уровня узнаваемости бренда и ростом степени привязанности пользователей к продукту:

01/ ведение социальных сетей с действительно полезным для ЦА контентом,

02/ проведение офлайн мероприятий,

03/ сотрудничество с лидерами мнений.

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

Бизнес масштабируется и компания выходит на новые рынки. Задачи, которые стояли перед нами:

Презентация продукта новой аудитории — полноценное знакомство с линейкой напитков.

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

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

Из ключевых технических требований заказчика — максимально высокая скорость загрузки сайта:

- пользователь открывает страницу,

- знакомится с продуктом,

- выясняет, где и как его можно купить (об этом позже),

- переходит к этапу покупки.

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

Продукт. Распаковка бизнеса через бриф и интервью с командой EXPONENTA (в том числе с технологами и начальником цеха, чтобы углубиться в процесс производства), ресерч социальных сетей, просмотр видеоматериалов, изучение всех доступных аналитических данных. И конечно, дегустация! Чтобы вызвать эмоциональный отклик у аудитории, нужно по-настоящему хотеть поделиться ярким вкусовым экспириенсом. Всей командой остались в офисе после работы и попробовали каждый вкус из 5 линеек напитков.

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

Глобально — EXPONENTA «для всех и каждого»: кто восстанавливается после болезни, кто худеет и считает калории, у кого нет времени на полноценный завтрак или ужин, кто хочет отказаться от сладкого. И все же 70% целевой аудитории — девушки 25-34 года. Они ведут активный образ жизни, следят за трендами ЗОЖ, внимательно относятся к своему здоровью, ищут вкусный и полезный перекус. Когда портрет пользователя, для которого создаем сайт, сформирован и детально расписан, можно переходить к аналитике конкурентов.

Конкуренты. На российском рынке у продукта есть один прямой конкурент. Разложили на атомы его позиционирование, фишки, УТП, сильные и слабые стороны. Перешли к аналитике косвенных конкурентов: проанализировали 67 сайтов в смежных нишах, вдохновились крутыми идеями и составили блэк-лист решений, которые усложняют флоу, вызывают неоднозначные ассоциации и ломают логику восприятия контента.

Аккумулируем результаты предиктивной аналитики, специфику бренд-стратегии, требования заказчика и формулируем цель разработки:

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

Продумываем логику расположения блоков и элементов с учетом привычных для ЦА паттернов поведения в онлайне и отстройки от конкурентов. Наполняем блоки текстовым контентом по принципу концентрированной выжимки ключевых смыслов.

На выходе получаем:

01 Минималистичный главный экран с флагманскими продуктами в Full HD и конверсионной кнопкой, переводящей на блок «Где купить».

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

03 Блок «Где купить». Предусматриваем понятные табы с выбором страны и способа покупки (онлайн или офлайн). Так как степень вовлеченности в блок должна быть максимальной, уже на этом этапе прорабатываем виджет, по клику на который происходит переход к блоку с покупкой.

04 Яркий каталог с сочной презентацией каждой из пяти линеек. Качественные фото упаковок с читабельным текстом на них, краткие буллиты с преимуществами — чтобы не перегрузить внимание пользователя, но донести ценность USP.

05 Блоки, которые нативно иллюстрируют сегменты ЦА, подтверждая, что EXPONENTA — напиток для всех, а параллельно помогают пользователю подсознательно идентифицировать себя с одним из сегментов.

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

Тестим прототип на фокус-группе, выверяем логику и подключаем к работе UI-дизайнера.

Как вы помните, у бренда есть сформированный брендбук:

- фирменные цвета,

- шрифты,

- графические элементы,

- фирменная упаковка.

С этого момента и до релиза сайта гайдлайн EXPONENTA становится настольной книгой нашего UI-специалиста.

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

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

Фичи в дизайне, работающие на достижение целей разработки:

01 Яркий главный экран, который задерживает внимание и рефлекторно мотивирует на следующий скролл.

02 Ключевой тезис заказчика: не допустить даже намека на ассоциацию с йогуртами. Какой выход? Вместо привычных для такой тематики стоковых иллюстраций ягод и фруктов — только кастомные фото напитков EXPONENTA в Full HD качестве.

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

04 К разработке блока «Где купить» привлекаем UX-дизайнера, чтобы получить не только привлекательную, но и удобную реализацию. При клику на «Заказать здесь» предусмотрели не просто переход в соответствующий сервис доставки, а уже предзаполненную поисковую строку и релевантную выдачу. Во-первых, в заботе о пользователе выполнили ряд действий за него, во-вторых — повысили конверсию перехода в оформление заказа.

05 Акцентный каталог с понятной навигацией и супер детализированными иллюстрациями, который вызывает визуальный восторг и концентрирует внимание аудитории на бренде.

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

Верстаем сайт по принципу Pixel Perfect, чтобы верстка пиксель в пиксель совпадала с дизайн-макетом. 

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

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

На финише — комплексное QA QC тестирование и quality-чекап визуальной и технической составляющих. Дизайн-ревью — чтобы проверить, как воспринимается визуал в мобайле и десктопе, тест на фокус-группе — чтобы убедиться в прозрачности донесения смыслов и философии бренда, техническое тестирование — для выявления тонких моментов и передачи в релиз сайта без багов и ошибок.

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

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