Дизайн интерфейса системы дистанционного наблюдения пациентов

ЗаказчикКомпания «М-Лайн» является ведущей медицинской организацией на рынке России по дистанционному наблюдению состояния здоровья пациентовЗадачаСоздать всю визуально-интерфейсную часть продукта. Фасилитировать высокоуровневые обсуждения бизнес-требований, формировать постановку на дизайн и поставлять макеты в разработку

После успешного запуска MVP компания М-ЛАЙН приступила к разработке многокомпонентной платформы для дистанционного наблюдения пациентов с гипертонией.

Задача

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

fff3e12532d9d81ac42115b585c681b9.png

Следит за состоянием пациента и дает рекомендации, если оно ухудшается.

Гипотеза востребованности продукта доказана пилотным проектом, запущенным в рамках ОМС и совместно со «СберЗдоровьем». Частично наработки MVP можно было использовать, но большая часть системы создавалась с нуля.

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

Что проектировали

1. Личный кабинет врача, несколько ролей с разной функциональностью.

49c5a735ac4594f32b922613d2e7535a.png

2. Личный кабинет пациента, версии для десктопа, планшета и смартфона.

d3a9af0a3ece2c5d332c5e68db9d2ae0.png

3. Мобильное приложение для пациента.

4b9650f7619335df44db27bcabf4bdbe.png

4. Сайт, который будет эту систему продавать

63948923d4502da6595877950920e008.png

Заказчик сэкономил на дизайне 4–7 млн рублей

С нашей стороны над проектом работала команда из четырех человек. Бюджет составил около трех млн рублей, а срок работ — 10 месяцев.

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

Найм такой команды в штат на тот же срок обошелся бы заказчику в 7−10 млн рублей с учетом стоимости найма, налогов, организации рабочего места. Работая с нашей командой, заказчик заплатил в 2?3 раза меньше.

Начали, как обычно, с аналитики. Изучили веб-версию и составили карту функциональности продукта, чтобы зафиксировать все возможности и ничего не потерять.

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

  • Спроектировали более полутора тысяч экранов, собрали посценарные прототипы для всех типов пользователей, подготовили библиотеки компонентов.
  • Провели 46 созвонов с заказчиком в среднем по 1,5 часа — это около 70 часов обсуждений, в результате которых заказчик принимал решения по способу реализации системы.
  • Протестировали интерактивные прототипы на пользователях. В процессе тестирования обсуждали с врачами продуктовые гипотезы.

Выступили в роли фасилитаторов

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

Обеспечили поток интерфейсных решений

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

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

d0326873678942fe0f22b35838f53843.png

Трехпанельный интерфейс

Некоторые пациенты требуют проактивного внимания. Чтобы врачу было проще их находить, реализовали «Избранное».

e779aaf44d654338ce1502e96bdb0af4.png

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

b3c8868cf21157be8b685f8f3cde7657.png

Пациенты. Карточки. Общий вид

e67d1a34a5bbe0ed40f7977e3abde1e2.png

Пациенты. Таблица. Общий вид

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

739985cee4465973bee3897eb6802011.png

4a385af1dd984cf05272da9266e0d54d.pngВызов мини-карточки пациента

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

976353ce9d392a9e4f0a9673e1fcfd27.png

Шпаргалка

c334f2f0626771087865683c80306d5f.png

При нажатии на кнопку появляется подсказка

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

53a8c9f82056ee6c63eb2599c94ff730.png

Главный экран пациента

Фактически, мы взяли на себя все UX-задачи компании

Спроектировали >1500 экранов 

Провели 46 созвонов 

Обсуждали 70 часов  

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

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