Разработка сайта молочного бренда Лебедяньмолоко
О компании и предпосылки
ООО «ЛебедяньМолоко» – производитель молочной продукции со 100-летней историей. Компания входит в топ-15 молочных брендов России и является брендом номер 1 в ЦФО. «ЛебедяньМолоко» поставила перед собой цель выйти на федеральный уровень, поэтому была готова на смелые изменения, чтобы войти на новую территорию с новым современным брендом, сохраняющим традиции и качество.
Для решения стратегической задачи бренда мы провели комплексный ребрендинг. Команда Depot провела масштабные исследования, сформировала инсайт и обновлённое позиционирование и создала совершенно новую дизайн-систему бренда. Кроме того, мы разработали креативную концепцию продвижения бренда, чтобы завоевать доверие новой аудитории и рассказать об изменениях уже существующей.
Подробнее о ребрендинге вы можете прочитать в этом кейсе.
Работа над сайтом
В ходе проекта возникло понимание, что новые позиционирование и айдентику необходимо интегрировать в веб. Перед нашей командой встала задача обновить сайт с учетом новой стратегии и фирменного стиля. При этом было важно бережно переработать прежнюю структуру корпоративного сайта.
Исследование
На данном этапе мы вооружились экспертизой наших стратегов, которые уже провели многочисленные исследования аудитории, конкурентного поля и бренда. Но для полноты картины мы изучили корпоративные сайты конкурентов, чтобы выявить сильные и слабые стороны и грамотно отстроиться.
Результатом этапа стало четкое понимание структуры будущего сайта, ключевых пользовательских сценариев и уникальных преимуществ компании «Лебедянь».
Стратеги агентства на этапе ребрендинга сформировали пирамиду бренда, в которой отражены все ценностные атрибуты и позиционирование обновлённой компании. При разработке сайта мы уделяли внимание каждому уровню пирамиды бренда, чтобы наиболее точно отразить миссию и ценности на сайте.
Прототипирование
После исследования мы перешли к созданию базовой структуры сайта.
Прототипирование: создание структурного прототипа для тестирования сценариев использования. Мы схематично изобразили структуру будущего сайта для понимания клиентом пользовательского пути, и чтобы наглядно продемонстрировать, как будет выглядеть сайт до перехода в этап дизайна.
Wireframes: построение каркасных макетов страниц с упором на удобство навигации и пользовательский опыт. Основное внимание уделялось логичности структуры, расположению блоков и интуитивности.
Также мы отдельно проработали вербальную составляющую сайта в соответствии с ценностями бренда и предпочтениями аудитории. Тексты акцентировали внимание на сильных сторонах компании, предоставляя ключевую информацию в лаконичной и понятной форме. Мы обеспечили баланс между информативностью и маркетинговой привлекательностью.
Адаптивы
Согласно полученной от клиента статистике, более 60% пользователей пользуются сайтом с мобильного телефона, поэтому мы уделили особое внимание мы мобильной версии сайта, чтобы пользователи могли с комфортом взаимодействовать с ресурсом на любых устройствах.
Создание UI-китов
Для стандартизации визуальных элементов и упрощения дальнейшего развития сайта был разработан полный UI-кит:
Элементы интерфейса: кнопки, поля ввода, меню, иконки, карточки и другие элементы.
Гайдлайн по стилям: документация, включающая шрифты, цвета, отступы и правила использования графики.
Модульная сетка: все компоненты были адаптированы к гибкой модульной сетке для удобства обновлений и расширения функционала.
Используя UI-кит, клиент сможет легко создать новую страницу, которая будет консистентно смотреться в новой айдентике.
Результат
В итоге у нас получился яркий преемственный корпоративный сайт. Он стал отражением бренда «Лебедянь» и его ценностей, выделяя компанию на фоне конкурентов. Сайт обладает:
-
Легкой и интуитивной навигацией;
-
Эстетически привлекательным и адаптивным дизайном;
-
Информативным контентом, который говорит на языке клиента;
-
Удобными UI-компонентами, упрощающими взаимодействие с ресурсом.
