Главная » Статьи » Разработка сайта клиники восточной медицины “Тибет”

Разработка сайта клиники восточной медицины “Тибет”

ЗаказчикКлиника восточной медицины ЗадачаРазработка сайта для клиники восточной медицины

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

128c61bd88e2d242191fded1f07ea1a0.png

Разработка сайта клиники восточной медицины «Тибет»

Дизайн и разработка сайта на 1С-Битрикс для одной из первых клиник восточной медицины в Москве. 

747f5929dd2253e2a95b251ec8f1e53a.png

78ba9f224bd060f52c5b0516010436d8.png

В начале работы провели брифинг и зафиксировали пожелания клиента:

  • Сайт должен вызывать доверие пациентов и отражать высокий уровень профессионализма сотрудников клиники.
  • Соответствовать современным требованиям UI/UX дизайна. Внешний вид сайта должен быть выполнен в классическом, сдержанном стиле медицинских сайтов.
  • Сайт не должен ассоциироваться со СПА-салонами, массажными кабинетами и прочими околомедицинскими организациями.

Делаем UX/UI-аудит

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

Задачи аудита следующие:

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

01e72cdb58dcbaf8842ee2aa26f9fa77.png

Главная рекомендация:

Люди хотят ознакомиться с услугами клиники и узнать об особенностях восточной медицины подробнее. Информация должна быть подана коротко и интересно. Большие полотна текста почти никто не читает. Требуется визуальное повествование.

6b0bca39948fac6f855471fcafe74ca6.png

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

Основные проблемы

  • Сайт выглядит слишком строгим и консервативным, он лишен индивидуальности и не цепляет.
  • Мало внимания уделено обработке основных возражений, которые есть у посетителя по отношению к восточной медицине. Для части аудитории иглоукалывание, остеопатия и прочее — это нетрадиционные методы лечения. Нужны конкретные этапы убеждения пользователя. 
  • На изученных страницах нет фото интерьеров клиники, что тоже вызывает недоверие.
  • Около 75% аудитории приходит на сайт с мобильных устройств. Адаптивность сайта реализована не очень удачно, нужно переделать версию для 
  • Компоновка страницы в несколько колонок выглядит устаревшей. Нужно перерабатывать структуру, чтобы уменьшить процент отказов. 

1048e11b3a7a9a6bb4e872e79ad6ccb2.png

Готовим концепцию дизайна

Мы подготовили несколько вариантов с разными дизайнерами и показали их заказчику. 

9c4a2f5c2f0326a4507e08b9a8dd3fa5.png

a155728515db924c924a0ccc353e3e4e.png

Клиент одобрил вариант №4. Берём эту концепцию для дальнейшей проработки дизайна. 

Готовим палитру сайта

Большинство современных медицинских сайтов оформлены в «холодных» голубых и синих тонах.

f86ad932362323b784623e57c20c463c.png

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

6d17c2b4aeb31c04a92c334ded4b9d4a.png

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

e701195facb52842248fba16161a6eab.png

 Светло-коричневый цвет ассоциируется с востоком и восточной культурой. В качестве фона оставили приглушенный серый цвет.

35d6f0afded637f712889feccf61eff9.png

Для конверсионных элементов мы решили использовать яркий и контрастный красный цвет.

3655d1a3c28fd70f2d4223c7c8321a84.png

С выбором основных цветов сайта завершили. Приступаем к проработке основных шаблонов сайта.

Разработка макетов страниц

ffe36ebc702ea8bf33033bc88e30f020.png

Главная страница

Основной проблемой главной страницы было отсутствие логической структуры.  На первых экранах размещена вся возможная информация, которая хаотично «вываливается» на пользователя. 

1da66f564f3a6ab41b9f9d28f1629959.png

 Главная страница cтарого сайта

Мы структурировали информацию на странице: в первый экран вывели офферы, влияющие на конверсию, а далее по степени важности для пациента блоки.

ad054232f09df380b00817c65f659bda.png

Новая главная страница

Раздел заболеваний

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

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

a5e94550ce7351e06b802786a667b0d0.png

Страница врача

Структурировали информацию о врачах и привели ее к единому виду во всех карточках (образование, сертификаты, награды и т.п.). Вывели отзывы о враче, а так же его публикации из блога, что повышает уровень доверия к специалисту в глазах пациента.

Чтобы фотографии врачей были в едином стиле — организовали фотосессию. Наш фотограф приехал с оборудованием и сделал профессиональные фото всех специалистов (~15 минут на врача), интерьеров клиники, а так же процесса оказания некоторых услуг.

734fe62b5e32f2ec235a1a4ce8d39815.png

 Новый шаблон карточки врача

Страница услуги

Страница с услугой на старом сайте была слишком перегружена информацией и не структурирована с точки зрения принципа цикла продаж. 

При скролле разделы сливались друг с другом, так как имели однотипное оформление. Пользователь не мог за что-то «ухватиться», из-за чего увеличивался показатель отказов.

14daf1ebab7858fdc1112a969f0c258a.png

Новый шаблон страницы услуги

Это лишь часть работы над основными шаблонами сайта. Все их, конечно же, в кейсе мы показывать не будем, но вы можете посмотреть готовый рабочий сайт. 🙂

5973c944dfaa8024d2b748d285f3ebd7.png

Готовый дизайн мы сверстали и протестировали в разных браузерах и на разных устройствах. Сверстанные макеты интегрировали с движком 1С-Битрикс. Параллельно перенесли важный контент со старого сайта (более 500 страниц), провели финальную проверку и выкатили сайт на рабочий домен. Пять месяцев и сайт готов. 

Мы внимательно следим за поведенческими показателями пользователей, замеряем разницу и проводим новые эксперименты с интерфейсом. Сразу после релиза показатель отказов снизился, а конверсия значительно подросла.

fb26cb059c4169c7ead1b866b1fff90e.png

Приходите к нам за сайтом, который создается на основе твердых данных из исследований и многолетнего опыта работы с медицинским бизнесом!

ea1e9049fc4f422f40b13ec22a4127b0.png

Перейти на сайт

Полный текст статьи читайте на CMS Magazine

↓