Июнь 2022 | UI, design Spec
1Secure: Лоск для поиска
Как я наладила командную работу между дизайнером и разработчиками, пока редизайнила функционал Investigation
Преобразование ключевого функционала стало интересным испытанием и важной задачей. Я взялась за улучшение функции Investigation в Netwrix 1Secure, сделав её более визуально привлекательной для пользователей. Этот проект не только повысил вовлеченность пользователей, но и показал, как можно наладить продуктивное сотрудничество с командой, которая раньше почти не работала с дизайнерами.

О продукте и фиче

Netwrix 1Secure — это SaaS-решение, которое способствует проведению IT-аудита и предназначено специально для MSP-компаний.

Функционал Investigation (или поиска) — один из ключевых. Пользователь проводит тут значительную долю от всего времени использования продукта. Изначально Investigation реализовали без участия дизайнера. Протестировав в бою работоспособность функционала, команда пригласила дизайнера для его визуальной доработки: должно не только работать, но и выглядеть приятно.

Задача и ограничение

Основная задача

Навести порядок в визуальном оформлении функционала Investigation.

Ограничение

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

Дополнительно

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

Экран Investigation до и после изменений

Как шла работа

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

Затем, я постучалась в соседний продукт компании с аналогичными возможностями, чтобы определить уже известные плюсы и недостатки. Менеджер и ребята из техподдержки обрисовали несколько важных моментов, которые стоило бы иметь в виду.
UX-ревью
Далее я проанализировала реализованный Investigation и вскрыла еще ряд проблем. Среди которых, например, нелогичная связка фильтров, отсутствие адекватного выбора диапазона времени, отсутствие фидбека об экспорте данных, отсутствие различия между пользовательским отчетом и системным, окно с деталями, наполовину перекрывающее таблицу и другие.
Создание решения
Создание решения
Отрисовка макетов
Опираясь на дизайн-систему и используя библиотеку компонентов в Figma, я собрала первые макеты решения.
Разбор макетов и спецификация
Вместе с продуктовой командой мы выбрали "дешёвые" улучшения, которые можно легко внести при работе над стилизацией страницы. Остальные улучшения разбили на части, отложив их реализацию на будущее.

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

Коллективная работа и превзошедшие ожидания

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

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

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

Если вам интересно посмотреть на получившуюся спецификацию, вот ссылка – 1Secure Investigation Spec

Что дальше

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

Позже у нас выдался шанс поработать над опытом этого функционала. Об этом в кейсе: AI и отчёты: Просто спроси систему
Смотрите также
Как моя команда заняла первое место на AI-хакатоне Netwrix с идеей умных отчётов

Как я заложила основу для оптимизации проектирования 20+ продуктов компании Netwrix