Modernization of the MegaFon portal

Hello, my name is Yuri Mikhailov. At MegaFon, I hold the position of Director of the Online Competency Center. Today I would like to talk about how we redid the portal www.megafon.ru and created the MegaFon Personal Account mobile application.

Why did we do this? Some time ago, it became obvious that our users were no longer using the standard content on the site. They needed new features to manage services and services. In addition, the previous site design is outdated and was not very convenient for viewing on mobile devices. Meeting the wishes of users, we decided to conduct a deep modernization of the portal.

This large-scale work began in 2013. Dozens of large projects were launched, because a lot of research was required: to evaluate the strengths and weaknesses of our sites, to study in detail the best world experience. It was necessary to define goals and objectives, to design new interfaces. From the very beginning, we set ourselves the goal: to move from the approach “site is a subscriber’s guide” to the philosophy of an important service and sales channel.

Below is a story about what tasks we set for ourselves and what we have already done.

Changes noticeable to site visitors

• Adaptability . All online resources of a mobile operator should be ideally adapted for any mobile devices, tablets, etc. The share of the mobile audience of our site at the end of 2012 was 20%, and in less than a year and a half it doubled!
• usability. A simple interaction between the visitor and the service is required. This applies to navigation, search, page structure, the main interaction scenarios for solving typical problems, text quality. The convenience of the location of the buttons is important; The information that users see on the first screen without scrolling is important. It is important to take into account the specifics of interaction on different devices with different operating systems and screen resolution. This is a huge amount of work, in fact the creation of a new site - only gradually. Our internal criterion: the MegaFon website should be equally convenient to use for 8-year-old children and 70-year-old elderly people.
• Design update. As many have noticed, at the end of 2013 the MegaFon logo and style was updated and became more modern. Naturally, this had to be reflected on the sites. But we decided not to limit ourselves to changing the logo, but to conduct a really serious redesign of the site, solving, first of all, usability tasks.
• Effective self-care . The mobile operator’s website is not only a guide to tariffs and services, but also a “personal account” where an authorized subscriber can manage services, change the tariff, and optimize his expenses. It was necessary to create a new Personal Account and a convenient mobile application for MegaFon customers.

“Internal tasks” - invisible to visitors, but important for us

When planning site changes, we set ourselves other tasks that are important for the company, but invisible to our customers. This is primarily:

• Measurability . Of course, a set of Web analytics systems was installed before. But what can values ​​like “average viewing depth” or “time on site” give us? How to interpret them? The average time has increased by 20%: is it good or bad, have we become more interesting or is navigation just uncomfortable?

We want to manage the development of the site, based on real key performance indicators (KPIs), from actions that reflect the user's tasks. It is also important for evaluating and managing advertising campaigns. We began to measure with key performance indicators not only direct sales, but also the work of searching, self-service, navigation, etc.

Example :
On the page with the description of the service, the connection command via USSD is indicated. All is well, but how can we evaluate the real effect of an advertising campaign to promote a service? You can also use the number of transitions to the page, but it’s more efficient to make the “How to Connect” button a drop-down window that describes all the ways to connect the service: through your Personal Account, using the USSD command, and so on. Clicking on this button is easy to count and take into account.

• Manufacturability, time-to-market, cost of ownership. The most important parameter at the current level of Internet penetration, especially given the very intense competition in the cellular market. The speed of making changes to online resources should be very high. The task was: to move to the time-to-market from years and months to weeks, or even days. Here we are not talking about changing the text on the page, but about launching new products, new functionality.

In addition to time-to-market, the costs of support and development are important. We tried to redesign the sites so that the costs were less. Rather, the efficiency of using the same resources (tools and teams) would increase by an order of magnitude.

An example :
If the tariff is inserted into the site structure as a static page, then the work on changing it is the editing of 83 pages. Indeed, in each region of the Russian Federation, details of tariff conditions may vary slightly. If you use this content somewhere else on the site (for example, in an online store), then the number of pages for editing will increase at times, and the complexity of maintaining connectivity and relevance will increase exponentially. This is work for dozens of people, but it’s a monkey. If it is reasonable to design such functionality and move to a single database, then edits are made once and automatically appear anywhere on the site where this content is required. And there are hundreds of such mini-projects.

