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

Когда к нам в Cossa постучал Cергей Ашмаров из агентства Braind и предложил рассказать о свежем кейсе, мы не особо воодушевились. Новые сайты выпускают каждый день, в чём повод для беседы? Но потом заинтересовала тема кейса — сайт премиальной ювелирной мастерской. Много ли в Рунете рассказов о работе с такими клиентами? И мы решили узнать подробности проекта.

Обсуждаемый сайт: chekotin.ru

— Сергей, мне ваш кейс было посмотреть очень интересно, потому что для меня это совершенно новая тема — я абсолютно далёк от премиальной ювелирки. А вы? Работали ли вы раньше с премиальными ювелирными изделиями?

— Вам было интересно его посмотреть, а представьте, как нам было интересно его делать! Этот проект принёс нам второй SOTD на CSS Design Awards в этом году. В тематике украшений это был наш первый опыт.

— Премиальный сегмент специфичен, со своими особенностями, правилами. Можете о них рассказать? Чем разработка сайта в премиальном сегменте отличается от разработки сайта в масс-маркете?

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

Премиальные украшения — сложный товар с длинным циклом продажи. Это не спонтанная покупка, ведь, например, в коллекции «Райский сад» стоимость кольца с жемчугом и цветными камнями — от 80 тысяч до 400 тысяч рублей, а в бриллиантовых коллекциях цена одного изделия доходит до миллиона рублей.

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

У Chekotin Jewellery интересное позиционирование и схема продаж. Это семейный бизнес, и основатели стремятся создавать украшения, которые будут переходить из поколения в поколение, станут фамильными. Этого можно добиться только при плотном контакте клиента с дизайнером, чтобы клиент делился своими фантазиями и сокровенными желаниями. Поэтому было очень важно сделать на сайте ощущение контакта и общения с мастерами.

Подобных задач обычно не бывает в масс-маркете, где чаще всего нужно дать возможность легкого подбора по ключевым параметрам и быть удобной кассой (подобрал — положил в корзину — оплатил).

— А в чём, по-вашему, особенности интернет-продаж ювелирных украшений? Есть ли отличие от продажи обуви, одежды?

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

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

По сути это традиционный раздел «Избранное», но с одной особенностью. Если зайти туда с мобильного, то можно в один клик получить персональную ссылку, расшарить её подругам в WhatsApp и обсудить, какое именно украшение из списка купить первым.

Механика шейра в WhatsApp — не наши фантазии, это реальная ситуация потребления контента клиентами Chekotin Jewellery. Основатели бренда, Александр и Мария, рассказали, как их клиентки часто даже фотографировали экран монитора, чтобы обсудить украшение в WhatsApp с подругами или прислать дизайнеру свои комментарии. Теперь в таком поведении нет необходимости.

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

— С технической точки зрения мы быстрые — сайт композитный, сервис «Битрикса» «Cкорость сайта» показывает среднее значение загрузки в 0,69 секунды (при том, что к качеству фотографий на этом сайте повышенные требования):

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

Она выдергивает человека из бешеного ритма, так что если заглянуть на сайт «на секундочку», то эта «медлительность» может даже вызвать легкое раздражение. Нужно меньше минуты, чтобы неосознанно поймать нужный темп и незаметно увлечься рассматриванием украшений.

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

Сейчас среднее время нахождения посетителя на сайте около 3,5 минуты, а ведь больше 35% трафика — переходы по рекламе, это чаще всего первый контакт с брендом.

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

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

Использование этой схемы позволяет избавиться от раздражающего мелькания тёмной полосы справа при быстрой загрузке страницы, и давать обратную связь о состоянии загрузки страницы на медленно работающем интернете.

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

Вообще, гамбургера стараются избегать не из-за его непонятности, а из-за дополнительного действия для вызова меню.

И, когда речь идёт о сайте как об «удобной быстрой кассе», я полностью согласен с этим мнением — чем короче маршрут, тем выше конверсия.

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

— Обратил внимание, что фотографии украшений при просмотре в «увеличенном» размере отображаются те же, что и в обычном. То есть лупа, по большому счёту, не работает. Это баг или фича?

— Ни то, ни другое.

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

— Меня как редактора очень огорчили тексты на сайте. Лишние слова, сложные конструкции, постоянно попадающиеся канцелярские «данный», «согласно», «является»... И выбранный курсивный шрифт не очень легко читается. Вы считаете, что тексты для таких товаров не влияют на решение о покупке, играют исключительно оформительскую роль?

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

Важно понимать, что мы не копирайтинговое агентство. На стадии разработки концепции мы придумали, о чём и в каком объеме Александру и Марии нужно «говорить» на сайте. Но тексты от своего лица они писали без нашей помощи.

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

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

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

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

— Какие вообще цели ставились перед проектом?

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

— Какой была самая сложная задача, которую пришлось решить? Чем гордитесь?

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

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

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

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

Основной источник рекламного трафика на сайт — Facebook, при этом больше 70% такого трафика открывает сайт с мобильных устройств.

Нам было важно не просто сделать, чтобы сайтом было удобно пользоваться с мобильника, было очень важно донести настроение и философию бренда даже на экране шириной 320px, ведь в большинстве случаев рекламные заходы — это первое посещение сайта. На мой взгляд, эту задачу удалось решить на 100%.

— А что не получилось?

— От некоторых хороших идей и интерфейсных решений пришлось отказаться из-за особенностей продукта или отсутствия необходимого контента.

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

— Есть какие-то итоги — что изменилось в бизнесе компании после запуска нового сайта? Цифры, оценки?

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

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

— Читатели у нас въедливые, в веб-разработке разбирающиеся. Готовы услышать их мнение в комментариях и со своей стороны прокомментировать?

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

Беседовал Андрей Коновалов, Cossa.ru

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