Кейс: как мы запустили сайт с конверсией 5% для ювелирного магазина
Команда Молнии создаёт сайты на Тильде почти 5 лет, и за это время мы сделали много крутых кейсов. В новой статье рассказываем о том, как сделали сайт для ювелирного магазина, который на протяжении 2 лет приносит стабильный доход заказчику.
EGOR SOLOV’EV JEWELRY — ювелирный магазин, в котором создаются украшения на заказ. Егор — его создатель, он работает с любыми эскизами колец, кулонов, браслетов, цепей и может воплотить в жизнь даже самые необычные идеи клиентов.
У заказчика уже был сайт, но ему захотелось сделать редизайн главной страницы, чтобы она лучше отражала настроение магазина и передавала сложность и разнообразие работ. Он вдохновился и примерами сайтов в портфолио Молнии, поэтому с этой задачей обратился в нашу студию.
Погрузились в задачу
Целевая аудитория заказчика — женщины и мужчины от 20 до 45 лет со средним заработком. Они любят необычные украшения и хотят создавать уникальные памятные вещи, которые будут дарить приятные воспоминания. Поэтому и сайт нужен необычный и стильный, который с первого взгляда цепляет «своих людей».
В брифе заказчик оставил комментарий, что не планировал что-то менять на сайте в ближайшее время. Но когда увидел портфолио Молнии, ему настолько понравились работы, что он захотел сделать у нас редизайн. Желание передать на сайте образ компании, которая тоже мотивирует и сподвигает купить продукт, стало решающим фактором для совместной работы над проектом.А также, чтобы он отражал, что клиенты могут заказать абсолютно любое украшение: механическое кольцо с вращающимся центром? Легко! Добавить гравировку с именем любимой или её отпечатоком пальца? Запросто!
Главное возражение клиентов заказчика: украшения на заказ — это дорого. Но работа выполняется качественно, с индивидуальным подходом и радует долгие годы. Клиенту хотелось донести этот смысл на сайте, но сохранить простоту в дизайне, чтобы он не выглядел игриво или вычурно.
При обсуждении референсов мы узнали, что Егору понравился сайт Чёрной бухгалтерии: серьёзная тема про налоговые учёты и финансы преподнесена нестандартно и современно. Также он отметил в нём минимализм, тёмные оттенки со светлыми акцентами и ненавязчивую анимацию.
Продумали концепцию
Стилистика сайта для EGOR SOLOV’EV JEWELRY была вдохновлена фотоконтентом, который прислал заказчик. Когда есть хорошие работы, то они продают себя сами, если правильно преподнести. Поэтому упор сделан на показ примеров украшений.
Так как фото были сделаны на тёмном фоне с элементами серых камней и графитовых поверхностей, то эти цвета легли в основу сайта. Выбрали именно тёмно-серый оттенок для фона, потому что он выглядит более мягким, чем чистый чёрный. Это передаёт гибкий и лояльный подход компании в работе. А для иллюстраций и текста использовали светло-серый и белый.
Чтобы передать премиальность бренда, использовали шрифт с засечками. В начертании сохранили баланс между брутальностью и строгостью, так как хозяин студии — мужчина, и лаконичностью, которая передаёт красоту украшений и «ювелирную работу» (в прямом и переносном смысле). Заголовки довольно крупные, прописанные заглавными буквами, что говорит о масштабе компании и её надёжности. А чтобы отразить оригинальность бренда, использовали нестандартную вёрстку: заголовки разместили в несколько рядов и сделали неравномерные отступы от краёв страницы.
Добавили анимации
На протяжении всего сайта мы продумали ненавязчивую анимацию в виде выезжающих заголовков. А также добавили крутящиеся детали: колечки и блики, которые ассоциируются с ювелирными изделиями. Это помогает добавить оригинальности, сделать сайт динамичным и вовлечь пользователя в скролл.
С первого экрана захотелось сделать что-то необычное, поэтому мы нашли код, с помощью которого создаётся эффект «водной глади»: по наведению мыши одна картинка размывается в другую. Таким образом мы показали несколько примеров украшений, которые могут заказать пользователи, и не нагрузили при этом блок.
Первый блок с анимацией, сделанной кодом
Чтобы передать визуально, что украшения бренда — ручная работа, дизайнер придумал фишку, которую реализовали сразу на втором блоке. Мы предложили заказчику идею: показать иллюстрациями процесс создания кольца. Ему эта идея пришлась по душе, и он прислал нам реальную 3D-модель одного из заказов. Копирайтер прописал этапы работы, а иллюстратор отрисовал их.
В блоке с галереей работ карточки и текст появляются по скроллу, чтобы вовлечь пользователя листать страницу дальше. Здесь анимация более активная, так как взгляд человека всегда направляется туда, где есть движение. Но при этом карточки появляются последовательно, чтобы сосредоточить внимание пользователя на каждом украшении, так как представлено много разнообразных моделей.
Чаще всего анимация на мобильной версии сайта значительно упрощается по сравнению с десктопной. Но мы сохранили большую часть анимированных элементов и для телефонов/планшетов, так в основном использовалась анимация по скроллу: её можно реализовать на экранах любого размера.
Анимация на сайте — крутой инструмент для повышения конверсии. В нашем случае неважно, с какого устройства пользователь откроет этот сайт, все анимированные элементы будут вовлекать его в скролл страницы и вести к целевому действию — оформлению заказа.
И как проделанная работа повлияла на результат?
Сайт запустили 22 июля 2021 года, и после этого заказчик сразу запустил рекламу в Яндекс.Директ. Общее количество посетителей на сайте на момент написания статьи — 14 542.
Количество посетителей на сайте с момента запуска
Средняя конверсия с рекламы за это время около 2%. Важно понимать, что реклама менялась, по-разному настраивалась, из-за чего спрос повышался и понижался. Лучший результат по конверсии в отдельные моменты был больше 5%.
Статистика конверсии из Яндекс.Метрики
Абсолютное большинство клиентов приходит к Егору с рекламы. Он нашёл идеальную связку, при которой хорошо работают сайт и реклама, и стоимость привлечения клиента при этом составляет 3–4% от среднего чека.
Статистика источников трафика на сайт
Благодаря преобладающему трафику из переходов по рекламе на сайт заходят тёплые клиенты, которые уже готовы сделать заказ. Поэтому конверсия в сделку составляет 60–80%.
Пара слов напоследок
Проделанная работа студии над сайтом вместе с хорошо настроенной рекламой помогли решить главную задачу заказчика — получить инструмент для продвижения, который будет каждый месяц загружать заказами. Сайт стабильно работает и приносит результат на протяжении 2 лет. И сейчас, когда стоимость привлечения клиента составляет всего 4% от среднего чека, при желании бизнес можно масштабировать и выходить на новые уровни. Этот кейс — хороший пример того, что сайты на Тильде работают и решают задачи бизнеса.
Больше кейсов и полезной информации по веб-дизайну и маркетингу у нас в Telegram-канале @flash_family
Где пруфы? Вы сравнивали с другими вариантами? Может быть в статике вы получили не 5%, а 15%?
Заголовки довольно крупные, прописанные заглавными буквами, что говорит о масштабе компании и её надёжности.Еб твою мать.
По поводу анимации у меня тоже вопросики. Она ведь очень сильно замедляет загрузку страницы, соответственно, часть людей не выдерживает и отсеивается
Да если бы даже не грузила, это просто голословное заявление, ничем не подкрепленное в тексте.
Нормальный кейс выглядит так:
1. Клиент обратился с сайтом, вот так он выглядел, конверсия была 1,5% (например).
2. Мы провели анализ ЦА, подготовили УТП, НКВД, ОГРН и вот это все.
3. Сделали вот такой вот сайт, использовали такие приемы потому что потому что.
4. Конверсия выросла до 5%, мы считаем, это произошло вот почему (скрины из метрики).
А тут из конкретики — только цифры, из которых следует, что заказчик с сайта получает по 8-10 продаж в месяц. Это много? Мало? Хрен пойми. Я бы сказал, что мало, но не знаком с ювелирным производством. А сколько до этого было?
Еб твою мать +1
Теперь мы знаем, как показывать масштабность и надежность компании. Капс! Всё оказалось так просто XDDD *ушла переделывать все макеты*
Когда достигли конверсии 5%
Там конверсия 5% на графике один раз пробита была, Вы пишите в «отдельные моменты», а в заголовке вообще «сайт с конверсией 5%» знаете как это называется на русском языке - наебалово.
1). Почему в заголовке "мы — воплощаем" стоит тире? Сам заголовок h1 длинный и огромный.
2). Чтобы увидеть перечень продукции (блок "украшения— ваша история") мне приходится промотать большой блок про этапы работы. Это странно. Сначала продавец показывает товар, а потом только может завести разговор что нужно сделать чтобы получить его.
3). Почему-то то, что вы можете сделать работу на любой вкус (слова "Заветные слова или вращающееся кольцо —возможно всё) находится аж в центре сайта. Переместите эту ценность для клиента в начало сайта. Нынешний h1 лучше переработать в, например, "ювелирные украшения ручной работы".
В подзаголовке написать "любой сложности, на ваш вкус". Нынешний подзаголовок ("как мы это делаем") ценности для клиента не несёт, это просто вода. Первый экран — самая важная часть сайта. Там тем более не должно быть мусорных элементов.
4). Дизайнерское решение для h-заголовков (когда вторая строчка правее первой) почему-то реализовано у вас через раз. Приведите к единому стилю.
5). Текст "Цепь из серебряных скрепок? Почему нет? У нас можно всё" залезает на цепь. Сложно читать. В подблоке ниже такая же фигня.
+в нескольких местах блок текста выглядит в виде т.н. "расчёски". Выглядит некрасиво.
6). Большинство фотографий как будто взяты со стоков. Выглядит фальшиво. Наймите фотографа за косарь. Пусть он сделает вам нормальные, живые фотографии.
+ я не нашёл фото ваших специалистов. Если это ручная работа, то покажите мне ваших сотрудников.
7). Не нашёл адреса. Укажите. Чай, не ядерные подлодки строите. Повысит доверие.
8). Такая выгода, как "доставка для клиентов — бесплатно" убрано аж в самый низ сайта. Почему?
9). Добавьте в шапку способ связаться с вами (телефон). Чтобы не пришлось листать вниз. Не все оставляют заявки на сайте. Многим выгодно сразу позвонить.
P.S. Оказывается у вас есть каталог! Нашёл его через минуту. Почему-то на внутренней странице, хотя должен быть на главной сразу под первым экраном.
Это из того, что сразу бросается в глаза.
АХААХАХАХАХ. Укажите, поменяйте, добавьте, приведите к единому стилю. Ты в курсе что ты не имеешь к этому проекту никакого отношения?
и?
свободен
Писданул и слился, ок)
До того как стать интегратором занимался созданием сайтов на тильде. Тогда еще поглядывал на вас и ваши работы. Круто делаете, с душой, до сих пор подписан на ваш *нельзя называть* и рекомендую клиентам.
спасибо, очень приятно)
Веду несколько сайтов на тильде, так вот всякие штуки у вас посматриваю, вы крутые, кейс хороший! У меня есть хорошие кейсы по SEO на тильде, как-нибудь напишу статьи если руки дойдут, там и ваши фишки есть.
хорошо сработали, дизайн и в целом все выглядит стильно и притягательно
Прочитав статью и увидев новый дизайн сразу захотелось что-то да заказать
С огромным уважением отношусь к Молнии и критиканства а-ля Федор Чернов не разделяю, но пару моментов в кейсе всё же хочу отметить. 14 тысяч посетителей с 2021 года — это немного. У меня в Шрифтотеку, без всякой рекламы, чуть меньше заходит в месяц. Средняя конверсия 2% — для лендинга услуги очень неплохо, но всё же не 5, как в заголовке.
А сайт сделан отлично, убедительно, вопросов нет. Разве что ссылку на каталог готовых украшений можно положить на более видное место, чем бургер — и это ещё увеличит конверсию.
как круто смотрится терновое кольцо
Выглядит очень стильно и дорого!
1. Определить целевую аудиторию и ее потребности. Необходимо понимать, кто является вашей целевой аудиторией, какие проблемы она имеет и как ваш продукт/услуга может решить эти проблемы.
2. Создать привлекательный дизайн. Дизайн сайта должен быть современным, чистым и удобным для пользователей. Важно также использовать яркие цвета и убедительные изображения.
3. Оптимизировать сайт для поисковых систем. SEO-оптимизация поможет увеличить количество органических посетителей на сайте и повысить его позиции в результатах поиска.
4. Предоставить четкую информацию о продукте/услуге. Важно описать все преимущества и особенности продукта/услуги, чтобы пользователь понимал, что он получит от покупки.
5. Создать убедительные CTA (вызовы к действию). На сайте должны быть яркие и заметные кнопки, которые будут вести пользователя к покупке или заполнению формы.
6. Проводить A/B-тестирование. Тестирование различных вариантов дизайна, текстов и CTA позволяет выявить наиболее эффективные варианты для увеличения конверсии.
7. Следить за аналитикой. Важно анализировать данные о посещаемости сайта, поведении пользователей и конверсии, чтобы улучшать сайт и увеличивать его эффективность.