• Optimization of business processes for site support. By optimizing the processes on the sites, the number of employees to support them was reduced at times. And this is with the increased volume of products and active development. Thanks to this step, it was possible to significantly strengthen the development team, focus on new projects. Support and development of MegaFon sites, including coordinators in the regions, is carried out by 30 people.

Updated site www.megafon.ru

In 2013, we decided not to build a new site, but to do a “deep facelift” on the existing technology platform. Major changes are listed below.

“Tiled” design
Arose not because we are ardent fans of Metro style. Tiles are a very reasonable compromise between user convenience and manufacturability. We work in a very high-tech industry, for several years the business has changed significantly. Tiles are convenient self-contained quanta, from which it is easy to combine the user interface without redesigning the site.



Despite the fact that the structure of the main menu has changed little, the start page has been radically updated. This was the result of a detailed study of traffic statistics, the main tasks of our users, several rounds of prototyping and usability testing.

Blocking by user segment
The sites of mobile operators have historically developed as an online version of a subscriber’s directory. The most important criterion was "that the site had everything and without errors." This approach has led to the creation of an extremely complex and intricate hierarchical structure. But such a structure of the site did not match the real requests of visitors. In the new design, we focused on the most popular user actions. The main page is divided into two large blocks: for new customers and for existing ones. Further actions in the interface are also optimized for the most massive actions. And judging by the qualitative and quantitative research, the usability of the site has increased significantly.

Adaptive layout. Mobile first
The updated design and layout make it easier to work with the site on different devices. We design key interface details for four different resolutions:
- large monitor,
- small monitor (or horizontal tablet),
- vertical tablet,
- smartphone.









Such an approach to design involves somewhat higher costs compared to the traditional approach. But, firstly, the amount of these expenses is extremely insignificant in the total TCO (Total Cost of Ownership) of our sites, and secondly, the result is many times greater than the investment. For example, in April 2014 the proportion of visitors to www.megafon.rufrom tablets and smartphones exceeded 37%! We expect that in the first half of next year, the share of mobile users will exceed 50%. This is a major trend that cannot be ignored. And it applies to the entire Internet, and not just the sites of mobile operators.

Another important principle is Mobile first. First, we make a convenient mobile version of the page, and then we draw “full” for a large screen, on which there is a lot of space for controls and content.



In the design, it is critical that the first screen gets all the basic information about the service and the action button.

Copywriting
When designing, one should not forget about such prose as texts. We pay close attention to this. All new texts get to the site only through a team of copywriters. They have a task to rework all sections in accordance with priorities. Key requirements for copywriting:

• Do not make me think. An ideal text - which does not exist at all;) No one likes to read sheets of text, solving their utilitarian tasks on the Internet.
• Targeting the widest audience. Description of services and services should be as simple and straightforward as possible.

Copywriters receive a draft text, for example, from a product manager. That is, from a person who is deeply immersed in the specifics, he has been working in the company for several years, for him the difference between the “package”, “service” and “option” is obvious and enormous. But the copywriter has the task of turning on the “inner blonde”: forget everything about cellular communications, and treat any difficulties in perception as incomprehensibility. And rewrite. Edits can be made many times, but the goal being solved - the text perfectly clear for the client - justifies the costs.

Online store

Despite the fact that the online store in its essence and functionality is significantly different from the “main” site, we are moving away from the concept of “individual resources”. The voluminous work carried out in 2013-2014 (which included usability studies, redesigning a number of interfaces, redesign, etc.) allowed us to take a significant step towards bringing the online store closer to the main site. A modern appearance, a simplified interface, embedding "selling" content in other sections of the MegaFon website make the online store more accessible.

Fundamentally new functions have also appeared, for example, online reservation of goods in any of the 2,000 stores throughout the country, or online registration of the transition to MegaFon for subscribers of other operators with the preservation of the number (MNP).

In the second part of the article I will talk about the changes in the Personal Account, as well as the MegaFon Personal Account mobile application.