Личный кабинет «МегаФона» v2.0 (веб-версия)

Главное о кейсе

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

ENG ———————————————————————

● We seamlessly launched a new personal account that was completely redesigned visually and technologically.
● Functionality of the personal account is now as good as the mobile application.
● As a result of survey, 73% of users rated high the new personal account.
● Speed of authorization and pages downloading increased 4-fold.
● Users started to top up their accounts in their personal account twice as more frequently.
● Users now activate twice as many services in new personal account compared to the old one.

Бизнес-задача и ее решение

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

———

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ENG ———————————————————————

● Make the personal account to be as convenient and functional as our application. At the same time, unlock capabilities of a desktop, preserving identity of user journeys.
● Switch to new design system.
● Transfer the personal account to new technological stack and uniform back-end solution with the app.

———

What we have done in new personal account - conceptual changes and key features

1. Migrated to new design system

We set ourselves the task of unifying the personal account interface with other products of our company and making it easier to maintain the ecosystem in its current form.

To deliver it, we used our design system both at the level of layouts and development. It has already significantly accelerated the process of design - now it is not necessary to spend time on development of individual styles for the personal account. And in the future, it will allow to maintain visual consistency in development of the personal account by different teams. In addition, we explored and embedded the possibility of implementing dark theme.

2. Used new architecture

We did not just redesign, but fully developed a new personal account from scratch to take advantage of new technological platform capabilities.

To do that, we switched to single backend with the mobile application - it reduced by half the development time for new products and unified the work with them. Instead of hand-crafting framework, we assembled the front-end on a modern stack: React + Typescript + Redux + Redux Saga. That significantly accelerated the front-end development. Interface is now assembled from our components library, which allows us to maintain its consistency in all products of our company.

As a result, the users have received high speed of pages downloading, and we are able to implement new functions and correct errors faster.

3. Revised navigation and structure

Our goal was to make navigation easier and more understandable for the user.

To begin with, we moved navigation between sections to the header, now it is always in sight. At the same time, categories of sections and their content were unified as much as possible with the application to support consistency of user experience in the mobile app and personal account.

Modular architecture of interface was implemented inside sections - that allows to show more information to the user with fewer clicks. And we may add new features with more flexibility. The result is a completely re-thought and user-friendly personal account structure.

4. Rethinking the main screen

We faced the task of showing the user all the important information about his/her number: information notifications, balance, tariff, remaining packages, expenses. And it should be displayed on the main screen so that the user does not search for it throughout the account.

Here is what we have done. For notifications, we have highlighted the field above the main blocks – so that the important information will always be in sight. Below we placed the balance in large font to focus attention. Then the tariff name was displayed with a link to its detailed description. Next is the block with available remaining service packages. At the bottom of the screen, we show expenses with breakdown per categories and a list of recent transactions in the phone account.

5. Re-assembled services section

To make it easier and more convenient for the user to search for and manage services, we have revised navigation in the section.

Firstly, we divided the services into activated and available for activation. Secondly, the activated services were divided into 2 categories – with and without recurring charge. Thus, it will be easier for the user to estimate and optimize his/her expenses. Thirdly, we added bright wraps for digital subscriptions and services. That draws additional attention to them and highlights them against the background of communication services. Finally, the detailed description of the service and the process of its activation were brought forward from separate pages to modal windows. So, the user will remain in the directory and will not have to switch between screens to view several services.

6. Made convenient setup screen

For maximum convenience of managing the phone number, we have concentrated all the settings in one place.

We conducted card sorting - a study that showed us the most understandable way to categorize settings for users. As a result, we completely revised the structure of the section. And also, we added new capabilities to it – they were not present in the old personal account, but they were available in the app.

Прочая информация о кейсе

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

ENG ———————————————————————

MegaFon's personal account is the most convenient tool for managing communication services on a PC. One can check and top up the balance, view the remaining package and expenses, change the tariff and activate services. And also, to receive personal offers from MegaFon and selected partners, win valuable prizes.

Скриншоты