В этой статье я рассказываю о своем процессе работы над одним из широкомасштабных проектов по обновлению внутреннего инструмента Probo (мы называем его Cerebro ) для улучшения поддержки клиентов.

Что такое Церебро?

Cerebro — это единый источник достоверной информации обо всем, что связано с Probo! Это внутренний инструмент Probo, который имеет несколько разделов, в том числе создание контента (для создания и отправки контента в приложение), теги (создание пользовательских тегов и назначение действий этим тегам), панель мониторинга и пользователи.

Раздел «Сведения о пользователе» — это база данных пользователей, где команда CX может проверить информацию о жалобах пользователей и вернуться к пользователю.

В этой статье вы увидите, как мы изменили дизайн раздела сведений о пользователе в Cerebro.

Бриф

Редизайн раздела сведений о пользователе в Cerebro для улучшения UX и повышения производительности службы поддержки клиентов Probo.

Понимание проблемы

Служба поддержки использует Cerebro для проверки действий пользователей в приложении.

Для этой задачи я сначала определил основные пользовательские потоки, а затем искал в них проблемы UX:

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

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

Выявлены основные проблемы:

1. Плохая сканируемость информации: основная работа пользователей заключается в получении информации от Cerebro, но при просмотре таблиц требовалось много когнитивных усилий, поскольку им приходилось уделять много внимания, чтобы найти нужную информацию на экране.
2. Сложная навигация: для некоторых пользовательских потоков навигация была сложной и скрытой.
3. Повышенная когнитивная нагрузка. Предыдущий дизайн не соответствовал гештальт-законам иерархии и близости, чтобы снизить когнитивную нагрузку на пользователей.
   Кроме того, с заданными пользовательскими потоками пользователям приходилось запоминать информацию из одной таблицы и переходить к другой таблице для сравнения, что увеличивало время выполнения задачи.
4. Идентичность бренда не согласована: брендинг Probo был переосмыслен несколько месяцев назад, поэтому редизайн Cerebro стал возможностью привести его в соответствие с новым брендингом.

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

Давайте посмотрим на некоторые страницы до и после:

Дизайны — до и после

Итак, давайте разберем эти редизайны один за другим.

До и после — анализ дизайна

Раздел «Сводная
информация о пользователе». Этот раздел состоит из доступной основной информации о пользователях, которая разделена на три части; аналогичная информация хранится вместе.

• Наиболее важная информация выделена на фронтах, таких как данные пользователя и статус.
• Приоритизация действий: в старом дизайне присутствуют три CTA без какой-либо иерархии для основных/дополнительных действий.
  Кроме того, после анализа я узнал, что ни одно из них не является призывом к действию или основным действием, и, следовательно, не нужно быть авансом и фокусироваться на экране. Кнопки действий состоят из одной кнопки, которая называется «параметры».

• Боковая панель навигации:
  на экранах с таблицами данных горизонтальное пространство имеет первостепенное значение, поэтому дизайн боковой панели навигации был переосмыслен с помощью кнопок со значками, занимающих минимальное пространство.
• Если требуется полноразмерная панель навигации, пользователь может щелкнуть логотип, и он развернется в полноразмерную панель навигации с помощью кнопок «Текст + значок».
  Без расширения, если пользователям нужно переключиться, они могут навести курсор на значки, чтобы увидеть, что это означает:

Но как разделение вкладок упростит сравнение данных между таблицами на разных вкладках? Мы расскажем об этом через некоторое время!

Теперь углубимся в некоторые подробности:

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

Это дизайн «До и После» для двух самых сложных таблиц — «История баланса» и «История торговли».

Чтобы упростить и ускорить сканирование данных, в целом позаботились о 4 пунктах:

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

Как это было сделано?

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

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

Чему я научился?
Большая часть работы, которую я проделал до этого проекта, была связана с добавлением новых функций дизайна в приложение probo или на целевые страницы веб-сайта.
Таким образом, работа с таким огромным набором данных сама по себе была сложной задачей, я многое узнал о том, как UX является прямым результатом того, как был реализован пользовательский интерфейс.

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

Ps Я также научился регулярно документировать процесс проектирования, потому что этот кейс занял у меня слишком много времени, чтобы написать

Что дальше?

1. Изучение микровзаимодействий, а также пустых состояний, чтобы добавить немного удовольствия между всей работой, которая не была рассмотрена прямо сейчас из-за нехватки времени.
2. Изучаем сочетания клавиш для использования инструмента, на данный момент у всех в команде есть MacBook (flex 101 ), поэтому на данный момент это эффективные и простые в использовании трекпады.
3. На данный момент выполнен редизайн только раздела сведений о пользователе, следующим этапом должен стать редизайн всех остальных разделов Cerebro.

Большой привет нашей замечательной команде CX, я буквально врывался в их комнату по крайней мере 5 раз в день во время этого проекта, они отвечали на все мои вопросы и сомнения наилучшим образом, и это было особенно во время сезона IPL, самого загруженного время года!

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

Спасибо за прочтение! До скорой встречи с другим кейсом

Передай привет Нидхи в LinkedIn • Instagram • Twitter