Обновление сайта клиники. Внедрение игровых и социальных механик.

1. Вводная задача от заказчика, проблематика, цели

32Дент – сеть стоматологических клиник с высокими темпами роста и с планами стать сетью №1 в Москве по количеству клиник.

Основной источник привлечения клиентов – Интернет. Так, конверсия с сайта превышает 10%, а количество страниц перевалило за 6000. При этом мобильная аудитория сайта неуклонно растет, а текущая версия уже не отвечает современным требованиям: главная страница и страницы услуг сильно вытянуты и занимают более 10 экранов при прокрутке, а весь первый экран занимает шапка сайта.

Поэтому перед нами поставили задачу упросить структуру, сделать мобильную версию (сайт изначально адаптивный) полноценной альтернативой основной версии сайта, учесть требования SEO и предложить дополнительные решения по увеличению конверсии.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

• Первым этапом мы поделили всю информацию на сайте на две части: основную и второстепенную.

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

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

Вторую группу составили различные статьи, видео и вопросы-ответы.

• Вторым этапом стали работы над упрощением внешнего вида сайта.

Мы здесь отказались от трехколоночной структуры сайта. Так как это усложняло восприятие важной информации в десктоп-версии и удлиняло страницы на мобильных устройствах и в целом было актуально только для крупных тематических порталов.

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

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

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

• Третий этапом - работа со страницей услуги.

Текущая страница имела структуру landing page и нет необходимости посещать еще какие-то страницы. Мы идею развили, расставив акценты и добавив навигацию по странице. Вверху страницы поместили следующие якори: описание, стоимость, примеры работ, рекомендации и врачи. При этом на странице расположилось гораздо большее число блоков (вопросы-ответы, общая информация, SEO-текст, видео, статьи и т.д.), однако они не выводятся в навигации, чтобы не отвлекать от принятия решения. Их задача предоставлять информацию особо интересующимся пользователям. Дополнительно слева разместили плашку с услугами, близкими по содержанию открытой странице. В результате пациент может не выбирать особо тщательно услугу в меню, а выбрать наиболее близкую, а далее, с помощью вспомогательной плашки определиться окончательно.

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

3. Результаты сотрудничества

• Сайт внешне сильно упростился, навигация по нему стала понятней. Сайт стал одноколоночным с навигационной плашкой слева, в зависимости от страницы. Ширину сайта зафиксировали на уровне 1200 пикселей. В результате, сайт более а не заполняет, как прежде, весь экран.
• Дизайн сайта выполнен в легкой цветовой гамме, голубых и белых тонах. Исключение составляют только триггеры, выполненные в ярко оранжевом цвете. Выделяясь, триггеры при этом смотрятся гармонично и не выглядят инородными объектами. В целом на сайте появилось много воздуха: между блоками, в самих блоках. То же самое касается меню, оно компактное, плавающее, второстепенная информация спрятана в разделе — «Пациентам».
• Работа с сайтом с телефона стала полноценной альтернативой работе с компьютера! Страницы на мобильных устройствах практически идентичны по высоте аналогичным страницам на экране компьютера, а где-то и компактней! Таким образом, удалось создать уникальный адаптивный сайт, с которым удобно работать с любого устройства.
• Навигация по страницам услуг значительно улучшилась. Теперь нет необходимости скроллить или искать услугу, для первого есть навигация, для второго — единое меню услуг и плашка со смежными услугами.
• Внедрение игровых и социальных механик дало свой результат: конверсия дополнительно выросла на 25% и составила свыше 12,4% от числа перешедших на сайт!