---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2024-09-27
publishYear: 2024
name: ТМХ
title: Платформа дистанционного мониторинга пациентов
excerpt: Разработали интерфейсы личного кабинета врача и мобильного приложения пациента.
context: |
[ТелеМедХаб (ТМХ)](https://telemedhub.io/) — компания, которая занимается разработкой и внедрением платформы дистанционного мониторинга пациентов (RPM).
Эта платформа собирает данные для мониторинга с медицинских и немедицинских устройств и сервисов разных производителей.
Клиент пришел к нам с задачей, изучив наши прошлые кейсы о создании интерфейсов для дистанционного мониторинга ([TIS](https://sobakapav.ru/portfolio/tis), [M-Line](https://sobakapav.ru/portfolio/medmarket)).
doubleSize: true
logo:
src: ~/assets/images/portfolio/tmh/logo.svg
alt: ТМХ • Логотип
link: https://telemedhub.io/
image: ~/assets/images/portfolio/tmh/main.png
imageAlt: Собака Павлова • ТМХ • Платформа дистанционного мониторинга пациентов
thumbnail:
src: ~/assets/images/portfolio/cards/tmh.svg
src2: ~/assets/images/portfolio/cards-l/tmh_big.svg
src3: /images/cards-l/tmh_bg.svg
alt: Собака Павлова • ТМХ • Платформа дистанционного мониторинга пациентов
isDark: true
tags:
- med
- ux-design
- prof
- mass
- mob
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
Разработать [UX-дизайн под ключ](/services/ux-design) и добавить в интерфейс [новую функциональность](/services/new-features), как в этом кейсе. И [многое другое](/services).
collection: services
page: ux-design
- collection: services
page: new-features
- text: |
### Наша экспертиза
Более 30 проектов, связанных с медицинскими интерфейсам, и [15 проектных кейсов](https://sobakapav.ru/portfolio#med).
### Наши статьи о медицинских интерфейсах
collection: post
page: medical-interfaces
- collection: post
page: professional-testing
- collection: post
page: before-interface-testing
- text: |
### Хотите уметь так же?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: tis
- collection: portfolio
page: raisa
- collection: portfolio
page: m-line
- collection: portfolio
page: medmarket
- collection: portfolio
page: miaz
- collection: portfolio
page: costa
outcome:
title: Некоторые цифры
numbers:
- title: Нарисовали
number: 8 user flow
text: по пользовательским сценариям
- title: Создали
number: 400+
text: макетов интерфейса
- title: Собрали
number: 2 прототипа
text: личный кабинет врача и приложение пациента
text2: Это позволило ускорить разработку продукта, заложить в дизайн всю необходимую функциональность еще на этапе проектирования и презентовать потенциальным клиентам широкие возможности продукта.
result:
- src: ~/assets/images/portfolio/figma.svg
text: Покажем из рук в руки и расскажем ещё больше
link: "mailto:we@sobakapav.ru"
budget: 1 700 000 ₽
time: 6 месяцев
review:
text: |
Мы обратились к «Собаке Павловой» с задачей улучшить интерфейс, разработанный и опробованный нами на множестве пилотных проектов в государственных и частных медицинских учреждениях.
Объединив ваш опыт дизайна медицинских интерфейсов с нашим опытом создания и эксплуатации предыдущей версии системы и обратной связью от пользователей, мы разработали интерфейс, удобный и для работающих в личном кабинете врачей, и для передающих данные о своем здоровье пользователей.
Уникальный продукт не только для отечественного, но и для международного рынка, — редко встречаются настолько детально продуманные интерфейсы, приносящие такую пользу всем стейкхолдерам. Мы очень рады нашему сотрудничеству.
photo: ~/assets/images/portfolio/tmh/person.png
person: Владимир Дмитриев
position: директор по развитию бизнеса
director: |
В нашей компании уже есть библиотека медицинских решений, которую мы собираем по ходу работы над проектами. И мы удачно ее использовали для ТМХ.
Это очень крутая история. Мы общаемся с заказчиком, врачами и пациентами, фиксируем сценарии и можем практически сразу предложить заказчику несколько вариантов решения. А затем дорабатывать до идеала самый подходящий под требования именно этого проекта.
Мы не собираем велосипед из кастомных деталек, мы его собираем из уже готового и только по мере необходимости добавляем что-то уникальное.
Таким образом мы экономим время и деньги заказчика. И если уж делаем новые детали, то доводим их до совершенства: у нас есть на это ресурсы.
metadata:
canonical: https://sobakapav.ru/portfolio/tmh
title: Медицинский интерфейс • Платформа дистанционного мониторинга пациентов (кейс)
description: "Разработали интерфейсы личного кабинета врача и мобильного приложения пациента."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/tmh/badge.png'
width: 1200
height: 630
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Результат](#anchor3) • [Нюансы](#anchor4) • [Отзыв, цены, сроки](#anchor5)
</TOC>
## <a name="anchor1" />Бизнес-задача
Занять лидирующую позицию в области удаленного мониторинга пациентов и выйти на международный рынок, в частности — в арабские страны.
<div class="daisy-diff sm:aspect-[1440/800] diff-black">
<div class="daisy-diff-item-1">
<img alt="Медицинский интерфейс. Дашборд | SobakaPav.ru"
src="/images/portfolio/tmh/1-2.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Медицинский интерфейс. Дашборд | SobakaPav.ru"
src="/images/portfolio/tmh/1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Дашборд. <a href="/images/portfolio/tmh/1.jpg" target="_blank">Обычный</a>, <a href="/images/portfolio/tmh/1-2.jpg" target="_blank">right-to-left</a></em>
## <a name="anchor2" />Дизайн-задача
Спроектировать интерфейсы личного кабинета врача (платную и бесплатную версии) и мобильного приложения пациента.
Добавить разделы, которых ранее не было в сервисе. Разработать решение, позволяющее использовать сервис в странах, где читают справа налево.
<a href="/images/portfolio/tmh/3.jpg" target="_blank"></a>
_График давления за день_
На старте работ заказчик выделил три основные роли пользователей (врач, менеджер и пациент). Предполагалось, что врач и менеджер взаимодействуют с продуктом посредством личного кабинета врача, а пациент — через приложение пациента.
<div class="flex gap-2 flex-wrap"> <Image src="~/assets/images/portfolio/tmh/4-1.jpg" alt="Медицинский интерфейс. Мобильное приложение пациента" class="min-w-72 grow shrink basis-0"/> <Image src="~/assets/images/portfolio/tmh/4-2.jpg" alt="Медицинский интерфейс. Мобильное приложение пациента" class="min-w-72 grow shrink basis-0" /> <Image src="~/assets/images/portfolio/tmh/4-3.jpg" alt="Медицинский интерфейс. Мобильное приложение пациента" class="min-w-72 grow shrink basis-0" /> <Image src="~/assets/images/portfolio/tmh/4-4.jpg" alt="Медицинский интерфейс. Мобильное приложение пациента" class="min-w-72 grow shrink basis-0" /></div>
_Мобильное приложение пациента_
## <a name="anchor3" />Результат
Заказчик получил макеты с обновленным интерфейсом существующего сервиса.
В интерфейсе появились новые разделы, концептуально задуманные заказчиком, но прежде не реализованные: список сотрудников, список отделений, журнал действий, избранное и дашборд.
<a href="/images/portfolio/tmh/5.jpg" target="_blank"></a>
_Список сотрудников_
<a href="/images/portfolio/tmh/7.jpg" target="_blank"></a>
_Журнал действий_
<a href="/images/portfolio/tmh/8.jpg" target="_blank"></a>
_Избранное_
Кроме того, мы сделали кликабельные прототипы основных разделов, макеты с примерами white label, RtL в приложении. Эти возможности позволяют заказчику выйти на рынок арабских стран.
<div class="daisy-diff sm:aspect-[1440/800] diff-black">
<div class="daisy-diff-item-1">
<img alt="Медицинский интерфейс. События right-to-left | SobakaPav.ru"
src="/images/portfolio/tmh/9-2.jpg" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Медицинский интерфейс. События | SobakaPav.ru"
src="/images/portfolio/tmh/9.jpg" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Страница событий. <a href="/images/portfolio/tmh/9.jpg" target="_blank">Обычная</a>, <a href="/images/portfolio/tmh/9-2.jpg" target="_blank">right-to-left</a></em>
<div class="daisy-diff sm:aspect-[1440/800] diff-black">
<div class="daisy-diff-item-1">
<img alt="Медицинский интерфейс. Страница пациента right-to-left | SobakaPav.ru"
src="/images/portfolio/tmh/11.jpg" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Медицинский интерфейс. Страница пациента | SobakaPav.ru"
src="/images/portfolio/tmh/2.jpg" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Страница пациента. <a href="/images/portfolio/tmh/2.jpg" target="_blank">Обычнная</a>, <a href="/images/portfolio/tmh/11.jpg" target="_blank">right-to-left</a></em>
<div class="flex gap-2 flex-wrap"> <Image src="~/assets/images/portfolio/tmh/10-1.jpg" alt="Медицинский интерфейс. Мобильное приложение пациента" class="min-w-72 grow shrink basis-0"/> <Image src="~/assets/images/portfolio/tmh/10-2.jpg" alt="Медицинский интерфейс. Мобильное приложение пациента" class="min-w-72 grow shrink basis-0" /> </div>
_Мобильное приложение пациента right-to-left_
### Экстра-польза
Во время проектирования стало понятно, что из трех ролей пользователя продуктом (врач, менеджер, пациент), роль менеджера как отдельная сущность не требуется. Поэтому мы пересмотрели архитектуру и скорректировали роли пользователей приложения, перераспределив функциональность между ролями врача и пациента.
<div class="flex gap-2 flex-wrap"> <Image src="~/assets/images/portfolio/tmh/12-1.jpg" alt="Медицинский интерфейс. Мобильное приложение пациента" class="min-w-72 grow shrink basis-0"/> <Image src="~/assets/images/portfolio/tmh/12-2.jpg" alt="Медицинский интерфейс. Мобильное приложение пациента" class="min-w-72 grow shrink basis-0" /> <Image src="~/assets/images/portfolio/tmh/12-3.jpg" alt="Медицинский интерфейс. Мобильное приложение пациента" class="min-w-72 grow shrink basis-0" /> <Image src="~/assets/images/portfolio/tmh/12-4.jpg" alt="Медицинский интерфейс. Мобильное приложение пациента" class="min-w-72 grow shrink basis-0" /></div>
_Мобильное приложение пациента_
### Как проект меняет жизнь людей
Дадим слово заказчику: «Все существующие в России решения для удаленного мониторинга здоровья пациентов — не фитнес-трекеры, а полноценный мониторинг — требуют оплаты через ДМС или подписки. Платные интерфейсы связаны с пилотными проектами крупных компаний; для врачей из бесплатных медучреждений участие затруднено, обучения нет.
Мы меняем ситуацию, предоставляя врачам и пациентам бесплатный доступ к приложению. Врачи могут учиться самостоятельно; использовать мониторинг не только в работе, но и в научной деятельности, — писать статьи, подтверждать гипотезы. Например, исследовать влияние показателей на коморбидных пациентов с диабетом и гипертензией. Да, функциональность бесплатной версии немного урезана, но достаточен, чтобы врачи могли набраться опыта в работе с интерфейсом.
Мы считаем это крайне важным для развивающегося рынка медицинских услуг в нашей стране. Поэтому хотим, чтобы наш совместный сервис дал серьезный толчок в развитии удаленного мониторинга здоровья пациентов в России».
<a href="/images/portfolio/tmh/6.jpg" target="_blank"></a>
_Карточка отделения_
## <a name="anchor4" />Нюансы и особенности
### Воркшопы с врачами
Мы регулярно проводили воркшопы с врачами-экспертами, чтобы проверить выявленные гипотезы и обсудить новые разделы продукта. Врач со стороны заказчика и дизайнеры «Собаки Павловой» согласовывали решения по макетам в режиме реального времени.
<a href="/images/portfolio/tmh/13.jpg" target="_blank"></a>
_Справочник источников_
Заказчику эти воркшопы понравились возможностью быстро разобраться в новых возможностях продукта, а нам ответы экспертов помогали корректировать архитектуру и отказываться от лишней функциональности, чтобы высвободить ресурс для приоритетных задач.
### Распределение задач
В самом начале работы мы разделили процесс проектирования интерфейса между несколькими дизайнерами: один рисует личный кабинет врача, другой — приложение пациента. Затем концепты вернехуровнево проверяют старший дизайнер и менеджер.
Такое распределение задач позволило быстро создавать варианты концептов и сохранять консистентность всего продукта. Мы придерживались этой схемы работы и на этапе детализации выбранных концептов, и в завершающей фазе.
<a href="/images/portfolio/tmh/14.jpg" target="_blank"></a>
_Созвон с сохраненной заметкой_
### <a name="anchor5" />