Улучшили юзабилити сайта и увеличили конверсию пользователя в клиента на 24%
- Заказчик
- Cleo Line – косметологический центр, который более 12 лет помогает клиентам сохранить красоту и здоровье.
- Задача
- Нам предстояло проделать комплексную работу над сайтом, чтобы внедрить новые SEO-рекомендации, автоматизировать некоторые функции и исправить ошибки.
Cleo Line – косметологический центр, который более 12 лет помогает клиентам сохранить красоту и здоровье. Клиника активно развивает социальные сети, но большая часть клиентов приходит через сайт.
Однако с сайтом у клиники возникли проблемы. Ограниченный функционал CMS не позволял легко изменять информацию на сайте, а неработающий поиск мешал пользователям быстро находить нужную информацию. Кроме того, сайт проседал по многим поисковым запросам и недополучал трафик из Яндекса и Google.
Так как сайт представляет главный канал продаж CleoLine, клиенту было важно повышать его позиции в поисковиках и соответствовать ожиданиям потенциальных клиентов. Для этого требовалась совместная работа отделов разработки, дизайна и SEO.
Задачи
Мы предложили клиенту переработать и внедрить новые SEO-рекомендации, автоматизировать некоторые функции, например, проставление цен, обновить дизайн и исправить ошибки на сайте.
Нам предстояло проделать комплексную работу над сайтом:
- разработать и внедрить новый дизайн сайта с сохранением фирменного стиля;
- внедрить новый функционал и доработать: сделать слайдер более компактным и добавить в него меняющиеся картинки, починить функцию поиска услуг, перейти на более современную CRM;
- автоматизировать работу контент-менеджеров, упросить занесение нового контента и редактирование старого;
- автоматизировать старт и окончание акций;
- поднять сайт в поисковиках;
- увеличить конверсию посетителя сайта в клиента;
- сделать акцент в контенте на услугах.
Но самой большой болью для клиента было занесение информации на сайт. Сотрудникам контент-отдела было сложно вносить новую информацию, поскольку
- страницы собирались из разных блоков;
- функционал не позволял использовать разные фотографии для десктопной и мобильной версий;
- для изменения цен приходилось править стоимость услуг в трех разных местах в CMS;
- все изменения вносились только вручную, и сотрудники выполняли тройную работу.
В итоге клиент был вынужден переплачивать за работу сотрудников. Требовалось упростить весь процесс контент-менеджмента и автоматизировать изменение цен.
Подготовительные работы
Перед началом работы над сайтом мы полностью изучили его структуру, провели технический аудит, usability-аудит, анализ конкурентов и целевой аудитории. Комплексный анализ позволил нам выявить слабые стороны и проблемы, которые предстояло исправить:
- Система управления сайтом не позволяла автоматизировать настройку цен. Страницы не были связаны между собой, была только система разделов и подразделов. Информация в каждом разделе была обособлена от остальных данных, из-за чего возникла проблема с изменением цен.
- Для добавления и изменения услуг требовалось не менее пяти кликов. Необходимо было открыть несколько подразделов, зайти в подраздел с услугой, перейти в редактирование, изменить запись. Это занимало много времени, усложняло процесс работы с сайтом и мешало оперативному обновлению информации на сайте.
- Из-за ограниченного функционала посетителю сайта было неудобно им пользоваться. Не работал поиск, раздел с подробной информацией об услугах находился в самом низу сайта, и его было сложно найти.
- Большое количество иконок, текстов, ярко-красных элементов в дизайне, крупное меню услуг делали сайт громоздким и неудобным для пользователя.
- Низкие позиции в поисковых системах. По сравнению с конкурентами, сайт меньше соответствовал запросам потенциальных клиентов в поиске.
Переход на с NetCat на Umi CMS
Старая CMS – NetCat – не позволяла нам внедрить весь запланированный функционал и усовершенствовать текущий. Клиенту также было важно, чтобы при переносе сайта на новую систему CRM мы сохранили весь существующий контент и не потеряли позиции в поисковых системах. Нам нужна была современная CMS, соответствующая всем запросам и задачам клиента:
- есть интуитивно понятная структура;
- внесение изменений занимает минимальное количество времени;
- контентом может управлять человек без специальных навыков;
- есть возможность автоматизации изменения цен;
- можно добавить нескольких сотрудников;
- есть встроенный модуль SEO или возможность его подключения;
- есть функционал, необходимый для коммуникации с клиентами: модуль рассылок, возможность комментирования, оформление заказов.
Учитывая все эти требования, мы выбрали систему управления сайтом Umi CMS. Она позволяет добавить весь необходимый функционал на сайт и автоматизировать рабочие процессы. Система интуитивно понятна, и мы были уверены, что у сотрудников не возникнет никаких проблем в работе.
В качестве шаблонизатора выбрали XSLT (Extensible Stylesheet Language Transformations, язык преобразования XML-документов). Его основное преимущество – возможность создания типовых операций, когда для повторяющихся действий создается алгоритм. Он нужен, чтобы минимизировать временные затраты сотрудников. Нам он оказался полезен для внесения изменений в фоновом режиме, не нарушая работу сайта.
Обновление дизайна
Все страницы компании были оформлены в фирменном стиле: как в дизайне, так и на фотографиях преобладал темно-красный корпоративный цвет, фон содержал растительные узоры, иллюстрации были выполнены в контурном стиле.
Фирменный стиль обязательно было необходимо сохранить для узнаваемости бренда, но мы решили немного его усовершенствовать и придать более современный вид.
Очень важно, чтобы сайт был удобен для пользователей, поэтому все страницы сайта рисовал наш UX/UI-дизайнер. Все разделы и подразделы созданы с учетом потребностей пользователя. Цветовая гамма осталась прежней, наш дизайнер лишь добавил больше света, частично убрав ярко-красный оттенок. Сайт стал выглядеть более привлекательно и гармонично.
Было:
Стало:
Чтобы улучшить коммерческие факторы, мы сделали особый акцент на услугах клиники. Вся информация на сайте знакомит пользователей с предоставляемыми услугами и перенаправляет их на страницу с оформлением записи, контактным номером телефона клиники или почты.
В итоге основными изменениями в дизайне стали:
- сделан более компактный баннер;
Было:
Стало:
- гармонично расставлены цвета;
- добавлены блоки «Популярные услуги» и «Виды косметологических процедур»;
- фото «До/После» оформлены в соответствии с фирменным стилем;
Было:
Стало:
- полностью переработаны блоки «Преимущества» и «Отзывы»;
- доработан блок «Аппараты»;
Было:
Стало:
- в разделах «До/После», «Статьи» и «Услуги» указаны специалисты: можно кликнуть на имя и перейти по ссылке, чтобы прочитать о конкретном специалисте;
Было:
Стало:
- исправлено и улучшено меню услуг.
Было:
Стало:
Но наибольшим изменениям подверглись блоки «Преимущества» и «Отзывы».
«Преимущества»
Для блока «Преимущества» мы создали уникальные иконки в полном соответствии с фирменным стилем сайта. Теперь они выполнены в едином стиле и выглядят привлекательнее для посетителей сайта.
Раньше кнопка «Записаться на прием» находилась в одном ряду с преимуществами и не была заметна. Мы перенесли ее под иконки преимуществ. Так потенциальный клиент сможет быстрее оформить запись. А его путь будет проходить следующие стадии:
«прочтение преимуществ услуги -> осознание выгоды для себя -> обращение внимания на кнопку записи -> запись на прием».
Было:
Стало:
«Отзывы»
На старой версии сайта его текст блока «Отзывы» сливался в единое полотно: не было цветовых акцентов, название блока находилось на одном уровне с текстом отзыва и ответом. Кнопки «Написать отзыв» и «Все отзывы» не выделялись, поэтому клиенты не переходили по ним.
Название блока мы перенесли выше, непосредственно перед отзывами. Кнопку «Все отзывы» мы заменили стрелкой красного цвета, функция которой интуитивно понятна интернет-пользователям. Добавили имя клиента и разделили тексты отзыва и ответа компании.
Мы также создали стрелки для пролистывания отзывов вручную, чтобы пользователь мог сам контролировать скорость чтения.
Было:
Стало:
Внедрение нового функционала и тотальная автоматизация
Справочники для автоматизации цен
Чтобы решить проблемы с времязатратным изменением цен, мы использовали справочники. Все цены мы оформили в виде справочников, которые подгружаются в несколько мест на сайте. Для изменения стоимости услуги необходимо внести правки только в одном месте – в самом справочнике.
Такая структура помогла не только с внесением изменений в ценники. Мы также настроили автоматическое добавление цен на страницу каждой услуги. Созданные нами справочники с ценами разделяются на виды услуг и автоматически высвечиваются у каждой услуги.
Автоматизация услуг
Автоматизация коснулась и услуг, где указывается стоимость «От …». Из цен, указанных для конкретной процедуры, система выбирает наименьшее значение, например «От 10.990». На таких страницах отображается минимальная стоимость за услугу, что позволяет пользователю понять примерный ценовой диапазон услуг.
Автоматизация акций
Мы предусмотрели возможность установки цен в ручном режиме в отдельном поле. Такая функция пригодится, если клиент захочет изменить цену на время акции.
Добавление акций мы тоже автоматизировали, а точнее настроили даты начала и окончания. Акция будет неактивна до даты начала и завершится в назначенный день. Это упростило работу сотрудников и избавило от задержек в старте акций, так как больше не нужно добавлять акцию в последний момент перед запуском.
Адаптивный дизайн
Мы сделали дизайн сайта адаптивным, чтобы его было удобно просматривать на любом устройстве. Мы добавили два варианта каждого изображения для десктопной и мобильной версии. Оптимизированные для смартфонов картинки стали загружаться намного быстрее, и скорость загрузки страниц стала максимально высокая – 0,3–0,5 секунд.
Мы также разработали поиск по услугам. Теперь пользователи могут быстро найти интересующую информацию. В выдаче показывается превью страницы – основная информация статьи.
SEO-продвижение
Хороший сайт не гарантирует большой приток посетителей, поэтому еще одной нашей задачей было вывести сайт в топ поисковых систем по ключевым запросам. Пользователи переходят на сайт как из Яндекса, так и из Google, поэтому позиции нужно было улучшить в обоих поисковиках.
Мы собрали полное семантическое ядро, включив в него все запросы, по которым пользователь может перейти на сайт. Наши специалисты написали большое количество статей, органично вписав в них ключевые запросы.
Новые тексты помогли поднять сайт в топ Яндекса почти по всем запросам и увеличить трафик в Google.
Результаты
Мы учли потребности администратора сайта, условия поисковых систем и удобство пользователя. Новые функции и дизайн позволяют комфортно пользоваться сайтом:
- Новая CMS решила проблему заказчика с ценами. Теперь внесение изменений не требует многократной лишней работы, а стоимость нужно менять только в одном месте – справочнике. Мы также закрепили цены за каждой услугой, чтобы они автоматически появлялись в разделе «Услуги».
- Изменили дизайн, учитывая все потребности пользователя. Добавили новые блоки и улучшили старые, чтобы сайтом было максимально удобно пользоваться. Проанализировали, насколько новый сайт соответствует потребностям посетителей. В результате теста выяснили, что новые функции позволяют быстрее искать информацию на сайте, а новый дизайн выглядит более эстетично, так как яркого красного цвета стало меньше.
- Настроили поиск по услугам.
- Увеличили посещаемость сайта, продвинули сайт в топ Яндекса по многим поисковым запросам и улучшили его видимость в Google. Например, по запросу «Лимфодренажный массаж» сайт входит в топ-10 выдачи Яндекса .
- Увеличили конверсию посетителя сайта в клиента клиники на 24%.
Дальнейшее сотрудничество
Разработка нового дизайна сайта и внедрение новых функций заняли у нас два месяца. Но и после принятия работы клиентом мы продолжаем сотрудничество с Cleo Line в SEO-продвижении. Мы пишем статьи для клиники, чтобы повысить охват и осведомленность клиентов о процедурах. Ежемесячно наши специалисты готовят рекомендации по SEO. Мы согласовываем их с заказчиком, а затем отдел разработки внедряет все необходимые изменения.