Медкарта с голосовым заполнением

T1 — это большой IT-холдинг. В нём собрались эксперты, которые умеют разбираться в задачах — и технических, и бизнесовых. Делают цифровые решения: для государства, корпораций, медицины, образования, телекоммуникаций и промышленности.

Вводные

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

Идея продукта — голосовое заполнение электронной медкарты. Врач во время приёма и/или вызова говорит всё, что нужно заполнить. Система слушает, распознаёт речь, расставляет информацию по полям — строго по нормативной структуре. Позже врач может вернуться к записи: переслушать, отредактировать, что-то уточнить, внести правки и дозаполнить медицинскую карту.

Продукт делает три важных вещи:

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

Бизнес-задача

Показать, как работает идея. Получить обратную связь от врачей. Доработать. И — найти инвестиции, чтобы двигаться дальше.

Начало работы. Светлая тема, темная тема

Дизайн-задача

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

Идет запись. Светлая тема, темная тема

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

❮ ❯

Страница результата в четытех цветах. Синий, черный, зеленый, темно-синий

Результат

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

1. Собрали на компонентах ворк флоу по основному сценарию.

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

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

3. Заполнили 18 макетов электронной медицинской карты реальными данными пациентов. Показали поведение полей при наполнении их различными данными.

❮ ❯

Шесть вариантов медицинской карты пациента

4. Собрали интерактивный прототип для презентации продукта

Экстра-польза

Заказчик ожидал получить от нас красивые картинки в одном, максимум в двух вариантах, а получил 16 вариантов.

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

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

❮ ❯

Вот некоторые из этих вариантов. Черный, плотный, шрифт Lato, темно-синий, плотный, шрифт Lato, зеленый, плотный, шрифт Roboto, синий, плотный, шрифт Roboto, черный, свободный, шрифт Roboto, темно-синий, плотный, шрифт Roboto

Для заказчика это было неожиданным и приятным.

Главное, когда позже он сам проводил презентации, эта фишка работала на него: выглядело эффектно и немного волшебно. Похоже, инвесторы тоже это оценили.

При разработке IT-продуктов у разработчиков часто возникают вопросы к макетам:

• что будет, если данных больше?
• как элемент поведёт себя при переполнении или когда данных будет мало?
• что останется важно оставить видимым, а что — нет?

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

❮ ❯

Еще шесть вариантов медицинской карты пациента

Нюансы и особенности процесса

1. Мы уложились в пять рабочих дней.
2. Не мучали заказчика длинными согласованиями, а собрали все вводные, взяли ответственность за процесс и результат на себя
3. Включили в процесс работы людей с опытом в медицинских проектах, проконсультировались с врачами — у нас есть некоторый пул врачей, с которыми работаем регулярно. С их помощью перетряхнули структуру документа, и как результат создали интерфейс, который полностью понятен медикам.

❮ ❯

Флоу записи приема пациента в первой итерации

Кто работал над проектом

• Продакт-дизайнер: собирал и структурировал интерфейс.
• Эксперт по пользовательскому поведению: общался с врачами, приносил в проект накопленную медицинскую экспертизу.
• Технолог: обеспечивал масштабирование эскизов (наши внутренние технологии)
• Продакт-менеджер: держал проектную канву и следил, чтобы всё двигалось вперёд.

❮ ❯

Флоу записи приема пациента во второй итерации

Как устроили процесс

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

• Эксперт уточнял сценарии, проводил интервью с врачами.
• Дизайнер готовил проектную среду, а потом собирал концепты экранов медицинской карты — на основе вводных: структуры полей, списков симптомов и медицинской логики, натягивал на макеты визуальную вариантность.
• Менеджер держала темп проекта и расставляла приоритеты, и главное помогала команде не отвлекаться, не делать лишнего и планомерно двигаться к намеченному результату.
• Технолог работал с JSON-файлами: чтоб когда все будет готовы, мы смогли примерить один и тот же кейс на разные случаи.

Использовали наш внутренний инструмент, который умеет собирать вариативные макеты на основе шаблона и структурированных данных.

Страница результата в третей итерации Синяя тема, темно-синяя тема

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

1. На первых двух — наводили порядок в структуре: группировали симптомы, приводили поля к логичной системе, собирали понятную медкарту.
2. На третьей и четвёртой — дорабатывали визуал и проверяли, как обрабатываются данные. Всё на живом материале.

В четвертой итерации окончательно оформляется дизайн интерфейса А в пятой появляются дополнительные возможности

❮ ❯

И еще шесть вариантов медицинской карты пациента