Как продавать яйца городскому покупателю, когда вся категория говорит языком деревни. Опыт дизайна лендинга

Подойдите к полке с яйцами в любом супермаркете. Почти на каждой коробке курица, поле или деревенский дом. Человеку постарше такая картинка понятна и приятна. Тот, кто живёт в городе, бегает по утрам и завтракает между созвонами, в ней себя не видит. Для него это продукт из чужой жизни.

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

За маркой стоит крупнейший в России производитель куриного яйца. У него четыре птицефабрики, производство измеряется миллиардами штук в год. Новый бренд назывался Ешь Хорошее, и ему нужен был сайт для конечного покупателя.

Проект пришёл через агентство Эврика. Моя часть была в проектировании и дизайне лендинга, вёрстку, разработку и запуск вело агентство.

Бренду нужна была витрина для покупателя, которая растёт вместе с линейкой. Сегодня на полке больше десяти видов упаковки, завтра их станет больше, и сайт не должен каждый раз перерисовываться.

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

Мы всё равно убрали. Вместо полей на сайте люди в городе. Девушка бежит по набережной, парень делает зарядку у открытого окна, компания перекусывает в парке. Продукт привязан к тому, как его едят, а не к тому, где его производят. Для фотографий собрали отдельный стиль.

Привычный аргумент про качество при этом остался, только на другом экране.

Упаковка у бренда уже была, и сайт мы построили на её языке. Это крупная рукописная надпись, жёлтый и тёмно-зелёный цвета, силуэт яйца и мазки кисти. Человек, который видел коробку на полке, узнаёт бренд на первом экране, и наоборот.

Трёх цветов на длинную страницу мало, она быстро становится однообразной. Новых цветов мы не добавляли, меняли роли старых. Где-то фон жёлтый и текст зелёный, где-то наоборот, где-то бежевая пауза.

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

Порядок блоков мы собирали из вопросов, которые человек задаёт себе у полки. Зачем мне это? Какую коробку взять? Где купить? Можно ли верить новому имени?

Отсюда польза продукта, ассортимент со всеми упаковками и блок «где купить» с сетями, где марка продаётся. У каждой позиции есть карточка с калорийностью, белками, жирами и углеводами, сроком годности, цветом и весом яйца. Всё в одном месте, без таблиц на полстраницы.

Последний вопрос, про доверие, мы закрыли двумя экранами. Отзывы покупателей в формате вертикальных видео, как их снимают для соцсетей. И экран о производителе с картой регионов и объёмом производства. У нового имени на полке появляется хозяин, за ним видна большая компания.

Деревенская картинка обещала «натуральное», а сайт показывает, кто конкретно отвечает за продукт.

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

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

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

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

Структуру удобно собирать из вопросов покупателя в том порядке, в котором он их задаёт. Тогда каждый блок нужен, а лишние отваливаются сами.

Полный кейс с видео: страница проекта на dgmx.ru. Обо мне: nikitashubin.ru.