Selectel

Редизайн панели управления Виртуальными машинами

Проблема

Несколько крупных клиентов пожаловались на список серверов:

  • Долгая загрузка страницы,
  • Список очень длинный и приходится много скроллить.

Мы осознали, что панель создавалась для небольших инфраструктур и теперь плохо подходит для крупных клиентов.

Пользователи

Две основные группы пользователей:

Задачи

  1. Ускорить загрузку списка
  2. Выявить основные сценарии
  3. Спроектировать список так, чтобы он позволял эффективно выполнять задачи

Процесс

Вебвизор

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

Технология

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

Анализ конкурентов

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

Интервью

Я провела 5 интервью с системными администраторами, работающими с разными инфраструктурами, и выявила 5 основных сценариев работы в панели:

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

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

В ходе тестирования я получила много полезного фидбека, который учла при подготовке итогового решения.

Решение

Таблица
  • все для поиска
  • компактный вид для быстрой оценки инфраструктуры
  • визуальное разделение IP адресов
  • все для быстрой оценки проблем

Быстрая диагностика проблем

Наладить работу неисправного сервера это одна из основных задач, с которой приходят в панель. Чтобы предположить возможные причины проблем, смотрят на ОС (1) и тип загрузочного диска (2), и затем подключаются к консоли сервера (3).

Упрощение навигации по IP

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

  • публичный IP — большого размера и черного цвета,
  • приватный IP — меньшего размера и серого цвета.

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

Страница сервера повторяет структуру карточки
  • снижение когнитивной нагрузки
  • ускорение первой итерации

Онбординг для упрощения знакомства
  • только для тех, у кого уже есть сервера на момент релиза
  • покрывают основные сценарии
  • указывают на конкретный элемент в интерфейсе

Асинхронная подгрузка данных

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

Результаты

  • Большинство действий осуществляется со списка
  • Уменьшилось использование поисковой строки
  • Повысилась воспринимаемая скорость загрузки списка
  • Положительный фидбек от крупных клиентов

Если вам понравилось мое портфолио,
буду рада пообщаться

LinkedIn
butsykvlada@gmail.com
+34-656-426-602