Сайт «МегаФона» для частных клиентов

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

● Единая шапка обеспечивает другим сервисам МегаФона до 6% к MAU.
● Редизайн раздела услуг дал в 2 раза больше событий по взаимодействию с витриной, чем было в предыдущие периоды.
● Перезапуск линейки тарифов и рекламная кампания показали рекордные цифры по посещаемости, в течение месяца обеспечив рост MAU на 19%.
● На 25% увеличилась скорость загрузки основных разделов сайта после перевода на React.
● Перевод сайта на React обеспечил более безопасное обновление страниц и ускорил разработку в 3-4 раза. Некоторые идеи вообще не было возможности реализовать в старой кодовой базе, а теперь они выполняются стандартными средствами.

Achievements and KPIs:
● A single header provides other MegaFon services up to 6% MAU.
● The redesign of the services section gave 2 times more events in terms of interaction with the storefront than in previous periods.
● The relaunch of the tariff line and the advertising campaign showed record numbers in terms of attendance, providing MAU growth by 19% within a month.
● The loading speed of the main sections of the site increased by 25% after the transfer to React.
● The transformation of the site to React ensured a safer page refresh and accelerated development by 3-4 times. Some ideas were never possible to implement in the old codebase, but now they are implemented by standard means

-----

Видео о сайте — https://www.youtube.com/watch?v=zTs-WeL6QvQ

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

Задачи:
● Обновить визуальную составляющую сайта — сделать интерфейс привлекательным, понятным и современным.
● Собрать все сервисы на единой технологической и дизайн-платформе.
● Создать системный подход для решения дизайн-задач.
● Оптимизировать разработку и релиз-менеджмент.
● Максимально улучшить пользовательский опыт.
● Повысить MAU сайта и конверсию в подключение дополнительных сервисов.

Objectives:
● Renew the visual component of the site - make the interface attractive, clear and modern.
● Collect all services on a single technological and design platform.
● Create a systematic approach to solving design problems.
● Optimize site development and release management.
● Improve user experience greatly
● Increase website MAU and conversion to additional services.


Аналитика, исследования и тесты:
● Провели 14 юзабилити-тестов всех основных страниц.
● Проанализировали поведение пользователей на страницах сайта.
● Провели глубинные интервью с пользователями и проверили их результаты на UX-тестах.
● Провели исследование удобства навигации и тех решений, которые плохо показали себя после запуска. На основе А/В-тестирования выявили оптимальные решения и внедрили их.
● Изучили передовой опыт лидеров внутреннего рынка и десятки телеком-сайтов по всему миру.
● Проанализировали пересечение аудитории основного сайта, личного кабинета, интернет-магазина и других сервисов.

Analytics, researches and tests:
● Conducted 14 usability tests on all main pages.
● Аnalyzed user behavior on the site pages.
● Conducted in-depth interviews with users and checked the results on UX tests.
● Conducted a study on the ease of navigation and those solutions that performed poorly after launch. Based on A / B testing, optimal solutions were identified and implemented.
● We studied the best practices of the leaders of the domestic market and dozens of telecom sites around the world.
● We analyzed the intersection of the audience of the main site, personal account, online store and other services.


Концептуальные изменения и ключевые особенности нового сайта:

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

2. Переработали страницы сайта и создали качественно новые:
● Главная страница теперь представляет собой яркую витрину вместо обычной разводящей страницы с низким временем взаимодействия. На ней отражены популярные разделы и добавлены новые сущности: витрины флагманской линейки тарифов и интернет-магазина, блок для перехода от другого оператора с сохранением номера и витрина сервисов.
● На витрине основных тарифов появились визуальные шкалы, которые подчёркивают различия в наполнении тарифов минутами и звонками. Этот элемент отлично показал себя на UX-исследованиях и после запуска был использован в печатных материалах о новой линейке для распространения в салонах МегаФона.
● Перейти в МегаФон с сохранением своего номера стало проще и удобнее. На странице необходимо ввести минимум данных в простые формы, чтобы сменить оператора не выходя из дома.
● Каталог услуг прошёл ряд исследований, по их результатам списки были перегруппированы. На карточках услуг мы убрали фото, поскольку они воспринимались как рекламные баннеры. У самых востребованных услуг появилась анимация при наведении, которая не отвлекает от просмотра каталога.
● Страница роуминга была адаптирована под меняющиеся условия: поскольку цены в разных странах отличаются, стоимость услуг видна после ввода конкретной страны.
● Страница пополнения баланса содержит интуитивно понятные карточки, на которых можно оплатить счёт как с сохраненных карт, так и Apple Pay или Google Pay. Также на ней можно воспользоваться обещанным платежом и пополнить баланс позже.

