Спокойствие, только спокойствие
Гармоничный сайт для чайного бренда Greenfield
Спокойствие, только спокойствие
Гармоничный сайт для чайного бренда Greenfield
Представьте: вы сели помедитировать и… случайно заснули (ну с кем не бывает!). И если вам сон только на пользу, то древнего буддийского монаха это так раздосадовало, что тот вырвал себе ресницы и бросил их на землю. А на другой день на том месте вырос чайный куст, напиток из которого обладал силой прогонять сон. Такова легенда о появлении чая. Но сегодня речь пойдёт не о легендах, а о процессе создания нового сайта для чайного бренда Greenfield, которому принадлежит — на секундочку — 50% российского рынка.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637837218/tild3862-3730-4338-b564-373838636461__-__empty______1.png)
Где бы вы ни были — в офисе, гостях, гостинице или кафе — вам наверняка предложат заварить пакетик чая Greenfield. Бренд представлен в 30 странах мира, а вариантов вкусов и коллекций столько, что хватит не на один месяц чайных экспериментов. Чтобы каждый мог ознакомиться с ассортиментом и узнать, где можно купить понравившийся чайный купаж, компании требовался новый сайт, отражающий идею Greenfield — гармонию с собой и окружающим миром.
Задача
Обновить сайт Greenfield, учитывая позиционирование бренда, и создать инструмент для работы с целевой аудиторией в сети.
Аналитика
Заказчик хотел, чтобы сайт передавал главный инсайт (он отражен и в слогане компании): «Обретая гармонию. Обретая себя». Потому проект должен был послужить и глобальным целям бренда, и решать его маркетинговые задачи.
Концепция сайта
Во-первых, у заказчика были два больших ожидания от сайта:
- глобализация бренда (все представительства в одном месте),
- формирование привлекательной медиа-площадки для создания комьюнити.
- создать эмоциональную связь между потребителем и брендом,
- показать, что бренд премиум-класса, несмотря на то, что это продукт для массмаркета (если чай в пакетиках, это не означает, что он низкого качества).
В сумме все эти задачи задали нам направление в разработке сайта от структуры до дизайна.
Аудитория
Аудиторию мы разделили не по социально-демографическим признакам (в контексте вышесказанного они вторичны), а по манере потребителя взаимодействовать с продуктом и, что более масштабно, по жизненной философии. Выделили группы и узкие подгруппы. Для каждой из них подбирали идеальный продукт, чтобы понимать наш ли это человек и что бренд может предложить ему.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637837218/tild3563-3835-4339-a231-623464333762__-__empty_____.png)
Структура сайта
Здесь мы уделили много внимания идеям промо — необходимо было найти эффектные идеи и решения. Подробно прорабатывали и обсуждали каталог и детальную карточку товара.
Рабочая группа в проекте образовалась большая: наша команда и команда клиента. И у чуть ли не у каждого было свое видение. Но мы много общались и в итоге приходили к оптимальным решениям.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637837218/tild3764-3137-4666-a261-346661383362__-__empty__paramonova.jpg)
Анастасия
Аналитик
Дизайн
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637837218/tild3131-3035-4532-b562-643463393566__-__empty__greenfield.png)
У Greenfield узнаваемый стиль: зелёно-золотистые упаковки с характерными иллюстрациями можно узнать издалека на полках в супермаркетах. Сайт получился таким же узнаваемым.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637837218/tild3736-3732-4134-b136-336230306661__-__empty__akulov-new.png)
Евгений
Арт-директор
Но визуал — лишь одна сторона медали. Перед сайтом стояли задачи, продиктованные интересами как заказчика, так и конечных пользователей:
- донести идею бренда,
- сориентировать в ассортименте и «погрузить» в продукт,
- дать представителям отделов продаж и продвижения возможность презентовать продукты бренда,
- учесть требования SEO для эффективного продвижения и не только.
Структурированный каталог
Знаете ли вы, что у Greenfield есть чай в капсулах, который можно готовить в кофемашинах Nespresso? Зайдите в каталог — вас ждёт много других открытий и удивительных вкусов.
Все чаи разделены на коллекции: в классической вы найдёте традиционные сорта чёрного и зелёного чая, в гербальной — интересные сочетания чая, трав и добавок. Также в линейке есть чай в пирамидках с экзотическими купажами и лимитированная коллекция с совершенно неожиданными видами чая.
Все чаи разделены на коллекции: в классической вы найдёте традиционные сорта чёрного и зелёного чая, в гербальной — интересные сочетания чая, трав и добавок. Также в линейке есть чай в пирамидках с экзотическими купажами и лимитированная коллекция с совершенно неожиданными видами чая.
По ховеру видны детальное описание и варианты фасовки — удобно для тех, кто закупается, скажем, в офис. На детальной странице конкретного чая — больше фотографий и рекомендуемые товары.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637837218/tild6630-6666-4339-b363-323931306131__-__empty____1.png)
На следующих этапах планируется интеграция с торговыми площадками и их ценами, чтобы пользователь сразу мог посмотреть наличие понравившегося чая в ближайшем магазине или выбрать самое выгодное торговое предложение среди представленных.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637837218/tild3236-3536-4532-b935-663930633565__-__empty__ahmetzyanov.png)
Иван
Руководитель проекта
Мощная география
Бренд Greenfield представлен в 30 странах мира, поэтому на сайте пригодилась большая красочная карта в фирменных цветах.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637837218/tild3838-3765-4739-b339-663034313633__-__empty___1.png)
Карту собрали с помощью конструктора Гугла — дизайнер подобрал цвета, а мы сгенерировали и использовали получившийся JSON-файл. Золотую обводку по границам стран, областей и городов сделали с помощью внешнего плагина — с его помощью подтягиваются точки, обводки и контуры. Достаточно ввести город или страну — плагин сразу выделит на карте нужное.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637837218/tild3466-6465-4564-a135-306533363364__-__empty__photo.jpg)
Евгений
Разработчик
Философия бренда
Заказчику важно было отразить философию бренда на сайте: хотелось плавных гармоничных переходов и акцента на единении с природой. Мы предложили сразу несколько интересных решений.
Анимации и переходы
В промоблоке мы сделали параллакс-анимацию по слоям: пользователь будто смотрит на пейзаж с разных ракурсов — это добавляет эффект присутствия. Послойный параллакс продолжается ниже: контент и фон скроллируются с разной скоростью, что создаёт 3D-эффект. Плавный переход от промоблока к первому экрану в виде облаков задаёт нужное настроение с первого скролла.
В промоблоке мы сделали параллакс-анимацию по слоям: пользователь будто смотрит на пейзаж с разных ракурсов — это добавляет эффект присутствия. Послойный параллакс продолжается ниже: контент и фон скроллируются с разной скоростью, что создаёт 3D-эффект. Плавный переход от промоблока к первому экрану в виде облаков задаёт нужное настроение с первого скролла.
Ховер-эффект для кнопок сделали с помощью спрайтовой анимации. Для этого дизайнеру пришлось отрисовать 30 кадров, которые мы потом собрали вместе. А на 404-й пользователя ждёт стая птиц, рандомно летающих над лесом.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637837218/tild3862-3532-4438-a139-666464306539__-__empty___.png)
Артём
Разработчик
Интерактив для пользователей
Познакомиться с ассортиментом чаев Greenfield — один из пользовательских сценариев. Но для удержания пользователя этого мало — нужна дополнительная ценность. И мы её создали за счёт звуков природы, которые можно включать фоном во время медитаций, работы или уединения. Всего их шесть: можно миксовать между собой, как нравится, или пробовать случайные комбинации — найдите свой идеальный фон. В звуковых эффектах спрятана пасхалочка — кто найдёт, тому респект :)
Познакомиться с ассортиментом чаев Greenfield — один из пользовательских сценариев. Но для удержания пользователя этого мало — нужна дополнительная ценность. И мы её создали за счёт звуков природы, которые можно включать фоном во время медитаций, работы или уединения. Всего их шесть: можно миксовать между собой, как нравится, или пробовать случайные комбинации — найдите свой идеальный фон. В звуковых эффектах спрятана пасхалочка — кто найдёт, тому респект :)
Для зимней темы мы добавили снежинку в шапке — при клике на странице начинается снегопад и включается звук вьюги.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637837218/tild3236-3536-4532-b935-663930633565__-__empty__ahmetzyanov.png)
Иван
Руководитель проекта
Заказчик хотел, чтобы на сайте были инструменты для вовлечения пользователей. Один из них — возможность поделиться карточкой товара в соцсетях. Другой — тест на главной: ответив на три простых вопроса, пользователь получит рекомендацию по выбору чая. Нравится работать на свежем воздухе? Подойдёт чай с ароматом трав из гербальной коллекции. Хочется сосредоточиться над задачей в тихом кабинете? Заварите чай из классической коллекции и вперед.
«Грустный» поиск
Когда вы чего-то не находите на сайте, то наверняка расстраиваетесь. Сайт Greenfield «расстраивается» вместе с вами — если по запросу ничего не найдено, на странице поиска начинается дождь.
Когда вы чего-то не находите на сайте, то наверняка расстраиваетесь. Сайт Greenfield «расстраивается» вместе с вами — если по запросу ничего не найдено, на странице поиска начинается дождь.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637837218/tild3762-6638-4234-a363-616339373333__-__empty___.png)
В проекте нет супер сложных интеграций или особо сложного функционала, но он особенно интересен за счёт микро-взаимодействий и особых фишек, которые открываются пользователю в процессе изучения сайта.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637837218/tild3236-3536-4532-b935-663930633565__-__empty__ahmetzyanov.png)
Иван
Руководитель проекта
Готовый проект