Проанализировали существующую систему, создали новую архитектуру интерфейса и переработали ключевые экраны.
ООО «Гиперус» — компания, которая разрабатывает и внедряет решения для управления IT-инфраструктурой. Их флагманский продукт — одноимённая система для автоматизации мониторинга, администрирования и поддержки серверов и облачных сред.
Бизнес-задача
Автоматизировать процессы управления IT-инфраструктурой за счёт улучшения пользовательского взаимодействия.
Дизайн-задача
Создать понятный, логичный и адаптированный под задачи пользователей интерфейс. Для этого нужно было:
- Проанализировать существующий интерфейс и выявить основные проблемы — перегруженность, навигационные тупики, неинформативные экраны.
- Разработать новую информационную архитектуру — оптимизировать структуру разделов, перераспределить функциональные блоки и выстроить понятную навигацию.
- Адаптировать интерфейс под Ant Design — использовать компоненты библиотеки для унификации элементов, ускорения разработки и визуальной целостности.
- Учесть разные пользовательские роли — обеспечить администраторам, операторам, руководителя отделов и т.д. удобный доступ к нужным инструментам .
- Снизить когнитивную нагрузку — упростить восприятие интерфейса, сократить путь к действию, улучшить читаемость данных.
Результат
Что получилось
Мы обновили интерфейсы и действующих разделов, и тех, что ещё в разработке. Новый дизайн ускоряет выполнение задач, снижает нагрузку на поддержку и упрощает адаптацию новых пользователей.
Финансовый эффект
Экономия рабочего времени — за счёт улучшенной навигации и оптимизированных сценариев. Точные цифры пока не получили, но уже знаем, что сотрудники тратят меньше времени на выполнение рутинных задач.
Артефакты:
- Бизнес-требования.
- Список пользовательских сценариев, основных интерфейсных сущностей и фокусов.
- Информационно-архитектурная карта интерфейса.
- Поэтапный план работ по редизайну интерфейса, разбитый на 3-4 части, примерно одинаковые по объемы и связанные по смыслу.
- Детальные списки сценариев с отклонениями (по каждой части интерфейса).
- Макеты интерфейсов.
- Библиотека используемых компонентов (Ui-kit).
- Описание логики работы системы.
Дополнительно
Помимо макетов интерфейсов продукта, заказчик получил дополнительную пользу: проработанные состояния типовых таблиц, варианты действий с ними, а также описание логики работы фильтров для каждого раздела. Эти материалы стали основой для унификации поведения и повысили согласованность интерфейса.
Нюансы и особенности процесса
Сэкономили время заказчика за счёт экспертизы в команде: один из специалистов хорошо разбирается в сетевых протоколах и работе с базами данных. Это позволило быстро понять контекст, выявить проблемные зоны и приступить к проектированию без длительного погружения и интервью.
Поскольку система большая, описывать все пользовательские сценарии сразу было бы слишком трудоемко.
Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть модуль дизайн-задачника «Сценарии взаимодействия» для тех, кто хочет научиться их использовать в дизайне интерфейсов.
Поэтому команда пошла от обратного — начала проектирование, опираясь на сущности в каждом разделе и те действия, которые пользователи могут с ними совершать: создание, редактирование, удаление и т.п. Такой подход позволил двигаться быстрее и не терять фокус на реальной логике продукта.
Работали напрямую с разработчиками и пользователями, получали обратную связь сразу, без посредников. Сформировав концепты страниц, мы могли тут же свериться с заказчиком и выбрать, какие из них будут реализованы. Это ускорило процесс согласований и проектирования.
Некоторые цифры
Переработали 5 разделов
Обновили дизайн, добавили новую функциональность
Отрисовали 17 подразделов
User-flow создания сущностей и карточки самих сущностей
Для дашборда 85 макетов
В разных состояниях, при взаимодействии с разными элементами
В разделе «Дашборд» отрисовали работу с таймлайном, добавление виджетов, изменение размеров и т.д. — для двух пользовательских ролей отдельно.
Хотите так же? Пишите на we@sobakapav.ru.