Кейс: редизайн B2B–сервиса автоматической генерации лидов
Привет! На связи Аня, UX/UI дизайнер компании Аспирити. В этом кейсе хочу рассказать историю, как мы делали редизайн сервиса автоматической генерации лидов для компании 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 заинтересовались. А на графиках отражена статистика по неделям в текущем месяце.
Таким образом, за шесть месяцев продуктивного сотрудничества продукт был перезапущен с новым дизайном и функционалом, заказчик остался доволен и вернулся к нам через год с новым проектом. Но это уже другая история.:)
Очень занимательно, спасибо!
Вот это круть!