Проектирование и дизайн интерфейса облачного сканера уязвимостей

За 6 месяцев сделали полный редизайн, перепроектировали интерфейс, разработали сценарии и сделали frontend на React. Пока мы готовимся к работам, запланированным на второй релиз, постараемся рассказать, как делать сложные продукты.

Metascan - облачный сканер уязвимостей с экспертным сопровождением. Сервис обеспечивает ежедневный контроль защищенности корпоративных инфраструктур. Проверяет на уязвимости ~150 000 серверов и веб-приложений каждый день.

Сервис позволяет:

Метаскан предоставляет не только сканер и доступ в UI, но и человека который еженедельно проведет для вашей компании планёрку по ИБ. Расскажет про то, как были найдены уязвимости и как их устранять, продемонстрирует эксплойт и, если нужно, проконтролирует работу RnD команды для создания модуля проверки под конкретно ваше ПО.

Среди клиентов платформы крупнейшие компании, банки и государственные структуры.

Чтобы лучше погрузиться в логику работы сервиса, разберем небольшой кейс:

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

Сервис уже существовал и активно развивался, команда вела собственные разработки, постоянно развивала проект, проект делался своими силами и на bootstrap, по мере развития компании возникла потребность обновить интерфейс и нам было необходимо:

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

Состав работ кажется стандартным:

Мы записывали каждую встречу. В итоге у нас получилось более 10 часов записанных интервью и разборов продукта.

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

Очень важным для нас было участие и вовлеченность команды Metascan. Нас подробно консультировали и подсказывали как работает текущий бэкенд, возможны ли изменения или нет, есть какие-то особенности.

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

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

По итогам этапа мы сделали:

По итогу нас получилось 37 страниц на этапе прототипа, часть экранов реализовали на этапе дизайна.

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

Для всех проектов мы собираем UI-Kit. В данном случае мы подошли более обстоятельно и шагнули в сторону дизайн системы. В проекте мы реализовали две темы с автоматической сменой, переход на разные языки и продумали множество состояний и “фишек”.

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

В итоге сделали 77 экранов с различными опциями и состояниями.

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

Клиент с первого экрана понимает состояние своего периметра и может сходу понять:

-количество угроз за год в динамике;

-разбивка угроз по уровню (сколько критических угроз, высокого статуса и среднего);

-открытые порты, порты за неделю и недоверенные порты;

-топ недоверенных портов;

-статистика профиля;

-информация о лицензии.

Классной фишкой сделали возможность скачать дашборд для отчетов компаний по ключевым метрикам. Генерируем страницу в PDF и отдаем пользователю.

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

Основные проблемы, выявленные при анализе:

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

Новый интерфейс

В новом интерфейсе мы предусмотрели все необходимые возможности и сделали взаимодействие с экраном более удобным.

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

К управлению добавили быстрые действия: запуск проверки, остановка и скачивание отчетов за период. На релизе команда Metascan расширила действия до скачивания отчетов по хостам, портам и уязвимостям.

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

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

Карточка хоста один из ключевых инструментов в работе с сервисом. В этом разделе отображаются уязвимости и ключевые действия.

На самом верху расположились ТАБы:

Каждая карточка угрозы раскрывается аккордеоном и содержит всю ключевую информацию: Порт, Уровень угрозы, Тип уязвимости, Полное описание, Ссылки и Действия для команды ИБ (Исправлено/ложное срабатывание)

Внедрили Highlight.js — это подсветка синтаксиса, написанная на JavaScript

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

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

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

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

В мини-карточку профиля выводится ключевая информация по настройкам для быстрой идентификации параметров.

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

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

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

Для запуска проверки у нас есть два ключевых сценария:

Запуск проверки конкретного хоста из карточки хосткаЗапуск проверки по группе, определенным хостам и одному, из раздела “Мои сайты”

Ранее на платформе уже был подобный функционал, который позволял управлять запуском проверок и формировать собственное расписание, только реализация была исключительно через CRON. Если кто не знает, это такой формат времени, например:

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

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

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

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

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

Дополнительно пользователь может использовать автоматическую смену темы, которая привязана ко времени суток.

За счет использования на фронте React, смена темы и языка происходит молниеносно.

Мы разработали страницы регистрации и авторизации, сделали системные страницы с ошибками 404 и 500, предусмотрели заглушки и все возможные состояния, которые делают использование сервиса еще более приятным и удобным.

Стек технологий:

Работа с API клиента:

Frontend разрабатывался в плотной связке с backend клиента. Спасибо за декларацию по API. При разработке уровень общения и созвонов был так же очень высок, так как разработчик погружался не только в логику продукта, но и “под капот”.

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

Так как разработка тянет на полноценную статью, и мы ее обязательно напишем, пока делимся классной фишкой:

Скрытие ключа API

Мы вдохновились скрытием картинок в Телеграм и воспроизвели что-то похожее: при наведении появляется ключ и нажатием пользователь может его скопировать.

Пошел 7-й месяц нашей разработки. Дизайн готов, фронтенд готов, предварительно протестирован и сдан команде Metascan, начались две недели ожидания. И в один день открыв боевой сервис мы видим заветный текст:

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

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

Ключевые лица со стороны Verno:

Виктор Живилков - Руководитель проекта

Ульяна Рожнова - Team Lead UX/UI-дизайнер

Попов Сергей - Team Lead Frontend-developer

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

Необходимо разработать сервис или ПО - будем рады помочь!

А осенью выйдет еще один кейс с крутым внутренним сервисом. Подписывайтесь и следите за обновлениями!