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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что сделали:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кейс подготовлен для Выставки достижений редакционного хозяйства — 2023.

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