---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2025-07-02
publishYear: 2025
name: T1
title: Медицинская карта с голосовым заполнением
excerpt: Собрали прототип MVP с удобным привлекательным интерфейсом для внутреннего стартапа компании T1.
context: |
[T1](https://t1.ru/) — это большой IT-холдинг. В нём собрались эксперты, которые умеют разбираться в задачах — и технических, и бизнесовых. Делают цифровые решения: для государства, корпораций, медицины, образования, телекоммуникаций и промышленности.
doubleSize: true
logo:
src: ~/assets/images/portfolio/t1/logo.svg
alt: T1 • Логотип
link: https://t1.ru/
image: ~/assets/images/portfolio/t1/main.png
imageAlt: Собака Павлова • T1 • Внутренний медицинский стартап
thumbnail:
src: ~/assets/images/portfolio/cards/t1.svg
src2: ~/assets/images/portfolio/cards-l/t1_big.svg
alt: Собака Павлова • T1 • Внутренний медицинский стартап
tags:
- med
- prototype
- prof
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[Прототип под инвестицию](/services/prototype), как в этом кейсе, и [многое другое](/services).
collection: services
page: prototype
- 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: tmh
- collection: portfolio
page: avicenna
- collection: portfolio
page: onkor
- 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: "за 5"
text: рабочих дней
- title: Предусмотрели
number: "16 вариантов"
text: каждой страницы
- title: Создали
number: "18 макетов"
text: карты пациента
result:
- src: ~/assets/images/portfolio/figma.svg
text: Прототип интерфейса
link: "https://www.figma.com/proto/hLgxfELxo7DAEWnr4N8j89/T1-trial-balloon?node-id=98-34227&t=7ynyvVKVBbTO15Gl-1"
budget: "NDA"
time: "5 дней"
director: "Крутую работу можно сделать и за пять дней. Мы очень быстро создали дизайн интерфейса и собрали презентацию, а заказчик мгновенно получил инвестиции."
metadata:
canonical: https://sobakapav.ru/portfolio/t1
title: Внутренний медицинский стартап
description: "Мгновенно собрали прототип MVP с удобным привлекательным интерфейсом; заказчик получил инвестиции."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/t1/badge.png'
width: 1200
height: 630
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
import { YouTube, Tweet, Vimeo } from 'astro-embed';
import ImageSlider from '~/components/common/ImageSlider.astro'
## <a name="anchor1" />Вводные
Компания T1 обратилась к нам с задачей: нужен понятный и живой интерфейс для внутреннего медицинского стартапа.
<a href="/images/portfolio/t1/25.png" target="_blank"></a>
Идея продукта — голосовое заполнение электронной медкарты. Врач во время приёма и/или вызова говорит всё, что нужно заполнить. Система слушает, распознаёт речь, расставляет информацию по полям — строго по нормативной структуре. Позже врач может вернуться к записи: переслушать, отредактировать, что-то уточнить, внести правки и дозаполнить медицинскую карту.
<a href="/images/portfolio/t1/26.png" target="_blank"></a>
Продукт делает три важных вещи:
- бережёт время врачей;
- фиксирует всё, что прозвучало во время общения с пациентом;
- помогает врачу — моментальными подсказками на базе искусственного интеллекта.
<div class="hidden md:block tn-atom__videoiframe" data-rutubeid="8463075cfd1aab409c69da669377e4d7" style="width:100%; height:423px;">
<iframe id="rutube-iframe-657880269-1698234212489" width="100%" height="100%" frameborder="0" allowfullscreen="" allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;" class="rounded-md t-iframe loaded" data-original="https://rutube.ru/play/embed/8463075cfd1aab409c69da669377e4d7?" src="https://rutube.ru/play/embed/8463075cfd1aab409c69da669377e4d7?"></iframe>
</div>
## <a name="anchor2" />Бизнес-задача
Показать, как работает идея. Получить обратную связь от врачей. Доработать. И — найти инвестиции, чтобы двигаться дальше.
<div class="daisy-diff sm:aspect-[1280/800] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • T1 • Внутренний медицинский стартап"
src="/images/portfolio/t1/1-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • T1 • Внутренний медицинский стартап"
src="/images/portfolio/t1/1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Начало работы. <a href="/images/portfolio/t1/1.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/t1/1-1.png" target="_blank">темная тема</a></em>
## <a name="anchor3" />Дизайн-задача
В кратчайшие сроки собрать прототип MVP — на реальных данных, с рабочими сценариями. Сделать так, чтобы продукт можно было показать, потрогать, обсудить.
<div class="daisy-diff sm:aspect-[1280/800] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • T1 • Внутренний медицинский стартап"
src="/images/portfolio/t1/2-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • T1 • Внутренний медицинский стартап"
src="/images/portfolio/t1/2.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Идет запись. <a href="/images/portfolio/t1/2.png" target="_blank">Светлая тема</a>, <a href="/images/portfolio/t1/2-1.png" target="_blank">темная тема</a></em>
Показать, как он будет выглядеть — с разными данными, в разных ситуациях. Сделать это понятно и красиво.
<ImageSlider slides={[
'/images/portfolio/t1/3.png',
'/images/portfolio/t1/3-1.png',
'/images/portfolio/t1/3-2.png',
'/images/portfolio/t1/3-3.png',
]}/>
<em>Страница результата в четытех цветах. <a href="/images/portfolio/t1/3.png" target="_blank">Синий</a>, <a href="/images/portfolio/t1/3-1.png" target="_blank">черный</a>, <a href="/images/portfolio/t1/3-2.png" target="_blank">зеленый</a>, <a href="/images/portfolio/t1/3-3.png" target="_blank">темно-синий</a></em>
## <a name="anchor4" />Результат
>Заказчик провел серию презентаций продукта и получил инвестиции на разработку.
1. Собрали на компонентах ворк флоу по основному сценарию.
2. Показали как будет выглядеть дизайн-решение в разных цветах, шрифтах и стилях (на примере шестнадцати вариантов).
<a href="/images/portfolio/t1/28.png" target="_blank"></a>
<em>Вот эти шестнадцать вариантов. Страница результата в разных цветах, с разной плотностью текста, с различными шрифтами</em>
3. Заполнили 18 макетов электронной медицинской карты реальными данными пациентов. Показали поведение полей при наполнении их различными данными.
<ImageSlider slides={[
'/images/portfolio/t1/8.png',
'/images/portfolio/t1/9.png',
'/images/portfolio/t1/10.png',
'/images/portfolio/t1/11.png',
'/images/portfolio/t1/12.png',
'/images/portfolio/t1/13.png',
]}/>
<em>Шесть вариантов медицинской карты пациента</em>
4. Собрали [интерактивный прототип](https://www.figma.com/design/hLgxfELxo7DAEWnr4N8j89/T1-trial-balloon?node-id=98-34325&t=uHxdSQsFRVxLY8MZ-0) для презентации продукта
## <a name="anchor5" />Экстра-польза
Заказчик ожидал получить от нас красивые картинки в одном, максимум в двух вариантах, а получил 16 вариантов.
>Да, мы знаем, что для дизайнеров макеты, сделанные на переменных, — обычное дело, и менять в них стили можно на лету. Но далеко не все знают как работает этот простой и эффектный прием.
Мы показали заказчику, как можно переключать тему интерфейса — цвета, шрифты, размеры — буквально одной кнопкой. Без копирования экранов, без пересборки компонентов.
<ImageSlider slides={[
'/images/portfolio/t1/4.png',
'/images/portfolio/t1/4-2.png',
'/images/portfolio/t1/5.png',
'/images/portfolio/t1/5-2.png',
'/images/portfolio/t1/6.png',
'/images/portfolio/t1/6-2.png',
]}/>
<em>Вот некоторые из этих вариантов. <a href="/images/portfolio/t1/4.png" target="_blank">Черный, плотный, шрифт Lato</a>, <a href="/images/portfolio/t1/4-2.png" target="_blank">темно-синий, плотный, шрифт Lato</a>, <a href="/images/portfolio/t1/5.png" target="_blank">зеленый, плотный, шрифт Roboto</a>, <a href="/images/portfolio/t1/5-2.png" target="_blank">синий, плотный, шрифт Roboto</a>, <a href="/images/portfolio/t1/6.png" target="_blank">черный, свободный, шрифт Roboto</a>, <a href="/images/portfolio/t1/6-2.png" target="_blank">темно-синий, плотный, шрифт Roboto</a></em>
Для заказчика это было неожиданным и приятным.
> Главное, когда позже он сам проводил презентации, эта фишка работала на него: выглядело эффектно и немного волшебно. Похоже, инвесторы тоже это оценили.
При разработке IT-продуктов у разработчиков часто возникают вопросы к макетам:
- что будет, если данных больше?
- как элемент поведёт себя при переполнении или когда данных будет мало?
- что останется важно оставить видимым, а что — нет?
Мы показали это на реальных данных. Не абстрактно — по-настоящему. Чтоб разработчики могли не гадать, а видеть на примерах из жизни.
<ImageSlider slides={[
'/images/portfolio/t1/14.png',
'/images/portfolio/t1/15.png',
'/images/portfolio/t1/16.png',
'/images/portfolio/t1/17.png',
'/images/portfolio/t1/18.png',
'/images/portfolio/t1/19.png',
]}/>
<em>Еще шесть вариантов медицинской карты пациента</em>
## <a name="anchor6" />Нюансы и особенности процесса
1. Мы уложились в пять рабочих дней.
2. Не мучали заказчика длинными согласованиями, а собрали все вводные, взяли ответственность за процесс и результат на себя
3. Включили в процесс работы людей с опытом в медицинских проектах, проконсультировались с врачами — у нас есть некоторый пул врачей, с которыми работаем регулярно. С их помощью перетряхнули структуру документа, и как результат создали интерфейс, который полностью понятен медикам.
<ImageSlider slides={[
'/images/portfolio/t1/29.png',
'/images/portfolio/t1/30.png',
'/images/portfolio/t1/31.png',
]}/>
<em>Флоу записи приема пациента в первой итерации</em>
### Кто работал над проектом
- Продакт-дизайнер: собирал и структурировал интерфейс.
- Эксперт по пользовательскому поведению: общался с врачами, приносил в проект накопленную медицинскую экспертизу.
- Технолог: обеспечивал масштабирование эскизов (наши внутренние технологии)
- Продакт-менеджер: держал проектную канву и следил, чтобы всё двигалось вперёд.
<ImageSlider slides={[
'/images/portfolio/t1/35.png',
'/images/portfolio/t1/36.png',
'/images/portfolio/t1/37.png',
'/images/portfolio/t1/38.png',
'/images/portfolio/t1/39.png',
]}/>
<em>Флоу записи приема пациента во второй итерации</em>
### Как устроили процесс
Сначала получили от заказчика описание возможностей и другие вводные. Изучили текущую техническую реализацию. А дальше пошли параллельно.
- Эксперт уточнял сценарии, проводил интервью с врачами.
- Дизайнер готовил проектную среду, а потом собирал концепты экранов медицинской карты — на основе вводных: структуры полей, списков симптомов и медицинской логики, натягивал на макеты визуальную вариантность.
- Менеджер держала темп проекта и расставляла приоритеты, и главное помогала команде не отвлекаться, не делать лишнего и планомерно двигаться к намеченному результату.
- Технолог работал с JSON-файлами: чтоб когда все будет готовы, мы смогли примерить один и тот же кейс на разные случаи.
> Использовали наш внутренний инструмент, который умеет собирать вариативные макеты на основе шаблона и структурированных данных.
<div class="daisy-diff sm:aspect-[1280/700] diff-black">
<div class="daisy-diff-item-1">
<img alt="Собака Павлова • T1 • Внутренний медицинский стартап"
src="/images/portfolio/t1/40.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Собака Павлова • T1 • Внутренний медицинский стартап"
src="/images/portfolio/t1/41.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Страница результата в третей итерации <a href="/images/portfolio/t1/40.png" target="_blank">Синяя тема</a>, <a href="/images/portfolio/t1/41.png" target="_blank">темно-синяя тема</a></em>
Мы провели пять итераций. После каждой созванивались всей командой и дорабатывали.
1. На первых двух — наводили порядок в структуре: группировали симптомы, приводили поля к логичной системе, собирали понятную медкарту.
2. На третьей и четвёртой — дорабатывали визуал и проверяли, как обрабатываются данные. Всё на живом материале.
<a href="/images/portfolio/t1/42.png" target="_blank"></a>
<em>В четвертой итерации окончательно оформляется дизайн интерфейса</em>
<a href="/images/portfolio/t1/43.png" target="_blank"></a>
<em>А в пятой появляются дополнительные возможности</em>
<ImageSlider slides={[
'/images/portfolio/t1/20.png',
'/images/portfolio/t1/21.png',
'/images/portfolio/t1/22.png',
'/images/portfolio/t1/23.png',
'/images/portfolio/t1/24.png',
'/images/portfolio/t1/7.png',
]}/>
<em>И еще шесть вариантов медицинской карты пациента</em>
## <a name="anchor7" />