Лендинг-шаблон для ювелирного завода KARATOV
Мы очень ценим, когда наши клиенты после окончания проекта обращаются к нам с новыми задачами. Так к нам пришёл и этот проект: ранее мы сделали мастер-шаблон для магазина зоотоваров «Ле’Муррр», менеджер остался доволен работой с нами, и нам доверили новую задачу — разработку лендинга с ювелирными украшениями уже для бренда KARATOV.
Содержание:
Клиент и задача
KARATOV — костромской ювелирный завод, специализирующийся на изготовлении бриллиантовых украшений. Бренд продаёт коллекции через собственный интернет-магазин, а также через маркетплейсы.
К нам бренд обратился за разработкой лендинга под рекламу коллекции «Танцующие бриллианты». Уникальность технологии изготовления этих изделий в подвижной оправе, благодаря которой бриллиант красиво покачивается и переливается. Дизайн основной страницы сайта с товарами не раскрывал особенности и преимущества украшений, поэтому возникла потребность в отдельном лендинге.
Перед нами встала задача на разработку лаконичной и современной страницы. Также клиент обозначил, что планирует в будущем использовать данный лендинг и под другие коллекции, поэтому мы сделали страницу-шаблон с редактируемыми блоками и подробную инструкцию к ним, за счёт чего сэкономили бюджет заказчика.
Процесс
Разработка лендинга — это искусство раскрытия преимуществ продукта на небольшом количестве экранов. Его структура должна быть удобным проводником, закрывающим все вопросы пользователя и подводящим к целевому действию. А чтобы сохранить интерес потенциальных клиентов, важно не перегрузить лендинг длинными текстами.
Перед началом работ мы собрали подробный бриф для выявления всех ожиданий заказчика к лендингу. Так мы смогли сразу выявить и обсудить все вопросы, влияющие на ход разработки проекта.
Далее мы приступили к разработке лендинга. Она состояла из восьми этапов:
1. Подбор референсов
Мы собрали референсы для каждого блока лендинга, чтобы сразу прийти к согласию по стилю и цветовой палитре:
2. Черновой дизайн
После обсуждения референсов мы подготовили черновой дизайн мобильной и десктопной версий. В нём мы предложили несколько вариантов расположения текстовых и графических материалов:
3. Тексты
При работе над текстами мы внимательно изучили сайт заказчика и всю имеющуюся информацию по продукту, чтобы сохранить ключевые смыслы и Tone of Voice. Так как предварительно мы разработали черновой дизайн лендинга, тексты мы писали, опираясь на готовую структуру.
4. Дизайн
На этом этапе мы разместили текст на согласованной структуре лендинга и доработали визуальное оформление. Также мы нарисовали состояния для каждого из блоков и собрали UI-кит — набор элементов лендинга (кнопки и поля для ввода данных).
Особое внимание мы уделили блоку с отзывами. Его нужно было сделать разнообразным, но не слишком усложнять структуру, ведь в дальнейшем заказчику потребуется редактировать код этого блока самостоятельно.
Мы решили ограничиться тремя вариациями блоков:
- текстовый отзыв;
- видеоотзыв с одним видео;
- текстовый отзыв с несколькими фотографиями.
5. Вёрстка
Одним из главных пожеланий заказчика было использование движущейся модели украшения. Этот запрос мы реализовали через размещение видео с автоматическим воспроизведением в первом и четвёртом блоках лендинга. Так мы смогли «оживить» сайт и наглядно продемонстрировать технологию «Танцующие бриллианты».
Первый блок лендинга — самый важный из всех, ведь именно он встречает пользователя после перехода на сайт. Поэтому мы уделили ему особое внимание. Мы настроили автоматический переход на статичный баннер после завершения проигрывания видео. А также добавили к видео и к баннеру кнопку с якорной ссылкой на страницу оформления заказа, чтобы пользователь мог совершить целевое действие, не тратя время на скроллинг.
Также, для удобства пользователей, мы предусмотрели возможность быстрого возвращения к началу лендинга за счёт добавления стрелки в правый нижний угол страницы.
После завершения вёрстки мы наполнили страницу полученными от заказчика фотографиями изделия и отзывами клиентов.
6. Подготовка инструкции
Так как мы разработали страницу только для одного товара и в дальнейшем она будет использоваться как шаблон для остальной продукции, было важно подготовить максимально подробную инструкцию по редактированию всего контента лендинга.
Инструкцию мы разбили на разделы: подробно описали общие правила работы с кодом и правила редактирования каждого блока в частности, с наглядными примерами и прописанными требованиями к графическим материалам.
После отправки инструкции нам было важно оказать поддержку в её правильном понимании. Мы собрали с заказчика список всех возникших при изучении вопросов и дали подробные письменные ответы на них, дополнив документ.
7. Аналитика
Параллельно с подготовкой инструкции мы настроили для лендинга счётик Яндекс Метрики по всем основным целям: клики по кнопкам, по номеру телефона, по логотипу, отправка формы покупки, переход в соцсети. Настройка целей позволит отслеживать поведение посетителей на сайте и измерять конверсию. Далее мы разместили на сайте код счётчика и протестировали его работоспособность.
8. Интеграция с гугл-таблицей
Параллельно с подготовкой инструкции и настройкой аналитики мы занялись настройкой передачи данных из формы лендинга в гугл-таблицу: имени, телефона, адреса посещённой страницы, даты и времени создания заявки. Далее мы тщательно протестировали интеграцию и подготовили подробную инструкцию по работе с таблицей.
На одном из этапов служба безопасности клиента отклонила решение с гугл-таблицей, но мы не растерялись и рассмотрели другие варианты. Остановились на передаче данных на почту с использованием шифрования.
Результат
Клиент остался доволен готовым лендингом. Работу, оговорённую на старте, мы сдали в срок, а также оперативно сделали все доработки по новым пожеланиям клиента в процессе.
Отзыв клиента
Больше всего нам понравилась реализация технологии движения на первом экране лендинга, ведь ключевая особенность раскрывается именно в момент, когда камень «оживает», двигаясь в двух плоскостях, улавливая малейшие колебания и создавая неповторимую игру света и цвета. А отзывы клиентов органично дополняют презентацию продукта и добавляют странице живой пользовательский контекст.
Отдельной важной задачей было сделать лендинг не просто разовым успешным проектом, а универсальной основой для будущих страниц, посвящённых уже другим украшениям. Для этого командой был разработан редактируемый шаблон и подготовлена подробная инструкция по работе с ним. Инструкция пошагово разбирает общие правила редактирования и детально рассказывает об особенностях каждого блока, приводя примеры и указывая требования к графическим материалам. Для нас это особенно ценно, поскольку предоставляет возможность в дальнейшем самостоятельно адаптировать готовое решение под другие продукты, не начиная разработку с нуля.
Также хотим выделить работу с командой агентства. Менеджеры и специалисты относились ко всем нашим правкам и возникающим в ходе работы комментариям с открытостью и вниманием, спокойно перестраиваясь и пересматривая решения, предлагая альтернативные варианты, когда в процессе работы появлялись изменения. Для нас было важно увидеть, что даже при изменении требований команда не останавливается на первоначальном варианте, а ищет рабочее решение. При этом ребята проявляли личную инициативу, активно вносили свои предложения, помогали разобраться с техническими моментами и отвечали на возникающие вопросы.
В результате мы получили лендинг, позволяющий в полной мере раскрыть преимущества флагманской коллекции бренда «Танцующие бриллианты». При этом разработанный шаблон позволяет нам использовать полученное решение и в дальнейшем, уже для других коллекций и украшений.
КОМАНДА
ПРОЕКТА
