Fortes. Защита сложная, управление — понятное

Интерфейсы сервиса Fortes: сайт защиты от DDoS-атак, личный кабинет, биллинг и статистика

UX/UI-дизайн
SaaS
Кибербезопасность

Fortes помогает защищать сайты от DDoS-атак, нежелательных ботов и других угроз.

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

Проект в фактах

Что сделали
Пересборка пользовательских сценариев, адаптивные версии и UI Kit
Формат
Дизайн веб-сервиса
Статус
Дизайн выполнен, дальнейшая реализация проекта поставлена на паузу

Сервис защищает сайты. Кабинет не должен нападать на пользователя

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

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

Именно вокруг этих вопросов мы пересобрали интерфейс Fortes.

Цель

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

Задача

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

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

Старый кабинет показывал функции. Новый — помогает ими управлять

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

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

Мы начали не с косметического обновления, а с иерархии информации и логики переходов.

Прежний кабинет: настройки SSL и график трафика

Прежний кабинет: список услуг и статистика

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

Сначала состояние. Затем детали. После — действие

Интерфейс построили вокруг последовательности, по которой пользователь принимает решение:

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

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

Мобильный экран услуги со статусом и тарифом

Всё ли под контролем?

На обновлённом дашборде собрали информацию, которая помогает оценить ситуацию без путешествия по разделам: активные сервисы, статусы подключения и оплаты, последние счета и обращения в поддержку.

Навигация, которую не нужно расшифровывать

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

Статусы рядом с объектом

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

Действия заметны, но не спорят с данными

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

Один домен — одна рабочая точка

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

Запросы и трафик

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

Подключение и настройки

На одном экране можно проверить адрес сервера и домен, настроить HTTPS-переадресацию и параметры кеширования.

DNS, SSL и белые списки

Специализированные инструменты получили отдельные сценарии внутри общего интерфейса. Пользователь может управлять DNS-записями, сертификатами и разрешёнными IP-адресами, не теряя выбранный сервис.

Экран услуги со статистикой запросов и трафика

Записи, которые проще прочитать до того, как их изменишь

Работа с DNS требует особенной аккуратности: ошибка в одной записи способна повлиять на доступность сайта. Поэтому в таблице разделили тип записи, имя, содержимое, TTL и состояние проксирования.

Добавление и редактирование записей оформили как отдельные понятные действия, а дополнительное объяснение показывает, как работает проксирование.

Работа начинается раньше первого графика

Редизайн охватил не только основные настройки защиты. Мы проработали весь путь пользователя внутри продукта.

Регистрация и подключение

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

Счета и подписка

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

Поддержка

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

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

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

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

Мобильные версии ключевых экранов кабинета

Результат

Открыть сайт Fortes

Мы пересобрали информационную архитектуру личного кабинета и подготовили систему ключевых экранов для десктопа и мобильных устройств:

дашборд и управление подключёнными сервисами;
статистику запросов и трафика;
настройки подключения и кеширования;
управление DNS, SSL и белыми списками;
счета, профиль и поддержку;
регистрацию, авторизацию и онбординг;
UI kit для дальнейшего развития продукта.

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

Это честный результат кейса: не «рост конверсии на глаз», а подробно спроектированный UX/UI сложного технического сервиса.

Сложный сервис не обязан выглядеть сложным

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

Технический продукт сложный. Обязан ли таким быть интерфейс?

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

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

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

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

Да. Мы можем исследовать текущий интерфейс, пересобрать пользовательские сценарии, подготовить UX/UI и передать систему вашей команде разработки. Именно в таком формате проходила работа над Fortes.

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