Click to order
Total: 
Напишите, пожалуйста, ваше имя и ваш рабочий e-mail, чтоб мы знали, кому и куда присылать уроки.
Ваше имя
Ваш Email
По закону мы обязаны спросить

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

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

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

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

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

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

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

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

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

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

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

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

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