Спокойствие, только спокойствие
Гармоничный сайт для чайного бренда Greenfield
Спокойствие, только спокойствие
Гармоничный сайт для чайного бренда Greenfield
Представьте: вы сели помедитировать и… случайно заснули (ну с кем не бывает!). И если вам сон только на пользу, то древнего буддийского монаха это так раздосадовало, что тот вырвал себе ресницы и бросил их на землю. А на другой день на том месте вырос чайный куст, напиток из которого обладал силой прогонять сон. Такова легенда о появлении чая. Но сегодня речь пойдёт не о легендах, а о процессе создания нового сайта для чайного бренда Greenfield, которому принадлежит — на секундочку — 50% российского рынка.
Где бы вы ни были — в офисе, гостях, гостинице или кафе — вам наверняка предложат заварить пакетик чая Greenfield. Бренд представлен в 30 странах мира, а вариантов вкусов и коллекций столько, что хватит не на один месяц чайных экспериментов. Чтобы каждый мог ознакомиться с ассортиментом и узнать, где можно купить понравившийся чайный купаж, компании требовался новый сайт, отражающий идею Greenfield — гармонию с собой и окружающим миром.
Задача
Обновить сайт Greenfield, учитывая позиционирование бренда, и создать инструмент для работы с целевой аудиторией в сети.
Аналитика
Заказчик хотел, чтобы сайт передавал главный инсайт (он отражен и в слогане компании): «Обретая гармонию. Обретая себя». Потому проект должен был послужить и глобальным целям бренда, и решать его маркетинговые задачи.
Концепция сайта
Во-первых, у заказчика были два больших ожидания от сайта:
- глобализация бренда (все представительства в одном месте),
- формирование привлекательной медиа-площадки для создания комьюнити.
- создать эмоциональную связь между потребителем и брендом,
- показать, что бренд премиум-класса, несмотря на то, что это продукт для массмаркета (если чай в пакетиках, это не означает, что он низкого качества).
В сумме все эти задачи задали нам направление в разработке сайта от структуры до дизайна.
Аудитория
Аудиторию мы разделили не по социально-демографическим признакам (в контексте вышесказанного они вторичны), а по манере потребителя взаимодействовать с продуктом и, что более масштабно, по жизненной философии. Выделили группы и узкие подгруппы. Для каждой из них подбирали идеальный продукт, чтобы понимать наш ли это человек и что бренд может предложить ему.
Структура сайта
Здесь мы уделили много внимания идеям промо — необходимо было найти эффектные идеи и решения. Подробно прорабатывали и обсуждали каталог и детальную карточку товара.
Рабочая группа в проекте образовалась большая: наша команда и команда клиента. И у чуть ли не у каждого было свое видение. Но мы много общались и в итоге приходили к оптимальным решениям.
Анастасия
Аналитик
Дизайн
У Greenfield узнаваемый стиль: зелёно-золотистые упаковки с характерными иллюстрациями можно узнать издалека на полках в супермаркетах. Сайт получился таким же узнаваемым.
Евгений
Арт-директор
Но визуал — лишь одна сторона медали. Перед сайтом стояли задачи, продиктованные интересами как заказчика, так и конечных пользователей:
- донести идею бренда,
- сориентировать в ассортименте и «погрузить» в продукт,
- дать представителям отделов продаж и продвижения возможность презентовать продукты бренда,
- учесть требования SEO для эффективного продвижения и не только.
Структурированный каталог
Знаете ли вы, что у Greenfield есть чай в капсулах, который можно готовить в кофемашинах Nespresso? Зайдите в каталог — вас ждёт много других открытий и удивительных вкусов.
Все чаи разделены на коллекции: в классической вы найдёте традиционные сорта чёрного и зелёного чая, в гербальной — интересные сочетания чая, трав и добавок. Также в линейке есть чай в пирамидках с экзотическими купажами и лимитированная коллекция с совершенно неожиданными видами чая.
Все чаи разделены на коллекции: в классической вы найдёте традиционные сорта чёрного и зелёного чая, в гербальной — интересные сочетания чая, трав и добавок. Также в линейке есть чай в пирамидках с экзотическими купажами и лимитированная коллекция с совершенно неожиданными видами чая.
По ховеру видны детальное описание и варианты фасовки — удобно для тех, кто закупается, скажем, в офис. На детальной странице конкретного чая — больше фотографий и рекомендуемые товары.
На следующих этапах планируется интеграция с торговыми площадками и их ценами, чтобы пользователь сразу мог посмотреть наличие понравившегося чая в ближайшем магазине или выбрать самое выгодное торговое предложение среди представленных.
Иван
Руководитель проекта
Мощная география
Бренд Greenfield представлен в 30 странах мира, поэтому на сайте пригодилась большая красочная карта в фирменных цветах.
Карту собрали с помощью конструктора Гугла — дизайнер подобрал цвета, а мы сгенерировали и использовали получившийся JSON-файл. Золотую обводку по границам стран, областей и городов сделали с помощью внешнего плагина — с его помощью подтягиваются точки, обводки и контуры. Достаточно ввести город или страну — плагин сразу выделит на карте нужное.
Евгений
Разработчик
Философия бренда
Заказчику важно было отразить философию бренда на сайте: хотелось плавных гармоничных переходов и акцента на единении с природой. Мы предложили сразу несколько интересных решений.
Анимации и переходы
В промоблоке мы сделали параллакс-анимацию по слоям: пользователь будто смотрит на пейзаж с разных ракурсов — это добавляет эффект присутствия. Послойный параллакс продолжается ниже: контент и фон скроллируются с разной скоростью, что создаёт 3D-эффект. Плавный переход от промоблока к первому экрану в виде облаков задаёт нужное настроение с первого скролла.
В промоблоке мы сделали параллакс-анимацию по слоям: пользователь будто смотрит на пейзаж с разных ракурсов — это добавляет эффект присутствия. Послойный параллакс продолжается ниже: контент и фон скроллируются с разной скоростью, что создаёт 3D-эффект. Плавный переход от промоблока к первому экрану в виде облаков задаёт нужное настроение с первого скролла.
Ховер-эффект для кнопок сделали с помощью спрайтовой анимации. Для этого дизайнеру пришлось отрисовать 30 кадров, которые мы потом собрали вместе. А на 404-й пользователя ждёт стая птиц, рандомно летающих над лесом.
Артём
Разработчик
Интерактив для пользователей
Познакомиться с ассортиментом чаев Greenfield — один из пользовательских сценариев. Но для удержания пользователя этого мало — нужна дополнительная ценность. И мы её создали за счёт звуков природы, которые можно включать фоном во время медитаций, работы или уединения. Всего их шесть: можно миксовать между собой, как нравится, или пробовать случайные комбинации — найдите свой идеальный фон. В звуковых эффектах спрятана пасхалочка — кто найдёт, тому респект :)
Познакомиться с ассортиментом чаев Greenfield — один из пользовательских сценариев. Но для удержания пользователя этого мало — нужна дополнительная ценность. И мы её создали за счёт звуков природы, которые можно включать фоном во время медитаций, работы или уединения. Всего их шесть: можно миксовать между собой, как нравится, или пробовать случайные комбинации — найдите свой идеальный фон. В звуковых эффектах спрятана пасхалочка — кто найдёт, тому респект :)
Для зимней темы мы добавили снежинку в шапке — при клике на странице начинается снегопад и включается звук вьюги.
Иван
Руководитель проекта
Заказчик хотел, чтобы на сайте были инструменты для вовлечения пользователей. Один из них — возможность поделиться карточкой товара в соцсетях. Другой — тест на главной: ответив на три простых вопроса, пользователь получит рекомендацию по выбору чая. Нравится работать на свежем воздухе? Подойдёт чай с ароматом трав из гербальной коллекции. Хочется сосредоточиться над задачей в тихом кабинете? Заварите чай из классической коллекции и вперед.
«Грустный» поиск
Когда вы чего-то не находите на сайте, то наверняка расстраиваетесь. Сайт Greenfield «расстраивается» вместе с вами — если по запросу ничего не найдено, на странице поиска начинается дождь.
Когда вы чего-то не находите на сайте, то наверняка расстраиваетесь. Сайт Greenfield «расстраивается» вместе с вами — если по запросу ничего не найдено, на странице поиска начинается дождь.
В проекте нет супер сложных интеграций или особо сложного функционала, но он особенно интересен за счёт микро-взаимодействий и особых фишек, которые открываются пользователю в процессе изучения сайта.
Иван
Руководитель проекта
Готовый проект
