Цифровой госпиталь и медицина на 360°: как мы обновили сайт частной клиники №1 в России
Иногда больницы у русского человека вызывают недоумение и страх: процедурный кабинет, где пахнет лекарствами и не только, представили? Но зачастую это наши страхи из детства и юношества суровых 90-х, потому что сейчас всё иначе.
В этой статье мы расскажем нашу историю, как мы, AGIMA, провели редизайн сети медицинских клиник премиального сегмента: какие задачи бизнеса нужно было решить, как рассказать о новой услуге с помощью дизайна и динамических иллюстраций, зачем начинать проектирование с копирайтинга и что изменилось в интерфейсе. А еще как можно применить подобный подход для своего бизнеса, когда есть крутой офлайн, а его онлайн-аналог устарел. Разбираемся, что делать.
Интро: АО «Европейский Медицинский Центр» (ЕМС) — одна из крупнейших частных медицинских компаний России. В EMC работает более 600 врачей из Западной Европы, США, Израиля, России. Ежегодно проходит лечение до 90 000 пациентов. В состав EMC входят 9 медицинских центров в Москве и Московской области. EMC работает по всем медицинским направлениям, предлагая пациентам индивидуальный комплексный подход к заботе о здоровье и доступ к инновационным методам диагностики и лечения.
Редизайн в цифрах
Наша команда разработки проекта: 24 специалиста.
Посетителей сайта в месяц: 1084360.
Клиентов ЕМС: 20%.
Старый сайт хорошо справлялся с SEO-задачами маркетинга: там был большой объем статей на медицинские темы, благодаря которым мы привлекали трафик и расширяли семантическое ядро. Однако пользовательский опыт сильно изменился за последние пять лет, и сегодня одного SEO недостаточно. Мы хотели буквально с первого экрана, показать, что в EMC есть многолетняя экспертиза, а с помощью современных инструментов клиника может перенаправлять клиента в ту точку, где он получит квалифицированный ответ или запишется к нужному специалисту. Проще говоря, совершит целевое действие здесь и сейчас.
В конце 2019 года ЕМС сфокусировалась на новом подходе «Здоровье на 360°». Его цель — сформировать индивидуальный roadmap каждому клиенту, став медицинским советником на протяжении всей жизни на пути к longevity, помочь пациентам на каждом шаге к долгой, комфортной и при этом активной жизни. Адаптировать старый сайт под новое позиционирование не получалось: он уже устарел технологически и структурно. Помимо этого была еще одна проблема: дизайн больше подходил для государственного учреждения, а не для частной клиники, одного из лидеров в премиальном сегменте в России.
Четыре главные задачи:
- Создать онлайн-платформу представительства премиального мультиплатформенного цифрового госпиталя, полностью переработать структуру сайта и основательно развернуться лицом к пользователю.
- Сфокусировать посетителей на новой парадигме «Здоровье 360°».
- Подготовить сайт под изменение бизнес-процессов и добавить новые инструменты, которые позволят совершать большее количество целевых действий.
- Сохранить SEO-позиции в поисковой выдаче после запуска обновленного сайта.
1. Исследуем и анализируем
Сначала провели предпроектное обследование, пообщались с топ-менеджерами клиники и выявили четыре основных проблемы в интерфейсах, которые мешали использовать старый сайт на максимум и не отражали luxury-позиционирования:
- Сайт устарел как технологически, так и структурно.
- Дизайн сайта ассоциируется с государственным учреждением.
- Контент сайта напоминает «Большую советскую энциклопедию» с огромным количеством текста и не отвечает современным представлениям о сайте премиум-клиники с передовыми технологиями и компетенциями.
- Весь контент смешан: новости, публикации — много сущностей в одном разделе, дублирование контента в разных разделах. Это путало пользователей.
2. Проектируем здоровье на 360°
В создании сайта у нас было 2 разных подхода, и оба отлично сработали:
1. Главную страницу мы проектировали от текста. Сначала подключили копирайтеров и редакторов, которые забрифовали команду, а потом нарисовали прототип.
2. Остальные страницы сперва были спроектированы с учетом требований заказчика, а потом в них был добавлен текст.
Оба этих варианта применимы для разработки дизайна сайта. Первый будет более насыщенным с точки зрения контента, второй — чуть более функциональным.
При формировании новой структуры сайта мы погрузились в аналитику и цифры: оценили текущий сайт с позиции пользовательского трафика, определили структуру для новых разделов, проверили ее исходя из базовых сценариев и протестировали на пользователях. Самыми популярными разделами оказались клиники, статьи, главная и сервисы. Как мы выяснили, наиболее распространенный пользовательский сценарий — посмотреть симптомы болезни, изучить стоимость лечения и записаться на прием к профильному врачу.
Мы провели проверку гипотез полезности меню и проверили, насколько предложенные разделы соответствуют потребностям пользователей и какие шаги нужно добавить к планированию визита. 40 человек, которые принимали участие в опросе, оценивали пункты раздела меню «Спланировать визит» по шкале от 1 до 5. Выше всего респонденты оценили форму записи на прием к врачу и анкету для новых пациентов, а вот размещение на время обследования и услуги для иностранных пациентов оказались наименее актуальными.
Графическая структура, которую сделали на этапе проектирования
3. Разрабатываем редизайн медицинского центра
Закончив с функциональной частью сайта клиники, мы перешли к UX/UI-обновлениям.
Главная
На главную вынесли сервисы, которые позволяют сразу находить нужный канал коммуникации с клиникой и переходить туда. Мы аккуратно вписали рассказ о концепции «Здоровье на 360°»: интерактивная вставка с рассказом привлекает внимание, но не мешает посетителям, которые пришли за конкретной услугой или к конкретному врачу.
Основная задача главной страницы — привести клиента на сайт и совершить конверсионное действие: записаться к нужному специалисту, заказать обратный звонок, скачать мобильное приложение, перейти в чат или нажать кнопку SOS. Как показывает NPS, негативных факторов с точки зрения неудовлетворенности посетителей сайта нет.
Подбор специалистов
Этот раздел мы тоже реструктурировали. На сайте появился список всех врачей, работающих в клинике. Для выбора специалиста посетитель может воспользоваться поиском или набором фильтров. Здесь же мы добавили интеграцию с МИС (медицинская информационная система) — возможность сразу же выбрать дату и время и сформировать запись.
Информация была плохо структурирована и не всегда удобно считывалась на всех страницах сайта. Мы добавили перекрестные ссылки на клиники, в которых работает специалист, разбили большие куски информации по подразделам для быстрого поиска нужного опыта специалиста, отзывов, статей и видео, относящихся к профилю доктора. Добавили фотографии докторов в единой стилистике, а в общей сложности наши дизайнеры обработали для этого раздела более 500 фотографий, чтобы объединить их в одну стилистику.
Запись к врачу на прием
На старом сайте была только форма заявки, где клиенты описывали симптомы болезни и оставляли свои пожелания по времени посещения. На новом сайте мы сделали виджет записи к врачу напрямую в расписание специалиста, то есть теперь клиент не ждет пока ему ответят, — он может сразу записаться на удобное время. Это разгрузило операторов колл-центра, которые были вынуждены получать задания, подбирать свободные слоты врачей и отзваниваться клиенту.
Такое решение позволило нам не увеличивать штат ассистентов и центра клиентских коммуникаций, закрывать бОльшие объемы задач. Звонков стало на 20% меньше, но количество диалогов в WhatsUp Business увеличилось вдвое. Фактически нам удалось перевести клиентов из голосового канала коммуникации в неголосовой — 31% голоса ушло в чаты. Оператор может параллельно вести 3-5 диалогов в WhatsUp, благодаря чему мы освобождаем голосовой колл-центр для работы с более серьезными задачами клиентов.
Новости
Статьи — один из самый популярных и важных разделов сайта. Материалы подчеркивают экспертность врача и помогают посетителю в выборе нужного специалиста.
В старом разделе «Новостей» были статьи, публикации и множество другой информации. Пользователям было сложно ориентироваться в материалах, поэтому мы разделили все на подразделы «Новости», «СМИ о нас», «Страницы специализаций» и другие.
Над «Новостями» работали вместе с SEO-специалистами EMC. Поскольку мы переносили старые материалы на новый сайт и полностью меняли структуру раздела, важно было учесть все редиректы старых публикаций. Это помогло безболезненно продолжить поисковое продвижение экспертного контента и попадать в топы ранжирования поисковых систем.
Немного цифр о переносе информации:
- карточек специализаций — 285;
- карточек врачей — 623;
- карточек программ — 56;
- карточек услуг — 233;
- карточек статей — 442;
- карточек заболеваний — 287;
- карточек новостей — 589;
- карточек вопросов и ответов — 246.
Новые фичи
Клиенты EMC, которые ждут прибавления в семействе, могут гибко сконфигурировать услугу будущих родов. С помощью калькулятора легко понять, как дополнительные опции влияют на финальную стоимость. А на послеродовой период можно сразу добавить необходимые и персонализированные услуги, которые понадобятся молодой маме.
На новом калькуляторе мы четко обозначили шаги оформления программы, — раньше было сложно считать, что оформление пошаговое. Также представили в понятном виде информацию о различиях палат, входящих в программу, включенных докторах и заказе дополнительных услуг.
Чтобы сайт был гармоничным, мы сохранили преемственность сферы в деталях на страницах
4. Рисуем динамические иллюстрации
Чтобы полноценно раскрыть суть новой услуги, мы нарисовали динамические иллюстрации: сферу и точечного человека. Сфера демонстрирует высокотехнологичность услуг и показывает, что в клинике можно заботиться о здоровье комплексно — на 360°. Динамическую сферу повторяет «точечный человек», который отражает идею связанности: все в организме человека оказывает взаимное влияние друг на друга.
Здоровье — сложный механизм, в котором большое количество взаимодействующих систем и органов. Интерактивная сфера, которую предложили в AGIMA, полностью совпадает с нашим представлением о клиентском опыте, как онлайн, так и офлайн, и в целом о концепции client/patient relationship: всего, что касается любых точек взаимодействия между нами и клиентами. При этом элементы сферы пронизывают весь сайт и создают единый образ, которого мы так хотели добиться.
Еще одним рисованным объектом нового сайта стало главное здание клиники EMC в гравюрно-инженерном стиле. Анимированная 3D-иллюстрация дополняет образ премиальной клиники и отражает технологичность и современность.
Итог
Вместе с командой ЕМС мы перенесли офлайн в онлайн и создали полноценный цифровой госпиталь: у пациентов клиники появилась возможность на одной площадке создать свой инструмент контроля за здоровьем и здоровьем своих близких. Теперь пользователи могут комфортно записаться к врачу, рассчитать стоимость услуг, подготовиться к появлению ребенка на специальном калькуляторе и изучить информацию о клиниках, не выходя из дома.
Вместе с AGIMA нам удалось добиться того, что вся 30-летняя экспертиза ЕМС считывается в 1-2 скролла на сайте. Клиент может в пару кликов выбрать нужное целевое действие и найти всю необходимую информацию. Мы выделили основные направления деятельности и донесли до клиента новую миссию — увеличить продолжительность и качество жизни, помочь оставаться активным долгие годы — здесь основная роль ЕМС для клиента как основного медицинского партнера на всю жизнь. Элементы анимации и геймификации подчеркивают современный подход и инновации, которыми мы активно занимаемся и которые пропагандируем. Наш сайт стал бренд-амбассадором продвижения всех инноваций от ЕМС. Метрики также подтверждают позитивные изменения: глубина и время просмотра на новом сайте увеличились в два раза, а количество отказов сократилось на 20%.
Совсем недавно сеть клиник EMC стала лауреатом премии Luxury Lifestyle Awards. Их официально признали лучшим в Европе медцентром в премиум-сегменте.
Так вот кого надо проклинать за этот интерфейс. Теперь невозможно увидеть последние новости, которые отлично видны в приложении. Форму записи в погоне за инноваций угробили, проще позвонить и голосом записаться теперь. Фу
Вы один тех из немногих пользователей, кому на сайте клиники нужны новости. Простите что пришлось ущемить ваши потребности
верно, хуже стало
по версии самой клиники?
Комментарий удален модератором
Это конечно маркетологи в работе )
полностью звучит "частная платная клиника №1 по оказанию высокотехнологичной помощи."
Комментарий недоступен
Интересно конечно, что ваш коментарий в нектором роде тоже прекрасная иллюстрация этого эффекта ))
поздравляю, вы самоутвердились за счет других
Хороший и подробный кейс, спасибо.
Мария, а почему все ваши комментарии только к статьям от AGIMA? 🤔
У.Е.!? Не, серьезно?
А типа парсить с сайта ЦБ курс и выводить в валюте не 90-х, а нормально, не?
$ - доллар
€ - евро
Это как раз политика клиники, думаю выбора не было. У них и внутри клиники это есть.
Чтобы европейцам считать в Euros, а американцам в Dollars 😂
Какая-то невероятно неудобная и нелепая работа
можно конкретнее? или вы тут просто самоутвердиться?
Агима, блин, у вас дизайнеры приличные деньги получают. Неужели нужно было использовать самую первую фотку со стока?
https://uvgullascollegeofmedicine.com/medical-education-in-philippines/
Да это просто сестра близнец ))
А вообще стоковые фото это конечно боль, с которой сложно бороться. Для минорного блока покупать экслюзив на гетти да еще и с ограничением по времени — странно.
Да и клиенты клиники врядли обладают такой насмотренностью чтобы узнать повторяющийся образ...
Вобщем да это пролема но не та которую нужно решать
Я надеюсь все из-за того, что джуна отправили. Не хочу верить, что главный дизайнер это делал.
Вы забыли добавить бэкграунд, чтоб от курсора хуинюшки разлетались
ЕМС - разводят клиентов, AGIMA – развели ЕМС! Браво, AGIMA!
Форма записи До изменений, была совсем из начала 0-х, Вы визуально сделали приятнее, но , как видно из комментариев выше забыли про ux, или тестовая выборка вам говорила иное ?
В каких-то из диджитал компаний Москвы ЕМС сейчас входит в ДМС? Интересно, кто сохранил высокий уровень ДМС нынче
Я о таком не слышал. Но знаю что во многих компаниях с определенного грейда только включают ЕМЦ в корп пакет. Но это личный опыт а не инсайды от клиента )
<< Метрики также подтверждают позитивные изменения: глубина и время просмотра на новом сайте увеличились в два раза, а количество отказов сократилось на 20%.
пользователи просто найти ничего не могут. Измерять сайт медицинской клиники глубиной просмотров - это ни о чём.
Каждый элемент неудобен, базовые вещи даже сложно сделать и найти вообще.
Клиника судя по докторам норм, а вот с сайтом конечно всё просто максимально странно.
На vc шрифты все достаточно большие и достаточно контрастные, читать легко и приятно. На сайте клиники мне было тяжеловато понять, что написано недостаточно темным мелким шрифтом на небелом фоне.
Вместо жирности часто используется другой цвет, но я пытался туда нажать.
Но чумовая вращающаяся сфера сразу намекает на то, что все очень современное. Смотрел в мобиле, за десктоп не знаю.
Ну и про анкету (ссылка в футере) - а чего она на сайте с доменом, похожим на Минздрав, да ещё и http?
Со шрифтами ту такой тонкий момент... VC - это сайт сугубо для чтения. Ему не надо выпендриваться и демонстрировать статус. Поэтому контраст шрифтов выкручен на максимум. А вот ЕМЦ важнее показать статус, поэтому мы контраст выкручивали по границе рекомендаций доступности, ради визуального эффекта. И сфера для этого же.
Тут конечно приходится искать балланс между удобочитаемочитаемостью и впечатлениями, и угодить прям всем конечно очень сложно, и не всегда возможно.
это вы про какую анкету в футере? вроде все ровно https://www.emcmos.ru/anketa-pacienta/
Отдельное «спасибо» за все эти свистелки-перделки, которые на колени кладут браузер — «самое нужное» на подобно сайте.
Комментарий недоступен
ого, а конфигурацию не подскажете? такого быть не должно
Реально 24 и проводник в кибер пространство цифровых экзо коммуникаций из емс сделали это? Ахаха
такое чувство, что сайт не тестировали и запускали в торопях. в адаптиве полно не понятных отступов и горизонтального скролла
Пиксельному Жану-Рене грустно(
Да он так в жизни выглядит )
Вы конечно молодцы там в своей програмке, а вот Гугл сильно хромает)
убожество, которым невозможно пользоваться
А что скажете по поводу сайта?
Интересно среди 24х специалистов был хотя бы один QA? Я зашел на первую страницу и уже увидел кучу косяков с версткой. ну вот хотя бы плашка с информацией о ковид. Очевидно же что все криво. Заголовок съехал, иконке на закрытие не хватает отступов и вообще в целом смотрится ущербно. Дичь.
о, эта плашка наша боль-боль. пример "нет ничго более постоянного чем врменное"
ее впилили уже после релиза, "очень срочно надо вчера", и теперь все никак не обновят, хотя уже вроде даже сверстано (
Дальше главной не смотрел. Не думал, что компании на главных страницах могут позволить такое количество багов. А как же тестирование?
Ну и сами агима по гпх оформляют. Meh
Ну конечно, брифование заказчика - полностью ответит на вопросы удобно ли пользователям, что хорошего надо сохранить от существующего дизайна/архитектуры, а что надо переделать... даже как-то обидно