HEALTHACKS

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

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

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

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

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

Проектирование было основано на распространенных поведенческих моделях для фарм продуктов и AIDA.

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

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

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

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

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

Целевые блоки с карточками товаров делаем белыми, акцентными и контрастными к темному фону сайта — тем самым, привлекая внимание.

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

Блоки вопросов и контактов поддерживаем сеткой из элементов — тем самым связываем дизайнерское рещение с первым экраном сайта.

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

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

Figma, Tilda