Разработка личного кабинета для телекоммуникационной компании ГлобалНет от Nimax

Иерархия объектов

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

Структура и сценарии

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

В результате первоначальное видение структуры было уточнено:

Был добавлен раздел с историей изменений в сервисах.

Документы и финансы были разделены на отдельные страницы.

Удобное хранение информации

Личный кабинет является местом хранения информации о всех подключенных услугах клиентов. Это может показаться простым, но в реальности существует большое количество разнообразных сервисов. Каждый сервис содержит различные типы данных: статические и изменяющиеся со временем. Некоторые данные доступны для редактирования, а другие – нет. Наиболее логичным способом представления и управления таким объемом информации является таблица.

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

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

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

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

Управление трафиком

Объем трафика по тарифу отображается во всплывающем окне. График с данными дополнен гибкими настройками периода отображения и панелью с ключевыми показателями. Интерфейс позволяет отслеживать входящий и исходящий трафик, отображает основные показатели за выбранный период времени и помогает выявлять колебания: пики и спады.

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

Управление стоимостью

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

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

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

Оптимизация коммуникации с менеджером

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

Адаптация под все мобильные устройства

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

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

Фронтенд-разработка

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

Что в итоге?

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