3. Создали дизайн-систему МегаФона:
● Создали базу основных элементов, используя которые можно создать интерфейс любой сложности.
● Наша компонентная база построена по классическому атомарному принципу, но мы разделили её на 2 библиотеки: базовую и продуктовую. В базовой представлены стилеобразующие и кросс-продуктовые элементы, а в продуктовой — элементы сервисов, собранные на основе компонентов базовой библиотеки. Это позволяет сохранять консистентность всех сервисов и при этом модифицировать их под свои уникальные особенности, сохранив общую стилистику. Кроме того, в отличие от общей библиотеки, такой подход позволяет командам делиться элементами между проектами.
● Компоненты в визуальном редакторе и React-библиотеке унифицированы даже на уровне настроек. Это позволяет дизайнерам работать с элементами, не погружаясь в документацию React-компонентов, что значительно снижает количество ошибок и ускоряет разработку интерфейсов.
● Иерархия компонентов, из которых собирается каждая страница, прописана в админке сайта. Это позволяет без привлечения разработчиков и знания кода менять тексты, картинки и расположения элементов на странице. На основе этого мы создали полноценный конструктор страниц и email-рассылок. Благодаря ему менеджер может оперативно вносить изменения и создавать новые страницы без привлечения дизайнеров и разработчиков.

4. Оптимизировали разработку и релиз-менеджмент:
● Создали монорепозиторий с двумя npm-пакетами и перешли к упрощённому выпуску бета-версии. Релиз проходит в автоматическом режиме, с минимальными ручными действиями. Это позволяет проводить его быстрее и даже с телефона.
● Типизировали компоненты и перешли на автоматическую проверку качества кода. Это ускоряет процесс и минимизирует ошибки при большом количестве разработчиков, задач и постоянном масштабировании.
● Запустили отработку интерактивных сценариев и анимаций только тогда, когда их видит пользователь. Это снижает нагрузку на внутренние ресурсы устройства пользователя.


Conceptual changes and key features of the new website:

1. Developed a single navigation panel that links MegaFon's services. The upper part allows you to switch between services, and the lower one shows the navigation of the selected service, adjusting to its features: the presence of regionality, basket and comparison, phone number for communication or search. Such navigation can be used on project with any codebase, its main advantage is the ease of connecting a component and visual consistency between sites.

2. We redesigned the website pages and created qualitatively new ones:
● The homepage is now a vibrant showcase instead of the usual low engagement distribution page. It reflects popular sections and added new entities: showcases of the flagship line of tariffs and an online store, a block for switching from another operator with the same number and a showcase of services.
● Visual scales appeared on the showcase of the main tariffs, which emphasize the differences in the filling of tariffs with minutes and calls. This element proved to be excellent in UX research and after the launch was used in printed materials about the new line for distribution in MegaFon stores.
● It has become easier and more comfortable to switch to MegaFon while keeping your number. On the page, you need to enter a minimum of data in simple forms in order to change the operator without leaving your home.
● The service catalog went through a number of studies, according to their results, the lists were regrouped. We removed photos on the service cards, as they were perceived as advertising banners. The most popular services now have hover animation that does not distract from browsing the catalog
● The roaming page has been adapted to changing conditions: since prices differ in different countries, the cost of services is visible after choosing a specific country.
● The balance top-up page contains intuitive cards that can be used to pay from both saved cards and Apple Pay or Google Pay. You can also use the promised payment on it and top up the balance later.

3. Created the MegaFon’s design system:
● Created a base of essential elements, using which you can create an interface of any complexity.
● Our component base is built according to the classical atomic principle, but we've divided it into 2 libraries: the base one and the product one. The basic one contains style-forming and cross-product elements, and the product one contains service elements assembled on the basis of the core library components. This way allows you to maintain the consistency of all services and at the same time to modify them to suit your unique characteristics, while maintaining the overall style. Also, unlike a shared library, this approach allows product teams to share items across projects.
● The components in the visual editor and the React library are unified even at the level of settings. This allows designers to work with elements without diving into the documentation of React components, which significantly reduces errors and speeds up interface development.
● The hierarchy of components from which each page is assembled is spelled out in the site admin panel. This allows you to change texts, pictures and the arrangement of elements on the page without involving developers and knowledge of the code. Based on this, we have created a full-fledged page and email builder. Thanks to this, the manager can quickly implement changes and create new pages without involving designers and developers.

4. We optimized development and release management:
● We've created a monorepository with two npm packages and switched to a simplified beta release. The release process is automatic, with minimal manual steps. This allows us to conduct it faster and even via smartphone
● We typified the components and switched to automatic code quality checking. This speeds up the process and minimizes errors with a large number of developers, tasks and constant scaling.
● We started processing out interactive scripts and animations only when the user sees them. This reduces the load on the internal resources of the user's device.

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

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

MegaFon website for b2c customers is a multifunctional platform that allows them to get all the information about company's products and services: buy new tariff, activate services, order a new SIM card, buy a smartphone or accessory, and in general solve any problem.

Скриншоты

Видео