Динамичный промо-сайт бренда «Fitstart». Или как объеденить пользу и вкус

Красочно рассказать о новом премиальном бренде мультизлаковых хлебцев Fitstart.

Компания «Мистраль Трейдинг» производит высококачественные продукты под собственными торговыми марками и занимается эксклюзивной дистрибуцией всемирно известных брендов.

Одной из собственных марок «Мистраль Трейдинг», является премиальный бренд мультизлаковых хлебцев Fitstart. Для которого ранее, мы запустили временный сайт на готовом решении. После обновления бренда, нам была поставлена задача — реализовать новый, красочный и «вкусный» сайт бренда, который позволит полноценно показать преимущества и разнообразие товарной линейки.

Главным УТП продукта является его натуральность и разнообразие вкусовой линейки. Хлебцы Fitstart представлены в семи сладких и четырех несладких вкусах. Чтобы показать все это разнообразие вкусов и не потерять по пути внимание пользователя, нами аккуратно соблюдалось цветовое кодирование по каждому из продуктов, а также лаконичное и последовательное позиционирование пачек для подчеркивания вкусовых различий.

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

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

Формула Fitstart = Польза + Вкус. Чтобы разобраться в высшей продуктовой математике, для начала мы собрали все необходимые концептуальные особенности и структурировали их внутри команды: – современная, хорошо проработанная красочная упаковка

— четкие тезисы выстроенные на пользе, вкусе, натуральности и удобности

— грамотно выстроенная вкусовая линейка

— цветовое кодирование вкусов на нейтральном фоне 

— открытая технология производства

— динамичная видео-презентация 

— показатели доверия к бренду

Вводные более чем достаточны, чтобы реализовать лучший продуктовый сайт ;) Можно начинать.

С первого захода, нами было предложено упаковать структуру основного лендинга (он же – главная страница сайта), в блоки с радиусными границами, по форме хлебца. Которые при скроле будут задавать общую динамику и развивать её внутри блока за счет разных динамических элементов.

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

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

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

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

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

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

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

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

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

Остальной интерфейс был бережно адаптирован под разные экраны и передан нашим специалистам на внедрение.

Поскольку предыдущий сайт был собран на платформе «1С-Битрикс» с использованием готового решения от «Аспро», было принято решение оставить текущую платформу, заменив при этом frontend и backend составляющие.

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

Все шаблоны текущего сайта канули в лету и были переписаны с нуля, с учётом упаковки всех данных сайта в логике административной панели «1С-Битрикс». Товары, рецепты, отзывы, магазины и другие систематические данные были упакованы в инфоблоки, а все формы на сайте переведены в веб-формы Битрикса. Что позволяет без труда масштабировать и пополнять/изменять данные на сайте.

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

Для сайта хлебцев «Fitstart», мы подготовили всю необходимую графику для каждого раздела под Open Graph разметку, необходимые иконки — favicon, web clip icon, а также перевели логотип и иконки в формат SVG.

Сайт был успешно запущен и в дальнейшем планируется его маркетинговая поддержка и продвижение. На данном этапе он только стартовал.