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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пациент подписывает документа на планшете

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

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

Тестируем с помощью нейросети экран добавления иформации о пациенте

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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