Фирма «Коста» разрабатывает информационные системы для больниц. Главный продукт — программа «Авиценна». Она помогает организовать внутреннюю работу клиники: следить за финансами, движением пациентов, заполняемостью коек и запасом лекарств и расходных материалов на складе. В идеале — совсем без бумажек.

Интерфейс «Авиценны»

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

Профиль пациента в системе «Авиценна»

«Коста» решила, что «быстренько» — это недостаточно. Нужно мгновенно. Поэтому задумала на Новый год подарить главврачам дашборд, где все основные данные собраны на одном экране. Бросил взгляд и сразу все понял. Даже не надо никуда нажимать.

Обоснование проекта

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

Концепт дашборда

Проект со стороны клиента вела директор компании. Она основательно подготовилась к проекту: сама провела аналитику, собрала данные, написала к ним пояснения и подготовила ТЗ. Все было очень подробно. Нам оставалось только упаковать информацию.

Требования к рабочему месту главврача

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

Мы знали, какие данные нужно показать. Оставалось только сгруппировать их на странице

Посмотреть одним экраном

Дизайнер взял за основу цвета логотипа «Косты» и нарисовал четыре варианта оформления. И это только для десктопа.

Финальные макеты

Эти три варианта дизайна заказчику понравились. Но он выбрал четвертый

Из всех артефактов дашборда мы собрали библиотеку элементов.

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

От заказчика почти не было правок. Вот что значит подробное ТЗ. В итоге проект занял всего один месяц и неделю.

Style-гайд и библиотека элементов

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

Финальная версия дашборда для десктопа

Версия для смартфонов

Посмотреть одним экраном

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

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

Две другие страницы мы нарисовали по style-гайду

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