Собрали на Тильде атмосферный магазин элитного китайского чая — и за полгода он принес заказчику 9 млн выручки

Цена чая тысячи и десятки тысяч рублей, есть пуэр и за 500 000 руб — такие продукты требуют особой подачи. Мы умудрились описать философию бренда, не скатившись в абстракции «премиального языка», без наезда отстроились от конкурентов, добавили кучу иллюстраций и обернули всё это в симпатичный дизайн. [Кейс на конкурс кейсов Ильяхова]

Сергей Перевозчиков
редактор, контент-маркетолог (портфолио, телеграм-канал)

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

Заказчик возит чай из Китая и Тайваня, который практически не добирается до России

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

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

Регион — Москва и Санкт-Петербург.

Провели первую беседу и составили понимание задачи

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

Собрали на Тильде атмосферный магазин элитного китайского чая — и за полгода он принес заказчику 9 млн выручки
Понимание задачи, которое я подготовил после обсуждения с заказчиком (это был первый созвон). Заказчик выбрал второй вариант: выложить все товары, не заморачиваясь с описанием. 
Понимание задачи, которое я подготовил после обсуждения с заказчиком (это был первый созвон). Заказчик выбрал второй вариант: выложить все товары, не заморачиваясь с описанием. 

Сайт нужно было сделать за три недели, чтобы успеть к чайному мероприятию.

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

Сделали структуру, но потом несколько раз переделывали

Задача показалась мне относительно простой: просто рассказать про свойства чая. Подготовили с автором вот такую структуру, показали заказчику:

  • Философия (кратко)
  • Польза чая
  • Уникальные свойства
  • Каталог
  • Услуги

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

Первый вариант структуры не подошёл — не попал в ожидания заказчика

Новую структуру решили делать так: попросили у заказчика его видение, а затем на его основе сделали новый вариант. Иногда такой способ решить задачу — единственно верный.

Наброски структуры от заказчика
Наброски структуры от заказчика

Аудитория, в которую мы целимся, купит только тогда, когда будет полностью доверять бренду и поймет ценности продукта. Цена в данном случае второстепенна.

Заказчик о своей ЦА. Не выяснить это на обсуждении задачи было ошибкой

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

Как делали новую структуру. Во время интервью заказчик рассказал, что философия их продукта включает в себя три составляющие:

  • Экологически чистый продукт
  • Научно доказанные оздоровительные свойства
  • Признанные чайные мастера

И я подумал: за каждым тезисом стоят свойства продукта, которые заказчик подробно описывал во время интервью. Значит, можно не делать про философию отдельный блок, а «зашить» её во всю структуру, последовательно раскрывая свойства продукта, которые в общем-то и составляют эту философию.

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

Объясняю заказчику, какой получилась новая структура и почему она подходит

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

Написали спокойный текст без высокопарной ерунды

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

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

Блок о сырье подчеркивает экологичность чая 
Блок о сырье подчеркивает экологичность чая 

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

Ответили на важные вопросы. Текст как бы проводит покупателя за руку по всем важным аспектам:

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

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

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

Применение этого правила выглядит так: рассказывай самое важное в заголовках, картинках и других элементах, привлекающих внимание, а второстепенное — в тексте.

Блок о пользе чая. В прототипе текст был черным, а здесь он серый — для наглядной демонстрации, так читатель видит ± все рекламные тексты.
Блок о пользе чая. В прототипе текст был черным, а здесь он серый — для наглядной демонстрации, так читатель видит ± все рекламные тексты.

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

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

Продумали все иллюстрации и заложили их на этапе прототипа

В прототипах часто остаются серые блоки — мол, дизайнер что-нибудь подберёт. Я против такого подхода: дизайнер может собрать изображения, которые не дружат с тексту по смыслом, и получится ахинея. Да, бывают еще картинки-дизайн, они больше про настроение и ощущения, а не смысл, и вот их действительно должен искать дизайнер. Но продуктовые (смысловые) картинки должен ставить автор прототипа как человек, отвечающий за смысловую часть.

В прототипе уже были все фотографии и другие визуальные решения:

Реальные фотографии чайных плантаций Китая. Их сделал друг заказчика — ученый-историк, который также помогал нам с вычиткой смысловой части блока «Научно подтвержденные свойства». По большей части эти фото пошли в блок об особенностях чайных провинций.

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

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

Фото и видео с чаем, где его наливают и дегустируют. И это на самом деле круто, чтоб заказчик не поленился все это отснять.

Фото- и видеоконтент, который изначально снимали для соцсетей
Фото- и видеоконтент, который изначально снимали для соцсетей

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

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

Картинка получилась не суперкрасивой, но это и не нужно: главное, что она показывает полезные элементы. Изображение придумано еще на этапе прототипа
Картинка получилась не суперкрасивой, но это и не нужно: главное, что она показывает полезные элементы. Изображение придумано еще на этапе прототипа

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

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

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

При разработке магазинов надо заранее продумывать миниатюры товаров, но мы решили не заморачиваться и взять готовые решения от Тильды. Если правильно их настроить, товары будут выглядеть вполне прилично.

Собрали дизайн в Тильде и всё подготовили к запуску

Отрисовали концептуальные экраны. Начали с первых нескольких экранов, чтобы согласовать концепцию. Рисовать сразу весь дизайн нельзя: если заказчика не устроит результат, придётся переделывать всё.

Собрали на Тильде атмосферный магазин элитного китайского чая — и за полгода он принес заказчику 9 млн выручки

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

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

