Компания «Милкор» — научно-производственное предприятие с передовыми лабораториями и собственной линией для создания микробиологических препаратов.
Задача
Разработать многостраничный сайт с каталогом для компании, которая занимается производством продуктов для сельского хозяйства и животноводства.
Сложность такого проекта не в объёме страниц, а в подаче: у препаратов для животноводства техническое описание, а решение о покупке принимают люди с очень разным уровнем погружения — от агронома до владельца хозяйства.
Аудит
Собрали самую актуальную информацию о конкурентах, определили место компании в нише и маркетинговые инструменты, внедрение которых обеспечит эффективное развитие бизнеса.
Анализ сайтов конкурентов и ЦА
Проанализировали структуру сайтов конкурентов, дизайнерские концепции и маркетинговые инструменты. Выделили эффективные решения, которые конкуренты внедрили на своих сайтах. Например, кнопка, которая ведет сразу в каталог продукции на главном экране сайта. Составили портрет целевой аудитории.
Такой разбор нужен, чтобы не переносить на сайт чужие решения вслепую: часть находок конкурентов работает на их ассортимент и не подходит под номенклатуру «Милкор».
Структура и прототип
После проведения всех работ по аудиту и анализа рынка, мы получили представление о структуре сайта, его визуальном и контентном наполнении, и приступили к разработке прототипа.
Прототипирование позволило сэкономить время и ресурсы на этапе создания дизайн-макета и найти наиболее эффективные решения, которые полностью отвечают требованиям заказчика. Спорные вопросы по составу страниц и пути к каталогу закрывались на прототипе, где правка стоит минуты, а не на готовом макете.
Выбор стилистики
Нами была предложена стилистика, основанная на Bento UI.
Основная концепция стиля «bento» в веб-дизайне базируется на идее разделения и организации контента. Вдохновлённый японскими бенто-боксами, где каждый элемент пищи имеет своё место, этот стиль применяет аналогичные принципы к организации элементов интерфейса.
Для производителя с большим и техническим ассортиментом это попадание в задачу: каждая характеристика получает свою ячейку, и посетитель считывает страницу блоками, а не сплошным текстом.
Bento-подход к UI
Мы применили концепцию «bento» для создания дизайна не только десктопной версии сайта, но и версии для мобильных устройств. Разработали сетку на основе прямоугольных и квадратных элементов и распределили контент по ячейкам сетки. Добавили скругление углам ячеек, чтобы они лучше отличались друг от друга.
Данный подход позволил
- Сбалансировать распределение контента и предотвратить перегрузки одной части интерфейса за счёт другой
- Использовать контраст и цвет для привлечения внимания к ключевым элементам
- Обеспечить пользователю понятную и логичную навигацию на сайте
- Структурировать подачу большого объема информации с помощью создания иерархии элементов
Реализация
Основной ассоциацией и идеей для проекта стало взаимодействие человека и природы. Фотоконтент мы подбирали с учетом специфики производства заказчика. Например, исходя из целевой аудитории сайта, мы добавили фотографии домашних животных на фермах. Кроме того, наши специалисты разработали уникальные иконки, которые иллюстрируют, как работает продукция Milkor. Сайт был сверстан и оптимизирован на платформе Tilda.
Итог
- Многостраничный сайт с каталогом продукции для сельского хозяйства и животноводства;
- Bento-сетка, единая для десктопа и мобильной версии — структура не рассыпается на маленьком экране;
- Собственные иконки, объясняющие принцип работы препаратов, вместо стоковых иллюстраций;
- Сайт собран на Tilda, поэтому заказчик пополняет каталог и правит содержимое сам.
