Devino.Chat

Подзадачи

• Переработать группы, в которые входят агенты;

• Переработать карточки агентов;

• Расширить информацию о агенте и группах;

• Внедрение новый фитч.

Процесс

Пересобрал меню, сделал его меньше, оставлены только иконки. Исключительно администраторы могут видеть весь перечень меню, обычные агенты видят только раздел «Чаты» и «Агенты».

В процессе работы было принято решение перименовать раздел с «Команд» на «Агентов», а сами группы, в которые числились агенты из «Групп» в «Команды». Все блоки и карточки были переделаны, плюс добавлен новый правый блок «Информации», в которую вынесена информация и контролы изменения команда и самих агентов. Мной были отрисованы дефолтные аватарки для агентов в новом стиле.

«Команды» полностью переосмыслены, добавлены аватарки для лучшего распознавания (потому что много кто не читает текст), добавлено количество участников в команд, увеличено место для названия команд, был разработан функционал настройки времени работы команды, этот кейс решает проблему описанную выше.

Для данного раздела разработана мобильная версия с функционалом как и добавление агентов, так и добавления команд. Было бы неудобно в одном разделе размещать и список агентов и список команд, поэтому было принято решение разбить их на подотделы.

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

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

---

Подзадачи

• Разработать сам раздел профиль с данными агента, тк данные редактируются в разделе «Агенты», что неудобно и не логично;

• Разбить на подразделы;

• Заложить функционал рабочего времени агента.

Процесс

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

В разделе отображены и те данные, которые пользователь может редактировать, и информация для ознакомления.

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

В мобильной версии было не лучшим решением объединять вместе информацию/пароль/выбор языка, поэтому было принято решение разбить на подразделы. Раздел уведомлений в мобильной версии я не рассматривал, так как это sdk и только в браузерах.

---

Процесс

В разработке я вывел фильтры периодов на самых верх страницы, а так же выбор каналов. Для сводных данных была убрана рамка, чтоб увеличить воздух между блоками.

Для фильтра периода были частично изменены дефолтные значения. При проведении исследования я выявил, что данные значения использую чаще всего, для всего остального есть кастомные значения. Так же для статистики был разработан компонент range-calendar.

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

До недавних пор подраздел назывался «График», а почему так произошло никто не понимал. Раздел отражает активность/онлайность агента в течении своего рабочего дня, это необходимо адмнистаторам для наблюдением за своими подчинеными.

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

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

Для раздела разработана мобильная версия. К сожалению, я пока что не придумал, как сделать адаптив мониторинга агентов. Есть вариант реализовать раскрытие карточки агента и в нем будет график его активности. Но, возможно, решение будет неудобным, так как необходимо просматривать показатели агента поочередно и всей картины администраторам будет сложно увидеть, надо тестировать. И было принято решение с бизнесом, что данный функционал не внедрять в мобильную версию.

---

Подзадачи

• изменить механику выбора канала. Способ который существует сейчас ограничен высотой экрана. Многие наши клиента набирают себе большое количество каналов и иконки могут вылезать за пределы экрана. Так же в мобильной версии я сталкиваюсь с аналогичной проблемой;

• изменить иконки каналов;

• изменить и наполнить функционалом онлайн-чат.

Процесс

Я разработал новую для приложения механику по выбора канала для обращения. Изменил внешний вид онлайн-чата, как шапку, так и тело. Внедрил блок сбора информации о клиенте. Сделал технические сообщения, например о том, что к диалогу присоединился оператор или наоборот вышел из него.

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

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

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

Анимация виджета

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

Мобильная версия

Хороший плюс данной разработке онлайн-чата является, что она легко внедряется в мобильный адаптив и не обязательно, чтоб фронты специализировались по мобильной разработке (например чтоб вызвать системный функционал с выбором того или иного элемента). И сам онлайн-чат адаптивный, он подстаивается под высоту экрана пользователей. Если высота экрана меньше 704 px (дефолтная высота онлайн-чата), то при открытии от автоматически подсчитывает высоту, которую может занять.