Как мы сделали сайт для БАДа, который говорит языком науки и доверия

К нам обратился производитель БАД «Боноферлат» — это такое инновационное средство для лечения железодефицита. Нам нужно было презентовать этот БАД для целевой аудитории через сайт, понятно объяснив, как он работает и кому оно надо.  У клиента были какие-то базовые наработки по текстам и даже пдф-презентация но четкой стратегии для сайта не было. — был только запрос «сделать сайт современным, интерактивным, продающим и при этом образовательным».  Целевая аудитория — люди с дефицитом железа (все мы там будем…): от тех, кому «Боноферлат» назначил врач, до тех, кто заботится о здоровье самостоятельно.  Звучало интересно и мы принялись за дело.

Задачи, который сайт должен был решить:

- Донести рациональные преимущества продукта: доступность, эффективность, безопасность;

- Подчеркнуть технологичность, инновационность и европейское качество БАД, при этом делая акцент на реальную пользу для человека;

- Подчеркнуть эмоциональные выгоды: энергия, ощущение бодрости, улучшение самочувствия;

- Сделать сложную научную информацию доступной и понятной широкой аудитории;

- Объединить образовательную и промо-функцию сайта.

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

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

Во-вторых, ее можно условно разделить на два типа:

• Рациональная — те, кто принимает продукт по рекомендации врача и ищет доказательность.

• Эмоциональная — те, кто просто хочет больше энергии и лучшего самочувствия.

Именно на этом разделении мы построили три концепции, каждая из которых раскрывала «Боноферлат» с разных сторон.

1. «Ты можешь больше» — эмоциональный заряд

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

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

Главная цель концепции — не просто рассказать о продукте, а создать связь с пользователем на уровне ощущений. Показать, что «Боноферлат» влияет не только на показатели крови, но и на то, как ты просыпаешься утром, как думаешь, двигаешься и живешь.

2. «Точная формула» — рациональный подход

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

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

Главный принцип — точность без перегрузки терминами. Именно эту концепцию клиент выбрал за основу финального сайта.

3. «Путешествие железа» — образовательный сторителлинг

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

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

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

«Хотя я чаще работаю с другими нишами, я поймала своего рода «фармацевтическое вдохновение», поэтому работа над текстом шла достаточно легко. Основной сложностью было понятно рассказать о продукте, обо всех этих микросомах и липосомах, доступно о научном, но не скатываясь в панибратство. Плюс, как человек с железодефицитом, я являюсь целевой аудиторей сайта: симптомы нехватки железа писала с себя. Так что надеюсь, кто-то уже воспользовался нашим советом, и пошёл проверять гемоглобин и ферритин!»

Прототип получился объемным: он включал блоки о железодефиците, его влиянии на организм, симптомах и стадиях, рекомендации по приему, а также подробности о производстве и инновационной формуле «Боноферлата».

Особое внимание мы уделили образовательной составляющей: посетитель узнавал больше, чем ожидал, о роли гемоглобина, ферритина и значении железа для здоровья и энергии. Информацию дополняли экспертные статьи и удобный FAQ, чтобы каждый мог получить полное представление о БАД и ее эффекте.

На этапе дизайна ключевой задачей было гармонично соединить образовательный контент и визуальные элементы. Мы выбрали серо-синие градиенты, которые отсылают к медицинской стерильности и инновациям, на их фоне контрастно выделялись капсулы, упаковка БАД и эритроциты.

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

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

Новая концепция пришла внезапно. Вот, что говорит об этом арт-директор Маша:

Решение пришло неожиданно. Лежу перед сном и вдруг представляю: железо должно летать! В голове возникла визуальная история — как элемент путешествует по организму, превращаясь в энергию и здоровье. На следующий день я поделилась идеей с дизайнерами, и магия началась. 

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

Времени оставалось немного, денежка и терпение тоже заканчивались, а красота все не наступала. На помощь пришел великий чат GPT, но не без нюансов, как говорит арт-директор Настя.

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

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

Собрать получившуюся историю красиво на Тильде было невозможно, поэтому мы освоили новую для нас платформу TapTop. И каждый вложенный рубль полностью оправдал себя, арт-директор Маша была довольна.

«Это, кстати был наш первый проект на TapTop, и с тех пор я именуюсь ее амбассадором у нас в агентстве. Ребята сделали офигенную платформу для ноу-код проектов и я все еще не понимаю, почему о них не знает весь рынок»

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

Шрифты делают акцент на технологичность: заголовки — Inter, описания — моноширинные. Это создает атмосферу современного научного продукта. В итоге дизайн сочетал рациональные и эмоциональные элементы, делая сайт одновременно увлекательным и информативным.

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

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

Сайт объединяет несколько ключевых аспектов:

- научность и технологичность;

- эмоциональную связь с пользователем;

- наглядные и интерактивные визуальные решения;

- образовательную ценность.

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

Проект полностью решает поставленные задачи и, что важнее всего, создает доверие к БАД одновременно обучая аудиторию. «Боноферлат» представлен не просто как продукт — а как интеллектуальное решение, которое заботится о здоровье человека. 

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

Мы же получили награду Tagline Awards, активно сотрудничаем с TapTop регулярно попадаем в паблики с лучшим кириллическим дизайном