Кейс: редизайн B2B–сервиса автоматической генерации лидов
Привет! На связи Аня, UX/UI дизайнер компании Аспирити. В этом кейсе хочу рассказать историю, как мы делали редизайн сервиса автоматической генерации лидов для компании Oneforce.
Компания занимается разработкой решений для автоматизации бизнеса на основе инновационной технологии BrainCore. Это технология на базе искусственного интеллекта, которая может интерпретировать текстовую информацию и действовать в соответствии с ее пониманием. На базе этого решения компания Oneforce запустила несколько сервисов, и к созданию одного из них мы приложили руку.
Основной функционал веб-приложения Smartleads – поиск и отбор наиболее релевантных контактов, настройка алгоритмов автоматической переписки и увеличение прибыли за счет успешных сделок.
Задача
Клиент пришел с бета-версией продукта, собранного на базе компонентов из библиотеки Vue Material. Проектирование и дизайн интерфейса делали на ходу, поэтому у пользователей были вопросы к удобству и замечания по визуалу, что выглядит все шаблонно. Ключевой запрос был максимально улучшить UI/UX-дизайн приложения.
Что было сделано:
- определены роли пользователей в системе – переработаны карты путей
- отрисован UI-кит
- полный редизайн продукта
- логотип и фирменный стиль
Рабочий процесс
Часть 1: UX-доработки
После изучения продукта и его основных функций стало понятно, что сервис построен по B2B-модели. А значит, доступ к системе имеют две основные группы пользователей — это пользователи со стороны Провайдера и пользователи со стороны его Клиентов.
Стало понятно, что нужен унифицированный интерфейс для всех групп пользователей с одинаковым визуалом, но разным уровнем доступа к данным и правами на их изменение.
Начали с проработки функциональной карты системы:
Следующим этапом был анализ и описание сценариев работы для каждой роли пользователя с составлением user-flow диаграммы. Например, вот так был описан процесс импорта данных в базу:
Описав таким образом каждый процесс, мы с заказчиком увидели, где пользователи испытывают сложности. Мы упростили сценарии и придумали новые функции приложения, которые сделали взаимодействие с системой более удобным и комфортным.
Решаем UX-вопросы
В результате анализа были сформулированы следующие проблемы взаимодействия пользователя с системой:
Проблема: У персонального менеджера должна быть возможность зайти в раздел своего клиента, чтобы помогать и курировать работу с системой. В текущей версии приложения нужно авторизоваться под аккаунтом клиента — это вызывает конфликты сессий и мешает синхронизации данных.
Вопрос: Как сделать это наиболее удобно, без повторной авторизации и сложной навигации между разделами?
Решение: Давайте разделим систему на уровни для каждой Роли. Для навигации между разделами сделаем сайдбар, который изменяется в зависимости от того, на каком уровне используется система. То есть для для Персонального менеджера сайдбар на его уровне выглядит как обычный список нужных разделов, а при переходе на уровень клиента сайдбар меняется на такой же, как у клиента. Для возврата на свой уровень Менеджер может использовать кнопку Домой в хлебных крошках. Также в хлебных крошках добавим возможность быстрого переключения между клиентами.
Проблема: В процессе импорта данных система постоянно запрашивает реакцию пользователя на совпадение значений полей в записях. Это раздражает, так как вынуждает пользователя постоянно следить за процессом импорта и принимать в нем активное участие.
Решение: Я спросила заказчика, можем ли мы как-то автоматизировать эти действия. Оказалось, что да, нужно просто выставить определенные параметры сопоставления данных. Процесс получилось автоматизировать, сведя к минимуму участие пользователя в нем. Кроме того, это позволило добавить возможность параллельного импорта — теперь пользователь может запустить несколько процессов импорта данных с разных источников и отслеживать результаты в таблице в специальном разделе.
Проблема: Таблицы «Компании» и «Персоны» содержат большое количество записей, исчисляемое десятками тысяч.
Вопрос: Как можно сделать работу с таблицами максимально удобной для пользователя?
Решение: Добавить пользовательские настройки: какие именно столбцы нужно отображать, возможность менять ширину столбцов и их порядок, а также закреплять первую колонку данных (ту, которая с наименованием компании или контакта). Таким образом пользователь может настроить вид таблицы так, как ему удобно, система запомнит настройки и при возврате к работе в следующий раз выведет таблицу в нужном виде.
Проблема: В фильтре для таблиц большой список параметров, и пользователю приходится каждый раз вбивать эти параметры заново, чтобы сделать выборку данных из таблицы.
Вопрос: Как сделать этот процесс проще и удобнее?
Решение: Давайте добавим в фильтре возможность сохранить набор заданных параметров и возможность одним кликом применить этот набор. Таких наборов пользователь может сохранять несколько и применять именно тот, который ему нужен в данный момент.
На протяжении нашего сотрудничества сервис продолжал развиваться и наполняться новым функционалом. А пока заказчик генерировал идеи и тестировал их на пользователях, мне была поставлена задача разработать визуальный стиль и собрать UI-кит, базируясь на компонентах библиотеки Vue Material
Часть 2: UI-кит и стиль
Итак, мне нужно было разработать UI-кит, используя синий цвет (фирменный цвет компании SmartLeads ), по шрифту и стилю особых ограничений не было. Только пожелание, чтобы сервис выглядел свежо, современно и не слишком пестро. В качестве основного шрифта был выбран Inter из библиотеки Google Fonts, так как он простой, легко читается и имеет свободную лицензию для использования. В цветовой схеме я отталкивалась от синего цвета, он и его оттенки стали основными цветами интерфейса, плюс палитра серого цвета для вспомогательных целей и системные цвета: красный, желтый и зеленый.
Стили и поведение компонентов должны были быть максимально приближенными к элементам библиотеки Vue Material, это было пожелание заказчика, потому что приложение разрабатывалось на фреймворке Vue.
Особенности интерфейса: таблицы, секвенции и визуализация данных
Особенностью интерфейса этого приложения было множество разных таблиц, они использовались практически на каждом экране, поэтому их дизайну было уделено особое внимание. Например, ниже показана директория рабочих областей из клиентского раздела.
А это таблица со списком потенциально интересных бизнес-контактов. Её можно настраивать индивидуально под задачи пользователя и под разные размеры экрана. Пользователь может выбрать какие колонки с данными отображать, а какие скрыть, изменить порядок колонок в таблице и ширину каждой колонки.
И еще несколько примеров интерфейса под разные функции приложения. Например, для создания и настройки секвенций (алгоритмов рассылки в рамках кампании) был разработан вот такой графический интерфейс в виде схемы. Пользователь настраивает последовательность действий системы с помощью добавления задач в ответ на события-триггеры, например игнорирование сообщения получателем или ответа на сообщение.
В процессе работы над приложением заказчик понял, что им необходим дашборд для визуализации статистики работы сервиса. На дашборде ниже отображена статистика по найденным контактам:
На этом дашборде можно увидеть результат кампании по лидогенерации: всего 234 контакта были обработаны, из них с 43 получилось установить связь, 67 ответили на предложение, 10 заинтересовались. А на графиках отражена статистика по неделям в текущем месяце.
Таким образом, за шесть месяцев продуктивного сотрудничества продукт был перезапущен с новым дизайном и функционалом, заказчик остался доволен и вернулся к нам через год с новым проектом. Но это уже другая история.:)
Очень занимательно, спасибо!
Вот это круть!