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

Главное о кейсе

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

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

Ключевой результат, как отмечает сам заказчик: "Результат работы с командой Verno, это не только красивый UI, но и прямое влияние на выручку, ведь визуальный уровень зрелости продукта чрезвычайно важен для крупных клиентов."

----------------------

Metascan is a cloud-based vulnerability scanner with expert support. The service provides daily monitoring of the security of corporate infrastructures. Checks ~150,000 servers and web applications for vulnerabilities every day.

In 6 months we did a complete redesign, redesigned the interface, developed scripts and made a frontend in React.

The key result, as the customer himself notes: “The result of working with the Verno team is not only a beautiful UI, but also a direct impact on revenue, because the visual level of product maturity is extremely important for large clients.”

Как проект изменил жизнь пользователей

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

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

Проблемы, которые решает сервис:
1. Большое количество ложных срабатываний.
Вы можете отметить уязвимость как ложную, это автоматически создаст заявку на исправление кода для разработчиков.
2. Низкая скорость работы сканеров уязвимостей
Сервис использует распределенную сеть серверов и проверяет более 100 000 доменов и IP-адресов каждый день
3. Отдел ИБ перегружен текучкой
Анализирует уязвимости и еженедельно проводят совместные планёрки с командой Информационной безопасности
4. Уязвимости без реальных сценариев атаки
Для динамически обнаруженных уязвимостей показываем PoC и команды для воспроизведения

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

At the beginning of 2022, most companies in Russia faced cybersecurity problems.
Foreign vulnerability scanners have left the market, and companies have faced unprecedented attacks.

Metascan is a cloud vulnerability scanner with expert support. The service provides daily security monitoring of corporate infrastructures. Checks ~150,000 servers and web applications for vulnerabilities every day.

Problems that the service solves:
1. A large number of false positives.
You can mark the vulnerability as false, this will automatically create a code correction request for developers.
2. Low speed of vulnerability scanners
The service uses a distributed network of servers and checks more than 100,000 domains and IP addresses every day
3. The Information Security department is overloaded with turnover
Analyzes vulnerabilities and conducts weekly joint meetings with the Information Security team
4. Vulnerabilities without real attack scenarios
For dynamically detected vulnerabilities, we show PoC and commands for playback

After the update, users received a convenient domestic solution with a thoughtful interface and unique engine and customer service solutions.

Бизнес-задача и ее решение

Основная задача была переработать полностью интерфейс сервиса и улучшить опыт работы с сервисом. С сервисом начинали работать энерпрайз -клиенты, что ставило более высокие стандарты к функционалу и интерфейсу. Что важно: спроектировать и улучшить существующие разделы, учесть функциональные возможность движка, учесть планы по развитию сервиса Metascan.

1. Сделали анализ текущего решения.
2. Провели более 10 часов интервью с командой Заказчика, и учли при проектирование текущую реализацию, план улучшений и план реализации новго функционала
3. Задизайнили весь сервис
4. Сделали дизайн-систему с декларацией компонентов и элементов
5. Разработали Frontend на React.js, и связали все через API

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

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

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

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

----------------------

The main task was to completely redesign the service interface and improve the experience of working with the service. Energprise clients started working with the service, which set higher standards for functionality and interface. What is important: to design and improve existing sections, take into account the functionality of the engine, take into account plans for the development of the Metascan service.

1. We have made an analysis of the current solution.
2. We conducted more than 10 hours of interviews with the Customer's team, and took into account the current implementation, the improvement plan and the plan for the implementation of new functionality during the design
3. Redesigned the entire service
4. We made a design system with a declaration of components and elements
5. Developed Frontend on React.js, and linked everything through the API

Solution features:
In the new interface, we have provided all the necessary features and made interaction with the service more convenient.

We implemented a functional dashboard with the ability to download a report, convenient navigation through host groups in "my sites" and redesigned the host card by introducing Highlight.js for syntax highlighting when the service shows the code.

We have developed scenarios for launching checks and selecting the required scanner profile.

The frontend on React.js allowed you to change themes and language at lightning speed, as well as quickly manage infrastructure and scanning.

Крафт (мастерство), реализация, технические детали

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

2. Сделали дизайн-систему и завели storybook

3. Связали на фронте сложные таблицы, которые в целях безопасности отдаются разными эндпоинтами. И продумали прелоадеры.

4. С интерфейсом разработанным нами сейчас работают крупнейшие компании России, вот несколько из них:
МТС Банк, МЕДСИ, РСХБ-Страхование, Почта России, Wildberries, МКБ, Альфа Банк, Ростелеком, СБЕР БАНК

5.Стек технологий: React.js, Vite, Redux/toolkit, Scss, PostCSS, Storybook, Axios, Css modules.

----------------------

1. In just 6 months, we were able to complete such a volume of work and deliver a high-quality project that the team can develop and scale independently.

2. We divided the design system and started a collection of short stories

3. We linked complex tables at the front, which, for security purposes, are given by different endpoints. And we thought out the preloaders.

4. The largest Russian companies are currently working with the interface developed by us, here are a few of them:
MTS Bank, MEDSI, RSB-Structuring, Russian Post, Wildberries, ICD, Ala Bank, Rostelecom, SBERBANK

5.List of technologies: React.js, Videos, Redux/toolkit, Scs, Posts, Storybook, Axios, Css modules.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

----------------------

The key insight is to abstract from your own expertise in other areas when working with complex products. Many patterns familiar to everyone do not work in niches where the importance of information is a priority. Thus, when designing an interface, you need to ask the question: what benefit will each pixel bring to the client.

Текущая доступность работы

Есть бесплатная регистрация, полный кейс со всеми интерфейсами размещен на нашем сайте.

Скриншоты

Видео

Комментарий заказчика

Как стартап мы развивались с 2018 года и к моменту работы с командой Verno уже имели некоторую историю. Но переломным стал момент, когда клиент стал видеть в нас не стартап со сделанным “на коленке” UI, а решение подходящее для крупной корпорации. Для многих заказчиков удобство и красота UI являются не менее важным фактором, чем возможности движка проверок. Результат работы с командой Verno, это не только красивый UI, но и прямое влияние на выручку, ведь визуальный уровень зрелости продукта чрезвычайно важен для крупных клиентов.