На неведомых онлайн-дорожках: как мы с помощью Пушкина яблоки продаем

Привет! Это е—б эдженси, и сегодня мы расскажем, как (и зачем) на одном сайте поженить яблоки, сказки Пушкина и маркетинг.

* * *

А как вы выбираете яблоки в магазине?

Мы тоже выбирали по принципу: «Ну, возьму зеленое потому что хочу кислое, а красное подойдет для шарлотки». Это невежество изменилось, когда к нам за разработкой сайта обратился первый в России яблочный бренд «Собрано в саду».

«Яблочный бренд» означает, что пока большинство производителей яблок в лучшем случае имеют логотип, «Собрано в саду» делает все по-другому (как мы любим) — они правда заботятся о яблоках, красиво их упаковывают и думают о том, как образовывать покупателей и помогать им разбираться в чудесном яблочном разнообразии, которое у нас есть.

Именно за помощью с последним они к нам и обратились: нужно было создать запоминающийся промо-сайт для бренда, который будет не просто узнаваемым, но и полезным для любителей яблок.

Вооружившись интересом к яблокам мы приступили к работе над сайтом.

Что нам предстояло сделать:

• Адаптировать существующую яркую упаковку для сайта, чтобы бренд остался узнаваемым, но был более премиальным и спокойным в диджитал-среде;

• Сформировать онлайн-образ бренда, ориентированный на взрослую и платежеспособную аудиторию;

• Придумать маскота бренда, который расширит существующую айдентику;

• Разработать понятные и информативные промо-страницы для каждого яблочного сорта. Мы придумали механику с размещением киар-кода на упаковке: любитель яблок будет сканировать QR-код на упаковке и попадать на страничку соответствующего сорта.

Если вы читали много наших кейсов, то вы знаете, что здесь обычно начинается история о том, как мы что-то хорошо проанализировали и придумали концепции. Здесь все почти также, но мы делали предварительные концепции еще до того, как клиент выбрал нас для проекта (нам важно было найти какое-то общее решение до старта работ).

Поэтому внезапно! первые наработки по дизайну будут вот-вот почти прямо сейчас. Так и было задумано, а потом мы все равно все переделали…

На этом этапе у нас вышло 2 радикально контрастные креативные концепции с идеей маскотов и даже наработками первых экранов.

Давайте расскажем подробнее о каждой концепции. В каждую концепцию мы обычно включаем основную идею, объяснение «почему это сработает» и подборку референсов и мудборд.

«Яблочный терруар»

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

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

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

«На неведомых садовых дорожках»

Эта концепция с «русским следом» уводит нас в сказочный мир ностальгии. Здесь яблоко становится символом детства, бабушкиного сада и русских сказаний: где оно то золотое, то молодильное, то вообще почти живой персонаж.

Основой визуального образа стал русский мифопоэтический лес из сказок Пушкина: глубокий, тихий и таинственный.

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

Вторая концепция особенно понравилась клиенту, и счастливые мы приступили к работе.

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

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

Для первой концепции ежик мог превратиться в Сомельежа (и еж, и сомелье…) — эдакого эксперта с безупречным вкусом. Он знает о яблоках все: как звучит хруст Антоновки, чем отличается кислинка северных сортов и почему у конкретного этого яблока такое достойное послевкусие… Сомельеж немного сноб: он рассудителен и точен в словах. Он не говорит: «Это вкусно», — он говорит: «У этого яблока насыщенная структура с выраженным телом и хрустом в финале». Визуализировали мы его через нейросети — как вы помните, придумывали маскотов мы еще на пресейле, и времени на полноценные иллюстрации просто не было. 

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

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

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

Функционально Листочкин выполняет сразу несколько ролей: он связывает оффлайн и онлайн — вы едите яблоко и видите, как «тот самый» ежик с упаковки оживает на сайте; он помогает раскрыть характер бренда; а еще герой служит прототипом будущего ИИ-ассистента: его образ и голос уже сейчас выстроены так, чтобы в любой момент можно было «подключить» цифрового помощника, который будет подбирать сорта под настроение, блюда или привычки человека (такие нынче времена — без ИИ уже никуда).

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

В итоге получился сравнительно большой промо-сайт из 10 страниц: кроме главной мы собрали отдельную страницу о Лебедянских садах и восемь уникальных страниц под каждый сорт яблока, который выращивает «Собрано в саду». Именно на эти странички могут попасть пользователи с QR-кода на этикетке, поэтому мы превратили каждую из них в мини-книгу с подробным рассказом о каждом виде яблок и его особенностях.

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

Со второго экрана появились уже упомянутые «заметочки» от Листочкина — небольшие комментарии от первого лица внутри сайта.

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

Больше всего времени уделили страничкам сортов — слишком много яблочных нюансов нужно было учесть при их создании. Мы исходили из идеи о том, что каждое яблоко — своеобразный герой своей личной легенды. Начинается каждая страница с небольшого вступления от Листочкина, а дальше следует история сорта: откуда он родом, чем знаменит, какие ассоциации вызывает. После этого идет дегустационный блок с описанием вкуса, аромата, хруста и текстуры, чтобы можно было удобно сравнивать сорта. Завершают страницу практические блоки: мы рассказываем, для чего сорт лучше всего подходит (пироги, компоты, салаты или просто перекусы на бегу) и подборка рецептов, которые лучше всего раскрываются именно с этим яблоком.

Когда структура и тексты были готовы, мы наконец-то приступил к дизайну. Вы уже забыли, что мы делали концепции в самом начале проекта? Правильно, не вспоминайте — все равно сейчас мы их переделаем.

Процесс поиска нужного направления в дизайне был довольно долгим: нам никак не удавалось найти «тот самый» визуальный подход, который женил бы все наши идеи (сказки, премиум, терруар, Пушкин, еж…), но не выглядел бы перегружено.

Спустя сотни (не преувеличиваем) опробованных вариантов экранов нам даже пришлось создать второй фигм-файл (в первый мы перестали умещаться). Мы перебирали и перебирали композиции экранов, варианты анимации яблок, способы презентовать сад, внутренние страницы сортов и блок с воспоминаниями детства…. Вся команда искала, как подружить сказочность, яркие упаковки и визуал, не пугая пользователя ни текстом, ни графикой.

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

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

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

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

Вот так выглядит итоговая главная:

После согласования общей стилистики мы перешли к дизайну внутренних страниц

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

Например, у каждого сорта есть свой цвет, который становится главным акцентом каждой страницы.

Еще каждому сорту мы добавили маленькие визуальные детали, связанные с названием или характером яблока. Например, на странице «Богатыря» есть стилизованный шлем, а у «Космик Криспа» по экрану летают звездочки и кометы. 

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

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

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

Яркий бренд в онлайне стал более взрослым и спокойным, а смотритель сада Листочкин связывает продукт на полке магазина, сайт и будущего AI-ассистента в одну единую визуальную и повествовательную историю.