Кейс: как мы запустили сайт с конверсией 5% для ювелирного магазина

Команда Молнии создаёт сайты на Тильде почти 5 лет, и за это время мы сделали много крутых кейсов. В новой статье рассказываем о том, как сделали сайт для ювелирного магазина, который на протяжении 2 лет приносит стабильный доход заказчику.

Кейс: как мы запустили сайт с конверсией 5% для ювелирного магазина

EGOR SOLOV’EV JEWELRY — ювелирный магазин, в котором создаются украшения на заказ. Егор — его создатель, он работает с любыми эскизами колец, кулонов, браслетов, цепей и может воплотить в жизнь даже самые необычные идеи клиентов.

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

Погрузились в задачу

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

В брифе заказчик оставил комментарий, что не планировал что-то менять на сайте в ближайшее время. Но когда увидел портфолио Молнии, ему настолько понравились работы, что он захотел сделать у нас редизайн. Желание передать на сайте образ компании, которая тоже мотивирует и сподвигает купить продукт, стало решающим фактором для совместной работы над проектом.А также, чтобы он отражал, что клиенты могут заказать абсолютно любое украшение: механическое кольцо с вращающимся центром? Легко! Добавить гравировку с именем любимой или её отпечатоком пальца? Запросто!

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

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

Продумали концепцию

Стилистика сайта для EGOR SOLOV’EV JEWELRY была вдохновлена фотоконтентом, который прислал заказчик. Когда есть хорошие работы, то они продают себя сами, если правильно преподнести. Поэтому упор сделан на показ примеров украшений.

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

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

Добавили анимации

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

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

Первый блок с анимацией, сделанной кодом

Чтобы передать визуально, что украшения бренда — ручная работа, дизайнер придумал фишку, которую реализовали сразу на втором блоке. Мы предложили заказчику идею: показать иллюстрациями процесс создания кольца. Ему эта идея пришлась по душе, и он прислал нам реальную 3D-модель одного из заказов. Копирайтер прописал этапы работы, а иллюстратор отрисовал их.

Блок с процессом разработки украшения

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

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

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

И как проделанная работа повлияла на результат?

Сайт запустили 22 июля 2021 года, и после этого заказчик сразу запустил рекламу в Яндекс.Директ. Общее количество посетителей на сайте на момент написания статьи — 14 542.

<p>Количество посетителей на сайте с момента запуска </p>

Количество посетителей на сайте с момента запуска

Средняя конверсия с рекламы за это время около 2%. Важно понимать, что реклама менялась, по-разному настраивалась, из-за чего спрос повышался и понижался. Лучший результат по конверсии в отдельные моменты был больше 5%.

<p>Статистика конверсии из Яндекс.Метрики</p>

Статистика конверсии из Яндекс.Метрики

Абсолютное большинство клиентов приходит к Егору с рекламы. Он нашёл идеальную связку, при которой хорошо работают сайт и реклама, и стоимость привлечения клиента при этом составляет 3–4% от среднего чека.

<p>Статистика источников трафика на сайт</p>

Статистика источников трафика на сайт

Благодаря преобладающему трафику из переходов по рекламе на сайт заходят тёплые клиенты, которые уже готовы сделать заказ. Поэтому конверсия в сделку составляет 60–80%.

Пара слов напоследок

Проделанная работа студии над сайтом вместе с хорошо настроенной рекламой помогли решить главную задачу заказчика — получить инструмент для продвижения, который будет каждый месяц загружать заказами. Сайт стабильно работает и приносит результат на протяжении 2 лет. И сейчас, когда стоимость привлечения клиента составляет всего 4% от среднего чека, при желании бизнес можно масштабировать и выходить на новые уровни. Этот кейс — хороший пример того, что сайты на Тильде работают и решают задачи бизнеса.

Больше кейсов и полезной информации по веб-дизайну и маркетингу у нас в Telegram-канале @flash_family

3131
21 комментарий

Анимация на сайте — крутой инструмент для повышения конверсии.Где пруфы? Вы сравнивали с другими вариантами? Может быть в статике вы получили не 5%, а 15%?

Заголовки довольно крупные, прописанные заглавными буквами, что говорит о масштабе компании и её надёжности.Еб твою мать.

26
Ответить

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

2
Ответить

Еб твою мать +1

1
Ответить

Когда достигли конверсии 5%

1
Ответить

Там конверсия 5% на графике один раз пробита была, Вы пишите в «отдельные моменты», а в заголовке вообще «сайт с конверсией 5%» знаете как это называется на русском языке - наебалово.

9
Ответить

1). Почему в заголовке "мы — воплощаем" стоит тире? Сам заголовок h1 длинный и огромный.

2). Чтобы увидеть перечень продукции (блок "украшения— ваша история") мне приходится промотать большой блок про этапы работы. Это странно. Сначала продавец показывает товар, а потом только может завести разговор что нужно сделать чтобы получить его.

3). Почему-то то, что вы можете сделать работу на любой вкус (слова "Заветные слова или вращающееся кольцо —возможно всё) находится аж в центре сайта. Переместите эту ценность для клиента в начало сайта. Нынешний h1 лучше переработать в, например, "ювелирные украшения ручной работы".
В подзаголовке написать "любой сложности, на ваш вкус". Нынешний подзаголовок ("как мы это делаем") ценности для клиента не несёт, это просто вода. Первый экран — самая важная часть сайта. Там тем более не должно быть мусорных элементов.

4). Дизайнерское решение для h-заголовков (когда вторая строчка правее первой) почему-то реализовано у вас через раз. Приведите к единому стилю.

5). Текст "Цепь из серебряных скрепок? Почему нет? У нас можно всё" залезает на цепь. Сложно читать. В подблоке ниже такая же фигня.
+в нескольких местах блок текста выглядит в виде т.н. "расчёски". Выглядит некрасиво.

6). Большинство фотографий как будто взяты со стоков. Выглядит фальшиво. Наймите фотографа за косарь. Пусть он сделает вам нормальные, живые фотографии.
+ я не нашёл фото ваших специалистов. Если это ручная работа, то покажите мне ваших сотрудников.

7). Не нашёл адреса. Укажите. Чай, не ядерные подлодки строите. Повысит доверие.

8). Такая выгода, как "доставка для клиентов — бесплатно" убрано аж в самый низ сайта. Почему?

9). Добавьте в шапку способ связаться с вами (телефон). Чтобы не пришлось листать вниз. Не все оставляют заявки на сайте. Многим выгодно сразу позвонить.

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

Это из того, что сразу бросается в глаза.

6
Ответить

АХААХАХАХАХ. Укажите, поменяйте, добавьте, приведите к единому стилю. Ты в курсе что ты не имеешь к этому проекту никакого отношения?

3
Ответить