Лучший сайт для потребителей (b2c) Личный кабинет МегаФона v2.0

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

Поставленная задача и её решение

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

--------------------------------------------------------------------------------

Что мы сделали в новом личном кабинете — концептуальные изменения и ключевые особенности

Перевели на новую дизайн-систему

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

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

Использовали новую архитектуру

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

Для этого мы перешли на единый бэкенд с мобильным приложением — это сократило время разработки новых продуктов в 2 раза и унифицировало работу с ними. Фронтовую часть вместо самописного фреймворка собрали на современном стеке: React + Typescript + Redux + Redux Saga. Это значительно ускорило фронтенд-разработку. Интерфейс теперь собирается из нашей библиотеки компонентов, что позволяет сохранить его единообразие во всех продуктах компании.

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

Переработали навигацию и структуру

У нас была цель сделать навигацию проще и понятнее для пользователя.

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

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

Переосмыслили главный экран

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

И вот что мы сделали. Для уведомлений выделили область над основными блоками — так важная информация всегда будет на виду. Ниже разместили баланс крупным шрифтом, чтобы акцентировать внимание. Затем вывели название тарифа со ссылкой на его подробное описание. Следом поставили блок с доступными остатками по пакетам услуг. В завершении экрана показали расходы с разделением на категории и список последних операций со счётом телефона.

Пересобрали раздел услуг

Чтобы пользователю было проще и удобнее искать услуги и управлять ими, мы
пересмотрели навигацию в разделе.

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

Сделали удобный экран настроек

Для максимально удобного управления номером мы собрали все настройки в одном месте.

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

--------------------------------------------------------------------------------

Достигнутые KPI по итогам запуска

— Мы бесшовно запустили новый личный кабинет, полностью переработанный визуально и технологически.
— Функциональность личного кабинета теперь не уступает мобильному приложению.
— В результате опроса 73% пользователей поставили высокие оценки новому личному кабинету.
— Скорость авторизации и загрузки страниц увеличилась в 4 раза.
— Пользователи стали в 2 раза чаще пополнять счёт в личном кабинете.
— Пользователи подключают в 2 раза больше услуг в новом кабинете по сравнению со старым.

Выставлено в номинациях:
   — Сайт телекоммуникационной компании
   — Лучший сайт для потребителей (b2c)
   — Лучший дизайн компании, сервиса