Проект полного цикла

График для мониторинга сети устройств

Модуль для сбора и аналитики показателей в режиме реального времени. Позволяет заранее выявлять проблемные места и устранять их не доводя до инцидентов

Тип проекта

Веб - приложение

Моя роль

Продуктовый дизайнер (создание дизайна с нуля)

Banner

Результаты

Финальный дизайн был сделан в виде макетов с комментариями. Кроме того, было видео, где показано, как работает виджет

  • Скорость выполнения задач выросла в 4.3 раза
  • 90% оценили интерфейс как “очень удобный”
  • Оптимизация пользовательского пути
  • Коммуникация между операторами стала лучше
chart

Проблемы со старым дизайном

Для мониторинга используется динамический график. Каждый выбранный параметр устройства представлен в виде линии на графике

  • Невозможно показывать или скрывать параметры
  • Сложно понять, к какому устройству относится линия
  • Сложно делится данными
  • Дизайн в целом был непривлекательный

Моя роль

Команда состояла из дизайнера, разработчиков и продакт-менеджера

Провести исследование пользователей

Проанализировать полученную информацию

Создать макет интерфейса

Передать в разработку

Трудности и ограничения

При работе над проектом мне было необходимо учитывать следующие ограничения:

Качество экранов

Большинство операторов используют недорогие мониторы. Важно было, чтобы цвета легко различались даже на мониторах низкого качества

Задачи пользователей

Пользователи должны были иметь возможность в любой момент перейти от одной задачи к другой, при этом не потеряв данные

Размер экрана

Стандартное разрешение для экранов было 1920×1080. Необходимо было уместить всё на небольшом экране

Паттерны поведения

Новый виджет делался на базе уже существующего. Пользователи привыкли к некоторым паттернам, которые надо было сохранить

Процесс

Этап 1. Изучение

Определение проблем с текущим виджетом

Понимание контекста

Определение целей пользователей

Этап 2. Генерация

Прототипы и подбор вариантов

Новые требования от заказчика

Тестовые мокапы

Этап 3. Валидания

Валидация идей

Тестирование интерактивного прототипа

Анализ полученной информации

Этап 4. Дизайн

Создание дизайн-системы

Отрисовка финальных экранов

Создание интерактивного прототипа

Этап 5. Тестирование

Подготовка тест-плана и рекрутинг участников

Проведение сессий юзабилити-тестирования

Сбор и анализ данных

Этап 6. Поддержка

Проверка продукта на соответствие макетам

Написание документации

Исследование

Исследование проводилось с целью понять задачи, цели и проблемы пользователей с текущим решением

Гипотезы

Проект начался с общей встречи, на которой надо было поставить правильные вопросы для исследования. Моей задачей было собрать уже имеющуюся у нас информацию, которая была получена от заказчика

Пользователи сортируют показатели по устройству или по параметру

Пользователям неудобно добавлять новые устройства

Пользователи открывают сразу несколько окон

Слишком большое количество осей Y мешает мониторингу

Пользователи вносят информацию в таблицы

Пользователям иногда надо скрывать тот или иной график

Методы исследования

В качестве стартовой точки я составила список привычных задач для оператора, чтобы посмотреть, как они выполняют их в старом приложении

Далее я провела серию контекстуальных интервью, где пользователи выполняли привычные задачи, попутно комментируя, а также отвечали на вопросы. При этом фиксировалось время, которое уходило на выполнение каждой задачи

Контекстуальные интервью

Интервью со стейкхолдерами

Юзабилити тестирование

Метрики

Для принятия дизайн решений на основе данных

Успешность выполнения задачи (Task Success Rate)

Время выполнения задачи (Task Time)

Оценка удовлетворенности (10 баллов)

АНАЛИЗ ПУТИ ПОЛЬЗОВАТЕЛЯ

Создание user journey map

Так как у нас уже были пользовательские сценарии, полученной информации был достаточно, чтобы построить UJM. Для каждого шага на пути соответствовала информация из категорий, перечисленных выше.

Banner

Быстрый доступ ко всем данным


Быстро стало понятно, что главное - это найти правильный баланс

Мониторинг нескольких устройств одновременно


Быстро стало понятно, что главное - это найти правильный баланс

Фокусировка на определённом параметре


Быстро стало понятно, что главное - это найти правильный баланс

Новые инсайты

Повторное исследование

Главным открытием было то, что пользователь смотрит на графике не саму динамику показателей, а ищет резкие перепады, так как именно они являются признаком аварии.

Это дало ответ на один из главных вопросов - “что именно пользователи рассчитывают увидеть на графике”. Теперь, когда это стало ясно, можно было генерировать решения.

Prototype
Кликабельный прототип

Тестирование прототипов

Для тестирования я использовала кликабельные макеты (low-fidelity). Оценивались как качественные, так и количественные параметры

Скорость выполнения задач

Оценка удобства использования

Комментарии

TCR (процент успешно выполненных задач)

User Flow
chart

Итерации

После тестирования первого прототипа были получены дополнительные требования от заказчика

Потребовалась возможность переключаться между динамическим и статичным графиком. Статичный график показывал данные за фиксированный период времени. Динамический график показывал данные, например, за последние 24 часа

График

Каждому параметру соответствует функция на графике. На легенде параметр отображается в виде карточки

Любой параметр можно скрыть на графике, не удаляя (кнопка с глазом), либо скрыть все, кроме него (кнопка с мишенью). Карточки сгруппированы по осям