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

Под брендом «Индилайт» холдинг производит полуфабрикаты из мяса индейки на крупнейшем заводе в России, который также входит в число крупнейших заводов-производителей в мире. C 2013 года, когда индюшатина этой марки впервые появилась на прилавках, компания охватила магазины и супермаркеты от Москвы до Дальнего Востока, а также наладила поставки за рубеж, в ОАЭ.

Секреты качества продукции «Индилайт»:

• охлаждение мяса без воды, уксуса или перекиси водорода: так сохраняется сочность и вкус, а потребитель не переплачивает за воду в продукте;
  
• уверенность в сырье на всех этапах производства: от выращивания кормов и инкубации птенцов до откорма и переработки индеек;
  
• особая упаковка, сохраняющая свежесть продукта до 10 дней без консервантов;
  
• система менеджмента безопасности пищевой продукции ГОСТ ISO 9001, принятая во всем мире.
  

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

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

1. Сделать сайт с современным дизайном, подчёркивающим имидж бренда, и при этом сохранить лояльность клиентов и партнёров.

2. Сделать продуманную навигацию.

3. Сделать акцент на преимуществах и полезных свойствах продукции.

4. Уделить внимание блоку с рецептами: сделать его удобным и интересным.

5. Привести долю трафика с мобильных устройств за счёт адаптива.

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

В дизайне мы отталкивались от решения на упаковке — использовали сочный зеленый и тёплый оранжевый, как в логотипе. А поскольку сайт тесно связан с приготовлением пищи, появились деревянные подложки, паттерны из овощей и меловые доски — будто вы попали в кулинарную школу :)

Нам понравилась зелень с упаковки — пришлось вникать в ботанику, чтобы идентифицировать её (это не шпинат и не базилик, а салат корн!). Листочки корна мы использовали для ярких акцентов на главной.

На 404 странице мы тоже добавили «зелёного» параллакса:

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

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

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

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

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

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

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

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