---
publishYear: 2021
name: MLine
title: Дизайн интерфейса системы дистанционного наблюдения пациентов
excerpt: Разработали дизайн интерфейса многокомпонентной платформы для дистанционного наблюдения пациентов с гипертонией
logo:
src: ~/assets/images/portfolio/m-line/logo.svg
alt: MLine logo
link: https://m-line.expert
image: ~/assets/images/portfolio/m-line/m-line.png
imageAlt: Дизайн интерфейса системы дистанционного наблюдения пациентов
thumbnail:
src: ~/assets/images/portfolio/cards/m-line.svg
alt: Собака Павлова • M-LINE • Интерфейс медицинской системы
tags:
- med
- ux-design
- prof
- mass
- mob
- gui
context: После успешного запуска MVP компания М-ЛАЙН приступила к разработке многокомпонентной платформы для дистанционного наблюдения пациентов с гипертонией
result:
-
src: ~/assets/images/portfolio/figma.svg
text: Финальные макеты
link: https://www.figma.com/design/h1j2d6fCft5uzmfLC0QD5z/%5BHandoff-18.06%5D-M-Line%2C-%D0%9B%D0%9A-%D0%B2%D1%80%D0%B0%D1%87%D0%B0
budget: 3 000 000 ₽
time: "10 месяцев"
outcome:
title: Некоторые цифры
numbers:
-
title: Спроектировали
number: ">1500 экранов"
-
title: Провели
number: "46 созвонов"
-
title: Обсуждали
number: "70 часов"
director: Это далеко не первый наш медицинский проект. Кроме отраслевого опыта здесь пригодились наши компетенции в продуктовом дизайне.
metadata:
canonical: https://sobakapav.ru/portfolio/m-line
title: Медицинский интерфейс • Система дистанционного наблюдения пациентов (кейс)
description: "Разработали дизайн интерфейса многокомпонентной платформы для дистанционного наблюдения пациентов с гипертонией"
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/m-line/m-line.png'
width: 1680
height: 1373
type: website
---
1. [Задача](#anchor1)
2. [Что проектировали](#anchor2)
3. [Заказчик сэкономил 4–7 млн рублей](#anchor3)
4. [Создали интерфейс всей системы](#anchor4)
5. [Выступили в роли фасилитаторов](#anchor5)
6. [Обеспечили поток интерфейсных решений](#anchor6)
## <a name="anchor1"></a> Задача
Коммерческий продукт представляет собой тонометр с дистанционной передачей показателей артериального давления в медицинскую информационную систему. Эта система следит за состоянием пациента, дает рекомендации в случае его ухудшения и тем самым снижает риск возникновения инсульта и инфаркта. Доступ к системе есть как у лечащих врачей, так и у пациентов.
_Следит за состоянием пациента и дает рекомендации, если оно ухудшается
Гипотеза востребованности продукта доказана пилотным проектом, запущенным в рамках ОМС и совместно со «СберЗдоровьем». Частично наработки MVP можно было использовать, но большая часть системы создавалась с нуля.
Нашей задачей было создать всю визуально-интерфейсную часть продукта. Фасилитировать высокоуровневые обсуждения бизнес-требований, формировать постановку на дизайн и поставлять макеты в разработку.
## <a name="anchor2"></a> Что проектировали
1. Личный кабинет врача, несколько ролей с разной функциональностью.
2. Личный кабинет пациента, версии для десктопа, планшета и смартфона.
3. Мобильное приложение для пациента.
4. Сайт, который будет эту систему продавать
## <a name="anchor3"></a> Заказчик сэкономил на дизайне 4–7 млн рублей
С нашей стороны над проектом работала команда из четырех человек. Бюджет составил около трех млн рублей, а срок работ — 10 месяцев.
От дизайн-команды требовались продуктовые компетенции: понимать высокоуровневую постановку, помогать формулировать новый продукт. Также пригодился наш опыт работы над медицинскими системами.
Найм такой команды в штат на тот же срок обошелся бы заказчику в 7−10 млн рублей с учетом стоимости найма, налогов, организации рабочего места. Работая с нашей командой, заказчик заплатил в 2−3 раза меньше.
Начали, как обычно, с аналитики. Изучили веб-версию и составили карту функциональности продукта, чтобы зафиксировать все возможности и ничего не потерять.
## <a name="anchor4"></a> Создали интерфейс всей системы и помогли заказчику принять концептуальные бизнес-решения
- Спроектировали более полутора тысяч экранов, собрали посценарные прототипы для всех типов пользователей, подготовили библиотеки компонентов.
- Провели 46 созвонов с заказчиком в среднем по 1,5 часа — это около 70 часов обсуждений, в результате которых заказчик принимал решения по способу реализации системы.
- Протестировали интерактивные прототипы на пользователях. В процессе тестирования обсуждали с врачами продуктовые гипотезы.
## <a name="anchor5"></a> Выступили в роли фасилитаторов
Со стороны заказчика в обсуждениях принимали участие медицинские работники, технические специалисты, менеджер проекта — иногда больше 10 человек. Обсуждали функциональные возможности в контексте существующих и планируемых бизнес- и технических решений. Прийти к единому мнению часто было сложно, и наша команда помогала в организации процесса принятия решений.
## <a name="anchor6"></a> Обеспечили поток интерфейсных решений
Визуализация идей помогала заказчику думать и формировать продукт. При поиске интерфейсных решений мы, конечно, опирались на потребности пользователей.
Врачу нужно одновременно работать с тремя сущностями: фокусироваться на истории конкретного пациента, видеть список всех своих задач и понимать, какие решения целесообразно принять в том или ином случае. Поэтому в разделе «Мои задачи» мы использовали трехпанельный интерфейс.
_Трехпанельный интерфейс._
Некоторые пациенты требуют проактивного внимания. Чтобы врачу было проще их находить, реализовали «Избранное».
В зависимости от количества пациентов, врачу удобней работать с более подробным или более компактным списком, поэтому мы сделали переключение режимов.
_Пациенты. Карточки. Общий вид_
_Пациенты. Таблица. Общий вид_
Периодически врачу нужно обратиться к базовым данным в карточке пациента, но эта информация нужна не всегда. Мы проектировали мини-карточку, которая отображается поверх текущего экрана: посмотрел, закрыл и остался там же, где был.
_Вызов мини-карточки пациента_
Параметры нормального давления для разных людей отличаются. Врачу нужна «шпаргалка» по конкретному пациенту, чтобы оценить его нынешнее состояние. Такая «шпаргалка» отображается по клику на ярлычке сбоку экрана.
_Шпаргалка_
_При нажатии на кнопку появляется подсказка_
Для пациента интерфейс приложения должен быть привычным и даже в чем-то стандартным. Мы остановились на информационной ленте событий, где вперемешку появляются новые измерения давления, рекомендации врача, новости и советы для пациентов. Все эти события можно фильтровать при помощи табов.
_Главный экран пациента_
# Фактически, мы взяли на себя все UX-задачи компании