Разработка интерфейса системы по обеспечению безопасного доступа в интернет для корпоративных клиентов.
SurfSecure
Задача
Необходимо полностью переосмыслить работу с интерфейсом и разработать новый дизайн.
Сложности
  • 1
    Отсутствует конечная версия продукта
    Существующий продукт не имеет финальной функциональности, большая часть функциональности либо реализована только на backend, либо находится в головах у разработчиков.
  • 2
    UX/UI Особености
    Продукт достаточно сложный в использовании и имеет ряд клиентов. Поэтому новый дизайн интерфейса не должен усложнить работу уже существующим клиентам, но и отвечать новым требованиям заказчика.
  • 3
    Необходимость совместить множество требований
    Разработка интерфейса включает в себя мультиязычность, добавление фичей в будущем и, главное, удобство использования продукта как на новых устройствах, так и на мониторах с низким разрешением.
Перед началом разработки интерфейса необходимо было разобраться в каждом аспекте работы платформы и создать схематичную карту проекта, описывающую всю функциональность, так как у клиентов отсутствовал роутмап проекта.
Анализ существующей функциональности
После создания карты начался основной этап работы по созданию нового интерфейса.

Мы разделили его на две части:
1. Сбор пожеланий от клиента.
2. Разработка первых вайрфрейм макетов, включающих в себя все существующие требования.
Создание Wireframe карты
Полученные наработки будущей функциональности позволили нам перейти
к главной части работы – созданию дизайна. Ниже представлены некоторые из требований
к интерфейсу:
1. Уменьшить количество кликов мыши при настройке различных разделов системы.
2. Основная задача системы – это контроль доступа к интернет-ресурсам. Поэтому необходимо создать механизм, позволяющий быстро добавлять/редактировать новые политики по ограничению доступа (private policy).
3. Система логирования и мониторинга текущего состояния системы должна охватывать все возможные сценарии ошибок.
Дизайн интерфейса
После формирования карты платформы нужно было упростить настройку системы, потому что в первичном виде платформа представляла собой панель управления звездолетом. Мы решили сделать последовательную активацию разделов (аналог систему настройки талантов в WoW). Это позволило не только упростить настройку, но и добавить WoW-эффект для презентации и продаж.
Геймификация первичной настройки
Необходимо было создать интуитивно понятный интерфейс для настройки политик приватности, которые имели более 30 настроек с вкладками и таблицами для каждого поля, разграничения на типы доступов: глобальные, групповые и пользовательские.

Концепция отображения информации:
1. Блок с древовидной структурой для навигации по типам доступа и быстрому переходу между ними.
2. Основной экран с информационной таблицей.
3. Блок детальной информации для создания/редактирования и поиска правил/условий.
Древовидная структура для отображения таблиц
Время работы над проектом (в месяцах)
5
5
Команда
Методология разработки
Agile
Результат
По окончанию работы мы представили клиентам полностью новый интерфейс, отвечающий всем поставленным требованиям. Клиенты получили:

1. Подробную карту проекта и взаимодействия между экранами.
2. Дизайн макеты интерфейса.
3. Прототип с анимацией элементов.
4. Техническое описание проекта.
Проект сдан в 2019 году