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

К нам обратился производитель БАД «Боноферлат» — инновационного средства для восполнения запасов железа в организме. Продукт отличается современной формулой с легкоусвояемым железом, минимизирует побочные эффекты и подходит для регулярного приема: нет раздражения ЖКТ, металлического привкуса или изменения цвета зубов.

Клиент имел базовые наработки по текстам, но четкой стратегии презентации БАД не было. Основной запрос был прост: создать современный, продающий и одновременно образовательный B2C сайт. Целевая аудитория — люди с различными уровнями дефицита железа: от тех, кому «Боноферлат» назначил врач, до тех, кто заботится о здоровье превентивно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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