Диаграмма Ганта
Диаграмма Ганта
Product & UX/UI Design · B2B SaaS · Project management
Кратко
Сделал переосмысление и редизайн Диаграммы Ганта в B2B-системе. Я упаковал комплексную логику локальных задач, связей и ролей
в современный понятный интерфейс на основе изучения актуальных решений на рынке и в соответствии с ресурсами разработки.
Продуктовая проблема
Предыдущая версия диаграммы Ганта была функционально ограниченной
и визуально устаревшей, из-за чего клиенты не могли ей пользоваться полноценно, в связи с чем была проблема точности планирования задач:
не поддерживалась иерархия задач, пользователи не могли видеть структуру и целостность проектов
не поддерживались базовые связи между задачами, невозможно было управлять зависимостями задач
интерфейс в целом работал как вывод информации без возможности гибкого управления задачами
устаревший визуал был взят из готового фреймворка без изменений,
UI выглядел забагованно и неопрятно
Контекст
Продукт: B2B-платформа
Инструмент визуализации, планирования и управления хронологией и ресурсами проектов/групп задач
Основные пользователи: руководители
и проектные менеджеры.
Дополнительно: линейные сотрудники (исполнители задач)
Основные задачи
Превратить диаграмму Ганта в полноценный инструмент планирования и управления задачами,
а не просто визуализации сроков
Исследование требований и кейсов клиентов,
а также актуальных решений на рынке
Обновить и освежить UI, развивая дизайн-систему
Моя роль как продуктового
UX/UI дизайнера
Анализ опыта клиентов и рынка существующих решений
Проектирование обновленного формата диаграммы Ганта
Проработка UX-логики, решающей продуктовые проблемы
Прототипы, конечный дизайн и обновление кросс-модульных компонентов для дизайн-системы
Согласование с продактами, руководством и разработкой
Ключевые продуктовые решения
1
Иерархия задач
Родительские задачи автоматически рассчитывают свои сроки и прогресс на основе дочерних задач разных уровней вложенности.
Родительская задача отображается как прогресс-бар: чем больше завершённых подзадач — тем выше визуальный прогресс.
2
Зависимости
между задачами
При изменении сроков ведущей задачи:
автоматически сдвигается вся цепочка зависимых задач
сохраняется логическая целостность плана проекта
При создании новых связей образуются новые группы задач
3
Управление напрямую
на диаграмме
Пользователь может не только визуализировать хронологию проектов,
но также наглядно управлять отдельными задачами, группами задач и связями
без перехода по страницам
4
Различное представление данных
Реализовали гибкую настройку вида и вывода контента с помощью масштабирования по времени, фильтрации, сортировки, панели параметров задач
Основные компромиссы
в данном кейсе
Мы отказались от поддержки нескольких типов связей между задачами для первой версии обновления, ограничившись форматом «окончание → начало», исходя из отсутствия значительной потребности в этом по фидбэку
Не удалось согласовать гибкую кастомизацию поведения связей: в разных референсах этот принцип реализован
по-разному, по фидбэку не было явного запроса на это, и было принято решение ограничиться базовыми форматами
Результаты
Точность планирования сроков выросла на ~20% за счёт понятной визуализации проектов на общем таймлайне. Сравнивали плановое и фактическое время выполнения
на выборке 30+ задач
Снизилось кол-во переносов сроков. Повысилась предсказуемость и осознанность планирования по обратной связи команды.
Упростился процесс контроля групп задач. Инструмент стал пригоден для реального проектного планирования
Обновлён визуал и набор компонентов, которые будут использоваться и в других частях продукта