Интерфейс дашборда медицинской системы

Медицинская система «Авиценна» хранит всю информацию по больнице. Но — в разных экранах, и переключаться между ними неудобно. «Коста» решила собрать все цифры на одном дашборде — такой вот подарок главврачам.
~ 500 000 ₽
Интерфейс для главного врача: разработали дашборд, который собирает организационные данные по больнице и упрощает аналитику.

Контекст

Результат

Бюджет

2017
Фирма «Коста» разрабатывает информационные системы для больниц. Главный продукт — программа «Авиценна». Она помогает организовать внутреннюю работу клиники: следить за финансами, движением пациентов, заполняемостью коек и запасом лекарств и расходных материалов на складе. В идеале — совсем без бумажек.
Фирма «Коста» разрабатывает информационные системы для больниц. Главный продукт — программа «Авиценна». Она помогает организовать внутреннюю работу клиники: следить за финансами, движением пациентов, заполняемостью коек и запасом лекарств и расходных материалов на складе. В идеале — совсем без бумажек.
Интерфейс «Авиценны»
Оригинальный интерфейс заказчика
Врачи и медсестры ведут учет в «Авиценне», а главврач больницы может быстренько посмотреть нужную информацию, находясь хоть на краю света. Каждый пациент как на ладони, каждая таблеточка учтена.
Врачи и медсестры ведут учет в «Авиценне», а главврач больницы может быстренько посмотреть нужную информацию, находясь хоть на краю света. Каждый пациент как на ладони, каждая таблеточка учтена.
Профиль пациента в системе «Авиценна»
Профиль пациента в интерфейсе | sobakapav.ru
Google Docs
«Коста» решила, что «быстренько» — это недостаточно. Нужно мгновенно. Поэтому задумала на Новый год подарить главврачам дашборд, где все основные данные собраны на одном экране. Бросил взгляд и сразу все понял. Даже не надо никуда нажимать.
«Коста» решила, что «быстренько» — это недостаточно. Нужно мгновенно. Поэтому задумала на Новый год подарить главврачам дашборд, где все основные данные собраны на одном экране. Бросил взгляд и сразу все понял. Даже не надо никуда нажимать.
На самом деле экранов было два. И у каждого — по несколько разных состояний. Первый экран — дашборд. Второй — табличка с деньгами. Потому что деньги — это важно.
На самом деле экранов было два. И у каждого — по несколько разных состояний. Первый экран — дашборд. Второй — табличка с деньгами. Потому что деньги — это важно.
Концепт медицинского дашборда/sobakapav.ru
Концепт дашборда
Проект со стороны клиента вела директор компании. Она основательно подготовилась к проекту: сама провела аналитику, собрала данные, написала к ним пояснения и подготовила ТЗ. Все было очень подробно. Нам оставалось только упаковать информацию.
Google Docs
Проект со стороны клиента вела директор компании. Она основательно подготовилась к проекту: сама провела аналитику, собрала данные, написала к ним пояснения и подготовила ТЗ. Все было очень подробно. Нам оставалось только упаковать информацию.
Над дашбордом работали два проектировщика. Каждый нарисовал по концепту. Заказчик попросил взять за основу один концепт, но добавить в него фишки из другого.
Над дашбордом работали два проектировщика. Каждый нарисовал по концепту. Заказчик попросил взять за основу один концепт, но добавить в него фишки из другого.
Медицинский дашборд/sobakapav.ru
Мы знали, какие данные нужно показать. Оставалось только сгруппировать их на странице
Прототип дашборда для десктопа проектировщик передал дизайнеру и другому проектировщику. Один начал наводить красоту, другой — проектировать версию для смартфонов.
Дизайнер взял за основу цвета логотипа «Косты» и нарисовал четыре варианта оформления. И это только для десктопа.
Google Docs
Дизайнер взял за основу цвета логотипа «Косты» и нарисовал четыре варианта оформления. И это только для десктопа.
Первый концепт дашборда/sobakapav.ru
Эти три варианта дизайна заказчику понравились. Но он выбрал четвертый
Эти три варианта дизайна заказчику понравились. Но он выбрал четвертый
Первый вариант представления дашборда | sobakapav.ru
Второй вариант представления дашборда | sobakapav.ru
Третий вариант представления дашборда | sobakapav.ru
Из всех артефактов дашборда мы собрали библиотеку элементов.
Из всех артефактов дашборда мы собрали библиотеку элементов.
Руководство по стилю — стайлгайд медицинского интерфейса/sobakapav.ru
Style-гайд нужен разработчикам, чтобы сохранять консистентность. Его создают для всех крупных проектов
От заказчика почти не было правок. Вот что значит подробное ТЗ. В итоге проект занял всего один месяц и неделю.

Зато были проблемы с внедрением. «Авиценна» — система сложная, ее разрабатывали много лет. Поэтому выглядит она как «привет из „нулевых“». Если обновить все интерфейсы системы, работа в клиниках встанет. Когда разработчики «Авиценны» увидели дашборд, они попытались его упростить — вместо закругленных углов сделать прямые, использовать стандартные шрифты и контролы.
Google Docs
От заказчика почти не было правок. Вот что значит подробное ТЗ. В итоге проект занял всего один месяц и неделю.

Зато были проблемы с внедрением. «Авиценна» — система сложная, ее разрабатывали много лет. Поэтому выглядит она как «привет из „нулевых"». Если обновить все интерфейсы системы, работа в клиниках встанет. Когда разработчики «Авиценны» увидели дашборд, они попытались его упростить — вместо закругленных углов сделать прямые, использовать стандартные шрифты и контролы.

Дашборд главврача/sobakapav.ru
Финальная версия дашборда для десктопа
Финальная версия дашборда для десктопа
Мобильная версия дашборда для главврача/sobakapav.ru
Версия для смартфонов.

Посмотреть одним экраном
Версия для смартфонов
Каркас смартфона | sobakapav.ru
Каркас смартфона | sobakapav.ru
Но директору настолько понравилась получившаяся страница, что она настояла на нашем решении.

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

Но директору настолько понравилась получившаяся страница, что она настояла на нашем решении.

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

Старый интерфейс Brighteye/sobakapav.ru
Две другие страницы мы нарисовали по style-гайду
Две другие страницы мы нарисовали по style-гайду
~ 500 000 ₽
Бюджет
«Наша компания занимается разработкой программного обеспечения для медицины уже довольно давно. В этом году мы решили разработать удобную и простую в использовании программу для главных врачей больниц и поликлиник. Мы обратились за помощью в „Собаку Павлову“. Менеджер за короткий срок вежливо и настойчиво провела аналитику и управление проектом по созданию дизайна. Были учтены наши пожелания, выслушаны „хотелки“. Дизайн получился удобным и для разработчиков, и, мы надеемся, для пользователей. Надеюсь, что и в дальнейшем мы будем сотрудничать для получения красивых и удобных программ для наших клиентов».
Мария Абрамова
Генеральный директор

Ура! Дашборд внедрен и работает.

Результат
Другие кейсы