Медицинская карта с голосовым заполнением
За 5 дней собрали прототип MVP с удобным привлекательным интерфейсом для внутреннего стартапа компании T1.
T1 — это большой IT-холдинг. В нём собрались эксперты, которые умеют разбираться в задачах — и технических, и бизнесовых. Делают цифровые решения: для государства, корпораций, медицины, образования, телекоммуникаций и промышленности.
Вводные
Компания T1 обратилась к нам с задачей: нужен понятный и живой интерфейс для внутреннего медицинского стартапа.
Идея продукта — голосовое заполнение электронной медкарты. Врач во время приёма и/или вызова говорит всё, что нужно заполнить. Система слушает, распознаёт речь, расставляет информацию по полям — строго по нормативной структуре. Позже врач может вернуться к записи: переслушать, отредактировать, что-то уточнить, внести правки и дозаполнить медицинскую карту.
Продукт делает три важных вещи:
- бережёт время врачей;
- фиксирует всё, что прозвучало во время общения с пациентом;
- помогает врачу — моментальными подсказками на базе искусственного интеллекта.
Бизнес-задача
Показать, как работает идея. Получить обратную связь от врачей. Доработать. И — найти инвестиции, чтобы двигаться дальше.
Дизайн-задача
В кратчайшие сроки собрать прототип MVP — на реальных данных, с рабочими сценариями. Сделать так, чтобы продукт можно было показать, потрогать, обсудить.
Показать, как он будет выглядеть — с разными данными, в разных ситуациях. Сделать это понятно и красиво.
Результат
Заказчик провел серию презентаций продукта и получил инвестиции на разработку.
- Собрали на компонентах ворк флоу по основному сценарию.
- Показали как будет выглядеть дизайн-решение в разных цветах, шрифтах и стилях (на примере шестнадцати вариантов).
- Заполнили 18 макетов электронной медицинской карты реальными данными пациентов. Показали поведение полей при наполнении их различными данными.
- Собрали интерактивный прототип для презентации продукта
Экстра-польза
Заказчик ожидал получить от нас красивые картинки в одном, максимум в двух вариантах, а получил 16 вариантов.
Да, мы знаем, что для дизайнеров макеты, сделанные на переменных, — обычное дело, и менять в них стили можно на лету. Но далеко не все знают как работает этот простой и эффектный прием.
Мы показали заказчику, как можно переключать тему интерфейса — цвета, шрифты, размеры — буквально одной кнопкой. Без копирования экранов, без пересборки компонентов.
Для заказчика это было неожиданным и приятным.
Главное, когда позже он сам проводил презентации, эта фишка работала на него: выглядело эффектно и немного волшебно. Похоже, инвесторы тоже это оценили.
При разработке IT-продуктов у разработчиков часто возникают вопросы к макетам:
- что будет, если данных больше?
- как элемент поведёт себя при переполнении или когда данных будет мало?
- что останется важно оставить видимым, а что — нет?
Мы показали это на реальных данных. Не абстрактно — по-настоящему. Чтоб разработчики могли не гадать, а видеть на примерах из жизни.
Нюансы и особенности процесса
- Мы уложились в пять рабочих дней.
- Не мучали заказчика длинными согласованиями, а собрали все вводные, взяли ответственность за процесс и результат на себя
- Включили в процесс работы людей с опытом в медицинских проектах, проконсультировались с врачами — у нас есть некоторый пул врачей, с которыми работаем регулярно. С их помощью перетряхнули структуру документа, и как результат создали интерфейс, который полностью понятен медикам.
Кто работал над проектомПродакт-дизайнер: собирал и структурировал интерфейс.Эксперт по пользовательскому поведению: общался с врачами, приносил в проект накопленную медицинскую экспертизу.Технолог: обеспечивал масштабирование эскизов (наши внутренние технологии)Продакт-менеджер: держал проектную канву и следил, чтобы всё двигалось вперёд.
Кто работал над проектом
- Продакт-дизайнер: собирал и структурировал интерфейс.
- Эксперт по пользовательскому поведению: общался с врачами, приносил в проект накопленную медицинскую экспертизу.
- Технолог: обеспечивал масштабирование эскизов (наши внутренние технологии)
- Продакт-менеджер: держал проектную канву и следил, чтобы всё двигалось вперёд.
Как устроили процесс
Сначала получили от заказчика описание возможностей и другие вводные. Изучили текущую техническую реализацию. А дальше пошли параллельно.
- Эксперт уточнял сценарии, проводил интервью с врачами.
- Дизайнер готовил проектную среду, а потом собирал концепты экранов медицинской карты — на основе вводных: структуры полей, списков симптомов и медицинской логики, натягивал на макеты визуальную вариантность.
- Менеджер держала темп проекта и расставляла приоритеты, и главное помогала команде не отвлекаться, не делать лишнего и планомерно двигаться к намеченному результату.
- Технолог работал с JSON-файлами: чтоб когда все будет готовы, мы смогли примерить один и тот же кейс на разные случаи.
Использовали наш внутренний инструмент, который умеет собирать вариативные макеты на основе шаблона и структурированных данных.
Мы провели пять итераций. После каждой созванивались всей командой и дорабатывали.
- На первых двух — наводили порядок в структуре: группировали симптомы, приводили поля к логичной системе, собирали понятную медкарту.
- На третьей и четвёртой — дорабатывали визуал и проверяли, как обрабатываются данные. Всё на живом материале.
И еще шесть вариантов медицинской карты пациента