артём письменский
назад
b2bwebmedtech

Сократил среднее время работы с заявкой на 28 секунд, переделав веб-приложение для медработников

Новый дизайн процедурного кабинета

Вводные

Модуль «ЛИС. Процедурный кабинет» предназначен для работы медицинского персонала с заявками пациентов, списком услуг и передачей биоматериалов в лабораторию. Он является дополнением к уже существующей медицинской системе, имеющей базу данных, которые передаются через API

Компания-заказчик АНАТЕК автоматизирует бизнес-процессы для лечебно-профилактических учреждений различных типов.

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

Интерфейс должен соответствовать требованиям технического задания: десктоп-версия с возможностью работы на сенсорном экране (пальцем или стилусом).

Текущее среднее время затрачиваемое на оформление заявки пациента составляло 1 минута и 58 секунд

Цель

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

Аудитория

Сотрудники медицинских клиник и учреждений, которые работают в процедурных кабинетах и берут анализы у пациентов

Процесс

В ходе работы были выполненные следующие этапы: информационная архитектура, ui-kit, дизайн интерфейса, тестирование прототипа, передача в разработку и создание дополнительного варианта интерфейса на основе дизайн-системы Ant

1

Структура веб-приложения

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

  1. Начало работы с новой заявкой или отредактировать имеющуюся.
  2. Поиск заявку по заданным параметрам.
  3. Поиск контейнера по заданным параметрам.
  4. Просмотр документов
Информационная архитектура веб-приложения

Референсом для отображения блоков на странице заявки послужил этот пример

Референс и новый дизайн: справа
Референс и новый дизайн: слева
Референс и новый дизайн

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

  1. Заполнение административных данных пациента.
  2. Добавление или редактирование услуг.
  3. Работа с контейнерами и печать этикеток

Дизайн интерфейса

Спроектировано более 50 экранов, разработан ui-kit и отдельно подготовлен и адаптирован интерфейс на основе Ant Design System

Авторизация

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

Ввод логина и пароля

Рабочий стол

Вверху отображается ФИО и должность сотрудника, настройки принтера и выход на страницу авторизации. Интерфейс состоит из 4 кнопок размером соответствующем их функциональному приоритету

Рабочий стол процедурного кабинета

Создание заявки

Все основные действия осуществляются на одном экране с использованием модальных окон. Окно заявки состоит из 3 разделов (данные пациента, услуги и контейнеры) и поэтапного их заполнения слева-направо и сверху-вниз. Также пользователь может просто добавить услуги и узнать какие контейнеры для этого нужны, не выбирая пациента

Пустая форма заявкиВыбор пациентаДобавление услугДашборд заявки
Создание заявки

Поиск заявки или контейнера

Поиск заявок или контейнеров осуществляется через модальные окна, при введении параметров (не обязательно заполнять все поля ввода). Если количество найденных результатов будет больше 7, то система попросит скорректировать критерии поиска

Поиск заявкиПоиск контейнера
Поиск заявки и контейнера

Метрики, результаты и саморефлексия

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

-28 секунд

Сократилось среднее время работы с заявкой пациента (1 минута и 30 секунд)
  1. Моментами были трудности с изучение предметной области и понимание специфики взаимодействия врача с интерфейсом.
  2. При передаче макетов разработчику, я бы вместо комментариев в Figma перенёс это всё в текстовый документ.
  3. Были трудности с подбором и отрисовкой соответствующих иконок для интерфейса
Предыдущий кейсПредыдущий кейс