Гармоничный сайт для чайного бренда Greenfield
Результат Процесс
Спокойствие, только спокойствие
Сибирикс
Спокойствие, только спокойствие
Гармоничный сайт для чайного бренда Greenfield



Спокойствие, только спокойствие
Гармоничный сайт для чайного бренда Greenfield
Представьте: вы сели помедитировать и… случайно заснули (ну с кем не бывает!). И если вам сон только на пользу, то древнего буддийского монаха это так раздосадовало, что тот вырвал себе ресницы и бросил их на землю. А на другой день на том месте вырос чайный куст, напиток из которого обладал силой прогонять сон. Такова легенда о появлении чая. Но сегодня речь пойдёт не о легендах, а о процессе создания нового сайта для чайного бренда Greenfield, которому принадлежит — на секундочку — 50% российского рынка.
Где бы вы ни были — в офисе, гостях, гостинице или кафе — вам наверняка предложат заварить пакетик чая Greenfield. Бренд представлен в 30 странах мира, а вариантов вкусов и коллекций столько, что хватит не на один месяц чайных экспериментов. Чтобы каждый мог ознакомиться с ассортиментом и узнать, где можно купить понравившийся чайный купаж, компании требовался новый сайт, отражающий идею Greenfield — гармонию с собой и окружающим миром.
Задача
Обновить сайт Greenfield, учитывая позиционирование бренда, и создать инструмент для работы с целевой аудиторией в сети.
Аналитика
Заказчик хотел, чтобы сайт передавал главный инсайт (он отражен и в слогане компании): «Обретая гармонию. Обретая себя». Потому проект должен был послужить и глобальным целям бренда, и решать его маркетинговые задачи.
Концепция сайта

Во-первых, у заказчика были два больших ожидания от сайта:

  1. глобализация бренда (все представительства в одном месте),
  2. формирование привлекательной медиа-площадки для создания комьюнити.
Во-вторых, необходимо было укрепить имиджевую часть бренда:

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

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

В сумме все эти задачи задали нам направление в разработке сайта от структуры до дизайна.
Аудитория
Аудиторию мы разделили не по социально-демографическим признакам (в контексте вышесказанного они вторичны), а по манере потребителя взаимодействовать с продуктом и, что более масштабно, по жизненной философии. Выделили группы и узкие подгруппы. Для каждой из них подбирали идеальный продукт, чтобы понимать наш ли это человек и что бренд может предложить ему.
Структура сайта
Здесь мы уделили много внимания идеям промо — необходимо было найти эффектные идеи и решения. Подробно прорабатывали и обсуждали каталог и детальную карточку товара.
Рабочая группа в проекте образовалась большая: наша команда и команда клиента. И у чуть ли не у каждого было свое видение. Но мы много общались и в итоге приходили к оптимальным решениям.

Анастасия
Аналитик
Дизайн
У Greenfield узнаваемый стиль: зелёно-золотистые упаковки с характерными иллюстрациями можно узнать издалека на полках в супермаркетах. Сайт получился таким же узнаваемым.

Евгений
Арт-директор

Но визуал — лишь одна сторона медали. Перед сайтом стояли задачи, продиктованные интересами как заказчика, так и конечных пользователей:

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

Структурированный каталог
Знаете ли вы, что у Greenfield есть чай в капсулах, который можно готовить в кофемашинах Nespresso? Зайдите в каталог — вас ждёт много других открытий и удивительных вкусов.

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

Иван
Руководитель проекта
Мощная география
Бренд Greenfield представлен в 30 странах мира, поэтому на сайте пригодилась большая красочная карта в фирменных цветах.
Карту собрали с помощью конструктора Гугла — дизайнер подобрал цвета, а мы сгенерировали и использовали получившийся JSON-файл. Золотую обводку по границам стран, областей и городов сделали с помощью внешнего плагина — с его помощью подтягиваются точки, обводки и контуры. Достаточно ввести город или страну — плагин сразу выделит на карте нужное.

Евгений
Разработчик
Философия бренда
Заказчику важно было отразить философию бренда на сайте: хотелось плавных гармоничных переходов и акцента на единении с природой. Мы предложили сразу несколько интересных решений.
Анимации и переходы

В промоблоке мы сделали параллакс-анимацию по слоям: пользователь будто смотрит на пейзаж с разных ракурсов — это добавляет эффект присутствия. Послойный параллакс продолжается ниже: контент и фон скроллируются с разной скоростью, что создаёт 3D-эффект. Плавный переход от промоблока к первому экрану в виде облаков задаёт нужное настроение с первого скролла.
Ховер-эффект для кнопок сделали с помощью спрайтовой анимации. Для этого дизайнеру пришлось отрисовать 30 кадров, которые мы потом собрали вместе. А на 404-й пользователя ждёт стая птиц, рандомно летающих над лесом.

Артём
Разработчик
Интерактив для пользователей

Познакомиться с ассортиментом чаев Greenfield — один из пользовательских сценариев. Но для удержания пользователя этого мало — нужна дополнительная ценность. И мы её создали за счёт звуков природы, которые можно включать фоном во время медитаций, работы или уединения. Всего их шесть: можно миксовать между собой, как нравится, или пробовать случайные комбинации — найдите свой идеальный фон. В звуковых эффектах спрятана пасхалочка — кто найдёт, тому респект :)
Для зимней темы мы добавили снежинку в шапке — при клике на странице начинается снегопад и включается звук вьюги.

Иван
Руководитель проекта
Заказчик хотел, чтобы на сайте были инструменты для вовлечения пользователей. Один из них — возможность поделиться карточкой товара в соцсетях. Другой — тест на главной: ответив на три простых вопроса, пользователь получит рекомендацию по выбору чая. Нравится работать на свежем воздухе? Подойдёт чай с ароматом трав из гербальной коллекции. Хочется сосредоточиться над задачей в тихом кабинете? Заварите чай из классической коллекции и вперед.
«Грустный» поиск

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

Иван
Руководитель проекта
Готовый проект