Редизайн медицинского сайта: как мы разделили сценарии для пациентов и врачей

Заказчик

ООО «Фармамед» - фармацевтическая компания, производитель препарата Эксенза (назальная форма для купирования приступов мигрени и кластерной головной боли).

Задача

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

У медицинского сайта сложная задача. Он должен давать точную информацию, но не перегружать человека терминами и длинными текстами.

Особенно если пользователь заходит на сайт во время приступа мигрени. В этот момент ему важно быстро понять:

• что с ним происходит;
• как действовать;
• подходит ли ему препарат;
• где найти инструкцию;
• где купить препарат.

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

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

Задача

Заказчик поставил задачу провести редизайн сайта препарата Эксенза.

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

• разделить информацию для пациентов и специалистов;
• помочь посетителю быстро перейти к нужному материалу;
• понятно объяснить сложную медицинскую информацию;
• дать быстрый доступ к инструкции и разделу «Где купить»;
• подготовить сайт к появлению новых материалов и продуктов;
• сохранить возможность обновлять визуальный стиль бренда без полной переработки сайта.

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

Изучили аудиторию и ее сценарии

Основная аудитория сайта — взрослые люди с регулярными или эпизодическими приступами мигрени. Для них важны скорость действия препарата, простота применения и возможность использовать его без воды.

Часть пользователей уже пробовала таблетки и другие формы обезболивающих, но осталась недовольна скоростью действия или побочными эффектами. Они сравнивают препараты, читают отзывы и ищут ответы на конкретные вопросы:

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

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

Кроме пациентов, мы выделили еще три группы:

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

Все эти аудитории объединяет одна потребность: быстро получить проверенную информацию и понять, что делать дальше.

Решение

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

Для пациентов выделили отдельное направление со страницами:

• «Мигрень»;
• «Кластерная головная боль»;
• «Дневники головной боли»;
• «Цефалгологи по регионам».

Для специалистов предусмотрели:

• обучающие видео;
• клинические рекомендации;
• публикации в медицинских изданиях.

Общие разделы вынесли в основную навигацию:

• инструкция;
• статьи;
• отзывы;
• FAQ;
• «Где купить».

Так каждый посетитель может сразу выбрать подходящий сценарий, а не разбираться во всей структуре сайта.

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

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

Этапы работы

1. Подготовили техническое задание

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

В нем зафиксировали:

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

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

На подготовку технического задания ушло 13 часов, или 5 рабочих дней.

2. Спроектировали главную страницу

Главную сделали лендоподобной. Она не просто рассказывает о препарате, а последовательно отвечает на основные вопросы пользователя.

Страница состоит из семи смысловых блоков:

1. назначение препарата и основные действия;
2. особенности препарата;
3. состояния, при которых он применяется;
4. принцип действия;
5. порядок применения;
6. обучающие и справочные материалы;
7. площадки, на которых можно купить препарат.

На первом экране оставили два главных действия: перейти к инструкции или узнать, где купить.

Это не случайный набор кнопок. Пользователь, который уже знаком с препаратом, может сразу перейти к нужному действию. Тот, кто хочет сначала разобраться, последовательно изучает следующие экраны.

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

На макет главной ушло 7 рабочих дней.

Первый экран сразу объясняет назначение препарата и предлагает два основных действия.

Следующие блоки помогают разобраться в областях применения и принципе действия препарата.

3. Разработали отдельные страницы о мигрени и кластерной головной боли

Страницы «Мигрень» и «Кластерная головная боль» сделали в формате самостоятельных лендингов длиной до семи экранов.

Обычная текстовая страница здесь не подходила. Пользователю нужно последовательно пройти несколько этапов:

1. понять, что представляет собой заболевание;
2. сравнить свои симптомы;
3. узнать возможные причины;
4. разобраться, что делать во время приступа;
5. перейти к инструкции или дополнительным материалам.

Страница о мигрени объясняет:

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

Информацию разделили на короткие блоки: пользователь может читать страницу последовательно или сразу перейти к нужному вопросу.

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

Для кластерной головной боли разработали отдельный сценарий, а не копировали структуру страницы о мигрени.

4. Собрали разделы с материалами

Кроме основных посадочных страниц, сайт должен был регулярно пополняться новыми материалами.

Для этого мы разработали:

• общую страницу статей;
• детальную страницу статьи;
• клинические рекомендации;
• публикации в медицинских изданиях;
• обучающие видео;
• дневники головной боли;
• отзывы;
• FAQ;
• инструкцию;
• страницу «Где купить»;
• универсальную контентную страницу.

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

На детальной странице предусмотрели содержание. Оно помогает переходить между разделами длинной статьи и не искать нужный фрагмент вручную.

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

Общая страница помогает выбрать материал, а детальная — быстро ориентироваться внутри длинной статьи.

Клинические рекомендации и публикации в медицинских изданиях используют ту же механику. Это позволило не создавать несколько одинаковых систем и упростило дальнейшее управление сайтом.

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

5. Подготовили мобильную версию

Для аудитории проекта мобильная версия — не дополнительный формат, а один из основных.

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

В мобильной версии мы:

• собрали контент в одну колонку;
• сохранили крупные заголовки;
• сделали кнопки заметными и удобными для нажатия;
• убрали второстепенные элементы;
• свернули основную навигацию в компактное меню.

Пользователю не нужно увеличивать страницу или прокручивать ее по горизонтали.

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

6. Реализовали сайт на 1С-Битрикс

Сайт разработали на CMS 1С-Битрикс.

Администратор может самостоятельно:

• добавлять статьи;
• публиковать рекомендации и материалы из медицинских изданий;
• загружать видео и файлы;
• редактировать текстовые страницы;
• управлять отзывами;
• менять метатеги и адреса страниц.

При разработке также учли технические требования проекта:

• адаптивную верстку;
• корректное отображение в распространенных браузерах;
• понятную структуру адресов;
• возможность редактировать Title и Description;
• правильную иерархию заголовков;
• сжатие загружаемых изображений;
• резервное копирование;
• защиту от SQL-инъекций;
• уведомление об использовании cookie;
• предупреждение для медицинских и фармацевтических специалистов.

Отдельно подготовили страницу ошибки 404, фавикон и изображение для репоста сайта.

7. Протестировали и наполнили сайт

После разработки мы проверили основные пользовательские сценарии:

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

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

На тестирование и первичное наполнение ушло 13 часов.

Больше всего времени заняли дизайн и верстка. Это связано с количеством типов страниц, двумя самостоятельными лендингами и подготовкой адаптивной версии.

Всего разработали 12 типов страниц и 4 дополнительных элемента: уведомление о cookie, предупреждение для специалистов, фавикон и изображение для репоста.

Результат

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

Пациент может:

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

Специалист может:

• найти клинические рекомендации;
• изучить публикации;
• посмотреть обучающие видео;
• быстро перейти к инструкции.

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

Количественных данных по посещаемости, конверсии и поведению пользователей после запуска у нас нет. Поэтому мы не связываем редизайн с показателями, которые не можем подтвердить.

Итог

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

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

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

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

В результате сайт можно развивать дальше: добавлять статьи, рекомендации, видео и новые продукты без полной переработки проекта.

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