Редизайн модуля записи к врачу

Компания «Симплекс» разрабатывает программные системы.

Одна из таких систем — медицинская информационная система СиМед с функциями CRM. Она состоит из нескольких модулей, каждый оцифровывает и автоматизирует часть рутины в медклинике: очередь к врачу, работу персонала, документооборот, регистратуру, оплату приемов, профосмотры, складской учет, колл-центр и так далее.

Вводные

Компания разрабатывала систему как десктопное приложение под Windows, причем во времена, когда дизайн не был конкурентным преимуществом на узком рынке. Поэтому использовала нативный дизайн Windows — и ориентировалась не на последние версии ОС, а на те, которые стоят в российских клиниках. То есть, в лучшем случае — на XP.

Со временем это виндоус-наследие стало давить, да и конкуренты тоже подпирали. Все вокруг красивые, и главврачи, конечно, это видели. Выбирают-то по одежке. К тому же, какой главврач ходит без айфона? Все уже давно привыкли к красивому и хотели такого же на работе.

В 2024 году Симплекс решил обновить систему:

• поменять технологический стек;
• переехать в веб;
• улучшить пользовательский опыт;
• провести редизайн.

С последними двумя задачами Симплекс обратился в Собаку Павлову.

Системные уведомления

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

Перенести систему в веб

Не продавать программу, а дать доступ к облачной инфраструктуре. Возможно, даже перейти на сервисную модель. SAAS, как говорится.

Сделать конкурентоспособный дизайн

Такой, чтобы СиМед выглядел красиво и ускорял рутинные задачи администратора в регистратуре. Ну и лучше продавался, разумеется.

Список врачей

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

1. Отредизайнить под веб модуль записи к врачу и оплаты приема.
2. Подготовить библиотеку компонентов, чтобы заказчик смог самостоятельно масштабировать интерфейс и перенести в веб другие модули СиМед.
3. Сформулировать основные принципы, как разрабатывать дизайн СиМед на Ant Design.

Карточка врача

Результат

Заказчик получил новый дизайн на свободно распространяемой дизайн-системе Ant Design от Alibaba Group.

Скролл карточки врача

Часть интерфейса он собрал еще до того, как мы завершили проект. Это было сравнительно просто:

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

Список пациентов

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

Выбор пациента в документе приема

1. Собрали и описали ключевые пользовательские сценарии.

❮ ❯

2. Передали заказчику макеты, которые реализуют сценарии:

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

❮ ❯

Микросценариев было еще больше — все перечислены в документе выше.

3. Оформили и отдали библиотеку компонентов Ant Design в Figma. Объяснили, как развернуть её у себя и использовать в работе.

❮ ❯

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

Мы протестировали готовый интерфейс с помощью нейросетей:

1. Задали контекст и познакомили с документами проекта.
2. Составили портрет администратора клиники, его задачи и привычки.
3. Отправили его по типовому сценарию и попросили проговаривать мысли вслух.
4. Получили оценку интерфейса, выявили неочевидные UX-проблемы.
5. Подготовили внутренний отчёт с выводами, критическими проблемами и предложениями по их решению.
6. Оценили в часах, сколько времени потребуется на доработки.

Звучит просто, но сперва модель потребовалось обучить на других проектах. Зато теперь у нас есть ИИ-сотрудник, который умеет подсветить слабые месте в интерфейсах.

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

Особенности

Мы двигались быстро и постепенно наращивали детализацию макетов. Это позволило заказчику:

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

Мини-карточка пациента

Так, к примеру, мы перешли от модальных окон к дроверам, потому что те оказались более подходящими для Симеда. Ничего с нуля перерисовывать не пришлось — просто переехали с компонента на компонент.

Фильтр по пациентам

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

Альтернативный вид списка врачей

Альтернативный вид карточки врача

Опять же, рисовали по минимуму — брали готовые компоненты из дизайн-системы. А вот если бы рисовали, проект вышел бы в разы дороже. Или с меньшим количеством итераций.

Несколько врачей

Нюансы процесса

Мы — опытные разработчики медицинских интерфейсов, и на этом проекте хотели проверить, можно ли переиспользовать наработки из предыдущих интерфейсов? Их-то у нас штук двадцать. Оказалось, что можно.

Правда, к этому эксперименту мы готовились сильно заранее: собрали с десяток ЭМК, списков пациентов, разных вариантов поиска и фильтраций, карточек и форм — и все перенесли на компоненты Ant.

Указание ДМС и гарантийного письма

Звезды сошлись, когда пришел СиМед и согласился использовать предложенную дизайн-систему. На созвонах мы обкатали весь процесс:

• показывали заказчику уже готовые компоненты,
• брали те, которые по общему мнению решали интерфейсные задачи,
• вставляли их макеты и заполняли актуальным для СиМеда контентом.

Документ оплаты. Часть услуг оплачена

Наш подход сработал — он здорово удешевил и ускорил разработку интерфейса.

Так что частично СиМед состоит из паттернов, которые мы уже изобрели и протестировали в других МИС.

Документ оплаты. Часть услуг клиент получил в долг

Итог

Приятный проект завершился на высокой ноте. Разработчики на наших глазах собирали рабочий интерфейс, и это отдельное дизайнерское удовольствие — шевелить руками ожившие макеты из Фигмы.

В свою очередь, заказчик получил все, чтобы развивать интерфейс сразу в коде. Кажется, ему даже больше не нужны дизайнеры — львиная доля компонентов из старой системы приобрела новый вид и готовый код. Осталось перенести на них другие модули продукта.