Необходимо полностью переосмыслить работу с интерфейсом и разработать новый дизайн.
Сложности
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. Техническое описание проекта.