Комментарии
Проект 3 в 1: презентация компании, каталог продукции и кулинарная энциклопедия
Результат Процесс
Сайт бренда «Индилайт» для ГК «Дамате» — крупнейшего производителя индейки в России
Сибирикс
Сайт бренда «Индилайт» для ГК «Дамате» — крупнейшего производителя индейки в России
Проект 3 в 1: презентация компании, каталог продукции и кулинарная энциклопедия
«Индилайт» — бренд группы компаний «Дамате», крупного сельскохозяйственного холдинга, для которого мы создали уже второй проект.

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

Секреты качества продукции «Индилайт»:
  • охлаждение мяса без воды, уксуса или перекиси водорода: так сохраняется сочность и вкус, а потребитель не переплачивает за воду в продукте;
  • уверенность в сырье на всех этапах производства: от выращивания кормов и инкубации птенцов до откорма и переработки индеек;
  • особая упаковка, сохраняющая свежесть продукта до 10 дней без консервантов;
  • система менеджмента безопасности пищевой продукции ГОСТ ISO 9001, принятая во всем мире.
Задачи
Старый сайт заказчику не нравился визуально, а его интерфейс был неудобным. Основной трафик собирался благодаря рецептам — при поиске посетители попадали на сайт, где больше узнавали о компании и продукции, и это стало хорошим работающим сценарием для клиента. Какие-то рецепты для раздела создавались с нуля, какие-то адаптировались на основе общеизвестных с использованием продуктов из индейки. Благодаря этому среди корпоративных материалов даже появилась собственная книга рецептов.

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

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

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

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

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

5. Привести долю трафика с мобильных устройств за счёт адаптива.
Дизайн
Исходя из задач проекта, мы предложили два альтернативных варианта главной страницы: в одном сделали акцент на самом продукте, показывая его классность и полезность, а во втором — на рецептах, которые можно приготовить из продукции «Индилайт». В итоге клиент предложил их совместить, поэтому в промо-блоке появился слайдер.
В дизайне мы отталкивались от решения на упаковке — использовали сочный зеленый и тёплый оранжевый, как в логотипе. А поскольку сайт тесно связан с приготовлением пищи, появились деревянные подложки, паттерны из овощей и меловые доски — будто вы попали в кулинарную школу :)

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

Тамара
Дизайнер
На 404 странице мы тоже добавили «зелёного» параллакса:
Белое мясо индейки считается самым постным, а по питательности приравнивается к красному: говядине или баранине. И делится тушка на большее количество частей, чем куриная, поэтому мы решили сделать наглядный блок о разделке, куда привязали товары из каталога.
Над схемой тушки работали долго: не получалось нарисовать её грамотно. В итоге пришлось ждать из отпуска специалиста и выверять с ним каждый изгиб индюшачьего тела. Во время его детальных консультаций с кровавыми подробностями на нас косо смотрели коллеги по студии, но результат — симпатичная и анатомичная индюшка — стоил того.

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

Тамара
Дизайнер
В карточке продукта мы сделали акцент на крупном фото и дополнили его иконками пищевой ценности, описанием веса, состава и полезных свойств. А ниже добавили блок с рецептами, которые автоматически подбираются по тегам.
Разработка
В разделе рецептов мы продумали множество мелочей. Чтобы посетитель не искал, как выглядит филе, бедро или голень, заявленные в рецептах, мы привязали в этот блок продукты из каталога — при наведении всплывает миниатюрное фото, а по клику открывается полноценная страница со всеми подробностями и характеристиками.
Другая удобная штука — калькулятор ингредиентов, чтобы не пришлось мучительно умножать в уме ложки, стаканы и штуки на количество порций.
Мы продумали универсальный функционал: к рецепту привязываются товары (например, филе) и указываются ингредиенты с мерой измерения (столовая ложка, грамм, щепотка). Если указать количество ингредиентов на порцию, то калькулятор высчитает нужное значение. А если указать их без количества, то калькулятор их не тронет — например, когда солят или перчат «по вкусу».

Алексей
Разработчик
Также мы закрепили фотографию слева, чтобы можно было скроллить этапы приготовления, не теряя её из виду:
Фильтры — отдельная история. Мы предусмотрели их в каталоге и в рецептах. Можно выбирать сразу несколько категорий, чтобы найти, например, суп с сердечками на первое и сердечки гриль на второе одновременно:
Над видео с главной страницы мы тоже немного поколдовали: при просмотре блоки с ключевой информацией справа переключаются автоматически, когда о них заходит речь в фильме. Для этого в хронометраже закрепили временные точки и привязали их к каждому блоку. При выборе конкретного блока справа воспроизведение начнётся с момента, где рассказывается информация именно о нём.
Одной из задач проекта был адаптив. Заказчик очень хотел сохранить функционал схемы разделки, поэтому для устройств с маленькой диагональю мы разложили её буквально по полочкам:
В этом проекте перед нами стояли разные задачи: сайт, с одной стороны, должен был быть эффектным промо для бренда, с другой — удобным для повседневного использования: поиска рецептов и новинок. Ещё при аналитике мы придумали систему взаимосвязей между разделами так, чтобы зацепить взгляд пользователя за ключевые разделы. Позже на этапе дизайна добавили интересных мелочей вроде «совета от шефа» и интересных фактов в новостях. Получился красивый и функциональный проект с публикациями, которые так и хочется перепостить в соцсетях.

Анастасия
Руководитель проекта
Готовый сайт