Один из трёх разделов каталога
Один из трёх разделов каталога

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

Сделали SEO-оптимизацию. Поисковая оптимизация помогает привлекать бесплатный трафик. Конечно, эта ниша конкурентная, и наверху выдачи будут старые авторитетные сайты, которые не перебить одностраничником. Но если это принесет дополнительные 30–40 посещений в месяц, которые к тому же могут превратиться в сделки — кто ж будет против?

Что сделали:

  • Упомянули поисковые запросы в заголовках (еще на этапе прототипа). Мы не пишем тексты под SEO — в том смысле, что при подготовке текста не отталкиваемся от запросов. Главное — польза для читателя, и именно такой подход позволяет добиваться наилучших результатов от поисковой оптимизации.
  • Сделали технические настройки. Ничего сверхъестественного: просто прописали заголовки и alt у изображений, пометили заголовки тегами. Некоторые работы — например, оптимизация веса картинок — не относятся к SEO, но также способствуют улучшению сайта с этой точки зрения. Скорость загрузки — один из важнейших факторов ранжирования.
  • Добавили компанию на Яндекс-карты. Это тоже относится к SEO-оптимизации: при упоминании бренда или поиске магазинов чая в результатах присутствует страница бренда на Картах.

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

Сделали специальный блок для отстройки

В одном из блоков сделали такой ход: расписали свойства условно низкокачественного товара (условно, потому что кому-то и такое норм) и рядом показали свойства нашего.

Блок специально сделан в виде колонок — так пользователь машинально сравнивает левую часть с правой
Блок специально сделан в виде колонок — так пользователь машинально сравнивает левую часть с правой

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

Параллельно с разработкой разрабатывали новый логотип

У заказчика к началу проекта был логотип, но он и сам понимал — не катит. Я подключил знакомую девочку-дизайнера, с которой мы уже работали на паре проектов.

Вот что у нее вышло:

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

На самом деле это третья версия лого: в первой придумали значок, но не устроил шрифт, во второй значок был другим, и он не понравился, зато понравилась текстовая составляющая. Когда объединили, получилось самое то.

Мы успели к сроку, а сайт в течение 6 месяцев приносил по 1,5 млн рублей

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

Фото с того самого мероприятия, к которому готовился заказчик и ради которого мы делали магазин
Фото с того самого мероприятия, к которому готовился заказчик и ради которого мы делали магазин

С самого начала мы понимали, что наш сайт — лишь прелюдия к полноценному запуску бизнеса и что однажды его заменят на другой ресурс. Штош, главное, что он выполнил свою задачу :)

Осенью мы встретились с заказчиком в Петербурге (до этого виделись только онлайн). Он поделился планами, напоил меня чаем и даже подарил пуэр с 500-летнего дерева :)

Резюме: как преподносить дорогие элитные продукты

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

Благодарности

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

Саша Бускин, спасибо за помощь с SEO. Я в этом понимаю вот столько 🤏, а ты в этом практически бог.

Кирилл Лесин, ты крутой дизайнер и я доволен проектами, которые мы с тобой сделали за 7 лет совместной работы.

Оля Дементьева, спасибо тебе за крутой логотип. Очень люблю твои работы :)

Яков, Иван — вы классные заказчики. Спасибо за интересный проект!

В телеграм-каналье делюсь опытом, как делаю сайты, кейсы, статьи и другие информационные продукты.

И это. С Наступающим :)

6666
115 комментариев

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

27
Ответить

Все чаи одинаковые, нет в китае
Никакого элитного чая, это все пздж китаез, чтобы
Впаривать иностранцам. 99% китайцев пьют самый просто чай не потому, что он полезен, а потому, что он дешевый. Пуэр они не
Пьют, а больше тигуанинь(мне он тоже нравится), молихуа(он
Же
Жасминовый), найсянг(улун, но без ароматизаторов, так как китайцы считают, что там химические ароматизаторы, а раз они так считают, я что буду большим китайцем, чем сами китайцы? Так тому и быть) и всякие красные древесные чаи разных цветов. Дома у меня порядка 10-15 сортов, привезенных из китая, когда
Приходят гости, завариваем , все охают и ухают, а потом говорят- заварите обычные черный азерчай(сделанный в Рф компанией кубань чай) и делов то. На том спор, какой чай лучше останавливается. Кто все же
Хочет купить китайский чай в китае, например в гороже гуанчжоу, даю адрес оптового рынка чая Фангчун:


https://g.co/kgs/ZGTsJYi

Район Ливан

22
Ответить

вот это бесит. когда товар в других местах не получается найти и приходиться брать у таких вот "попрошаек данных" на вопрос зачем так делать отвечают "мы хотим вам помочь". помогите мне купить у вас чай а не поговорить о чае...

7
Ответить

Сайт делался под аудиторию, которая уже контактировала с брендом и готова купить, только кнопку дай :)

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

Ответить
Ответить

Цитата: "Мы не стали писать ерунду в духе «Достойный чай для настоящих ценителей чайного искусства», а вместо написали просто понятный человеческий текст о свойствах продукта."

Чуть ниже: "Каждая плантация - уникальное сочетание высоты, розы ветров, туманов, свойств почты"

Ребят, сайт классный, но в словосочетании "сочетание розы ветров" проглядывает "Солидный господь для солидных господ"

10
Ответить

Точно, ошиблись со склонением, спасибо!

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

1
Ответить