Как мы модернизировали портал yota.ru



    Некоторое время назад мы полностью переделали портал www.yota.ru. Несмотря на некую преемственность по отношению к предыдущей версии, сайт был переделан практически полностью — и front-end, и back-end. Потребность в этой масштабной модернизации окончательно назрела, как только Yota начала предоставлять услуги в качестве мобильного оператора. Ниже мы хотим рассказать, зачем понадобилось переделывать сайт, какие задачи мы решали, с какими сложностями столкнулись и чего достигли на данный момент.

    Причины для модернизации сайта и последовавшие решения можно разделить на две группы: связанные с front-end (дизайн, карта сайта, структура страниц) и back-end. Рассмотрим каждую из них отдельно.

    Front-end: дизайн и структура


    До августа 2014 года Yota предоставляла услуги в сфере беспроводного 4G-интернета, и функционал и возможности портала удовлетворяли запросам наших пользователей. Но с переходом Yota в статус мобильного оператора к сайту стали предъявляться новые требования.

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

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

    Второй важной причиной переделки front-end стало отсутствие резервов масштабируемости внутренней структуры. С появлением новых услуг и расширением географии присутствия мы столкнулись с тем, что без переделки самой структуры сайта расширять его наполнение становится крайне затруднительно. Да и выглядело это не слишком удачно.

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

    С точки зрения структуры сайта нужно было решить следующую задачу. Через главную страницу на портал попадают до 70% пользователей. И нам было важно сделать так, чтобы они либо могли прямо здесь найти нужную информацию, либо в один клик перейти к интересующему разделу. Например, один из главных вопросов перед покупкой беспроводного модема: «А есть ли у меня дома / в офисе покрытие сети?» Поэтому мы дали возможность узнать об этом по одному клику на главной странице.

    С главной страницей предыдущей версии портала был связан ещё один важный момент. Около 25% пользователей из тех, кто зашёл на главную, потом просто уходили с сайта. Мы долгое время не могли выявить причину такого поведения. Проведённое в ходе разработки UX-тестирование показало, что часть пользователей просто не хочет ходить по меню сайта. Необходимость разбираться, искать нужную ссылку, нажимать на неё воспринимались как излишняя сложность сайта. Стоило нам разместить на главной странице модуль заказа модемов и SIM-карт, как количество «отказников» резко снизилось.

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

    Back-end: платформа сайта


    Разработка нового портала повлекла за собой и смену платформы, на которой базировался сайт. Использовавшаяся на тот момент CMS Bitrix уже не удовлетворяла всем нашим требованиям, поскольку:

    • Система имела некластиризованную конфигурацию, то есть вся нагрузка по сайту ложилась на один PHP-сервер. Его ресурсы производительности были почти исчерпаны, отмечались случаи перегрузки и недоступности сайта. А переход на версию Bitrix, поддерживавшую кластеризацию, означал существенную переработку кода.
    • Все обновления контента производились сразу на рабочем сервере, и в случае появления каких-то ошибок это отражалось и на работоспособности сайта. То есть необходимо было снизить его аварийность, тем самым улучшив качество обслуживания наших пользователей.
    • В системе не использовались возможности CMS Bitrix по самостоятельному редактированию контента сотрудниками бизнес-подразделений компании. Все изменения необходимо было осуществлять с помощью ручной правки определённых файлов, и эта ответственность лежала на программистах, поддерживающих Bitrix, и сотрудниках департамента IT. Это означало дополнительные затраты ресурсов, отвлечение IT-специалистов от задач по поддержке и сопровождению инфраструктуры и т.д. К моменту передачи управления сайтом департаменту IT такой способ управления уже полностью исчерпал себя. Пришла пора избавить технических специалистов от обязанности наполнять и обновлять контент на сайте. Необходимо было спроектировать и внедрить такое решение, которое бы максимально использовало возможности CMS для сокращения затрат и сроков редактирования контента, обеспечивало высокие показатели готовности и производительности при минимальных затратах на сопровождение.

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

    Итак, оказавшись перед выбором — пытаться довести до ума Bitrix или внедрить новую CMS, — мы выбрали новую. Дело оставалось за малым: определиться с конкретной системой. Рассматривались различные предложения, начиная от проприетарных закрытых продуктов, с последующей полной зависимостью от поставщиков решений, до написания системы на Ruby с нуля, со всеми сопутствующими рисками, неизвестной работоспособностью, функционалом и неудовлетворительным сопровождением.

    В результате выбор был сделан в пользу системы Liferay. Эта платформа предлагает достаточно богатый и гибкий функционал, о чём будет сказано чуть позже. Одним из существенных преимуществ стала открытость системы: наша компания в большинстве случаев делает ставку на open source-технологии, поскольку это даёт возможность не только контролировать работу и функциональность продуктов, но и самостоятельно осуществлять гибкую настройку под свои нужды. Нельзя не отметить и такие плюсы Liferay, как однородность с другими нашими системами и технологиями (в основном у нас используется технология JEE) и простота обслуживания. В том числе и за счет того, что при развертывании Liferay мы смогли максимально задействовать существующую инфраструктуру — операционные системы, сервер приложений, база данных, — внедрение Liferay не выдвигало никаких специфических требований к окружению.

    Для новой конфигурации, способной к безболезненному масштабированию в будущем, была принята следующая схема: два сервера в режиме активного кластера (то есть активны оба устройства) обслуживают сам сайт и запросы к нему. На отдельный сервер возложена задача контент-менеджмента. То есть осуществляется активное резервирование серверов самого сайта, а сервер, с которым работают сотрудники разных подразделений Yota, интегрированный с нашей системой аутентификации, скрыт в нашей корпоративной подсети.
    Для повышения производительности мы воспользовались известным решением для высокопроизводительных приложений: реализовали модель CDN (content delivery network), установив ряд серверов Nginx, содержащих используемые на сайте графические файлы, текстовые, CSS-файлы и т.д. Тем самым мы полностью сняли нагрузку по отдаче статического контента с серверов сайта. Также это решение упрощает последующее масштабирование, поскольку количество Nginx-серверов можно увеличивать многократно по мере роста нагрузки.



    Сервер контент-менеджера выполняет своего рода роль буфера, инструмента премодерации. Например, если сотрудник какого-либо отдела хочет опубликовать на сайте новость или иную информацию, то данные отправляются на сервер контент-менеджера, где они должны быть одобрены руководителем этого сотрудника. Все эти рабочие процессы, workflow, могут быть гибко настроены с помощью встроенного редактора BPMN — Activiti. После утверждения контента он публикуется на сайте. Эта процедура может осуществляться как вручную администратором, так и автоматически, в том числе по расписанию. Например, ночью, когда посещаемость минимальна. Такая схема работы — staging, то есть разбивка на этапы, — позволила управлять изменениями контента и предотвращать аварии. Теперь можно протестировать все вносимые изменения без выгрузки на сайт.

    Ещё одним преимуществом Liferay с точки зрения редактирования контента является идеология WYSIWYG (what you see is what you get). То есть все изменения вносятся не в программный код, а с помощью удобного графического интерфейса. Сотрудник с правами администратора открывает в браузере на CMS-сервере копию сайта, мышью перемещает и добавляет нужные элементы, напрямую вносит изменения в текст, после чего подтверждает изменения и сразу может видеть, как будет выглядеть сайт для пользователей. Это позволяет избежать опечаток и ошибок в вёрстке в рабочей версии сайта.

    Отдельной задачей стояла организация сквозного процесса разработки и модификаций нашего сайта от дизайнеров до запуска изменений на сайте. Сайт Yota (как и сама компания) развивается очень динамично — мы постоянно занимаемся его улучшениями, — и тут было очень важно сделать процесс реализации новых идей максимально быстрым. Нам удалось так наладить работу нескольких команд, что путь от «идеи» до сайта начал занимать минимальное время. В основе этого лежит: постоянная сборка над ветками для разработки / тестирования / поставки (Git, Grunt, набор пре-процессоров), а также стандарт реализации вёрстки, в котором отражены например такие правила как: один общий для сайта минифицированный CSS и специализированные CSS, запрет смешения функциональных стилей; запрет iFrame, помещение хэштегов в контейнеры и др.

    Многие разработчики под Liferay сталкиваются с проблемой интеграции JavaScript в портлеты. Перед нами она также возникла, и мы нашли следующее решение, отразив в стандарте разработки: запрет глобальных переменных, использовать backbone.js для управления зависимостями между модулями, system.js, для подключения модулей; все параметры модуля JS задаются через конструктор (в т.ч. локализованные текстовые ресурсы, селекторы элементов DOM, параметры запросов к REST API бэк-энда), которые инициализирует портал при отрисовке портлета; также конструктор предусматривает параметры вызовов по умолчанию; взаимодействие JavaScript компонент через jQuery.

    На этом мы, пожалуй, вынырнем из технических глубин и попробуем подвести итог.

    Результаты


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

    С точки зрения сотрудников Yota, вносящих изменения на сайте, эта процедура радикально упростилась, появились:

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

    На текущий момент мы используем не более 20-30% возможностей Liferay как по функционалу, так и по производительности. Поэтому проведённую модернизацию back-end нельзя рассматривать как решение лишь сиюминутных потребностей. Это был стратегический шаг, который в будущем позволит быстрее и эффективнее решать новые задачи как для новых функций сайта, так и для расширения возможностей самообслуживания клиентов.

    Yota

    90,00

    Компания

    Поделиться публикацией
    Комментарии 34
      +2
      Отличный JPEG для привлечения внимания, или это вы так сам портал модернизировали с сжатием?)
        +4
        Вы бы, прежде чем порталы там модернизировать, пофиксили бы проблему с которой на Yota Many мне для каждого устройства приходится вручную прописывать Гугловый DNS, т.к. дефолтные настройки у вас не работают. Реально бесит! (Как собственно и то что ваш саппорт дает такие рекоммендации вместо того чтобы фиксить проблему.) Спасибо.
          0
          Добрый день! Действительно, у нас была данная сложность, она была связана с перезаполнением кэша DNS устройства. Она решена в последней прошивке YRRR1_1.37

          Если на данный момент проблема сохраняется, нужно будет обновить устройство вручную, для этого подключить напрямую в ПК через USB, зайти на страницу status.yota.ru/update и загрузить данный файл обновления: yadi.sk/d/ZUSw65qjfsoyw
            0
            Это помогло. Только странно что вы шарите прошивку на Yandex Disk вместо того чтобы держать ее на сайте или, еще лучше, делать автообновление как делают многие современные роутеры.
          +2
          Как же достали эти «модем от 400 рублей», где подразумевается что угодно, но не цена продажи устройства! Наболело. Надежные продавцы и поставщики услуг такими дешевыми приёмами введения в заблуждение не пользуются.
            –10
            Мы никого не пытались ввести в заблуждение, указана цена за пакеты на 30 дней. Стоимость модемов четко прописана на соответствующей странице.
              +5
              Автомобили
              от 1000 рублей!

              Нет, чётко же написано — указана цена за бензин!
                +1
                image
                На главной странице нигде не написано о том, 300 рублей — это минимальная цена тридцатидневного пакета. Абсолютно любой нормальный человек, увидев этот блок, подумает, что речь идет о стоимости модемов. Кстати, в такой ситуации непонятно, почему вы не написали «Модемы от 50 рублей», ведь именно столько стоят два часа доступа в интернет.
              +20
              Прежде чем порталы модернизировать, вы бы работать научились. Такого наплевателького отношения к своим клиентам, как в компании Скартел/Yota я еще не встречал.

              В конце июля прошлого года купил у вас на yota.ru т. н. «Интернет-центр Yota 4g» (он же Gemtek) вместе с контрактом. Оплатил подключение на год вперед. Недели две тому назад (15 мая 2015) ваше устройство перестало видеть сеть. Позвонил вам в тех-поддержку, там предложили отвезти его на гарантийный ремонт в один из сервис-центров.

              Тут уже начинается интересное. Чтобы подключить нового клиента, Yota предлагает доставку на дом и точки продаж по всему городу, в том числе в центре Москвы. А вот если у вас что-то сломается, то везти придется в один из 4-х «сервис-центров» на окраине. СЦ на самом деле из себя представлял такую же точку продаж: небольшой стенд посреди ТЦ и две страшно ленивые девушки, которые двух клиентов обслуживали в течение часа.

              Итого потрачен час на дорогу и еще 40 минут пришлось простоять в очереди. И что же мне предлагают? А предлагают сдать устроство в гарантийный ремонт до 45 дней и ничего взамен. Интересно, как компания планирует оказывать мне услуги все это время? Я должен у них новое устройство покупать на время ремонта? Спрашиваю, а у меня есть выбор? Отвечает: нет.

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

              Но, ладно, заполнил их бланк-претензию, отправил и дальше что? А ничего дальше. Ответил автоматический робот, что мол завели тикет, срок рассмотрения 2 недели. Замечательно. В понедельник только некая Анна Перункова написала:

              Похоже эти ответственные специалисты такие ответственные, что ни за что не отвечают. Далее ничего не последовало.

              Итого: Скартел/Yota молчит уже вторую неделю, симкарта и абонентское оборудование находится у них в гарантийном ремонте, деньги за услугу продолжают списывать. Каких-либо комментариев или попыток решить проблему не наблюдается, а скорее наоборот, не желают общаться и всячески огораживаются от своих клиентов.

              И поверьте, у меня есть дела поважнее, чем как возиться с вами и тратить на все это время. Я прекрасно понимаю, что всякое случается, оборудование отказывает, но то, что я наблюдаю сейчас, это просто нежелание работать.
                  +1
                  А за что вы VBart минусуете? Он все по делу сказал и я ему очень даже верю.
                  От себя хочу добавить, что обслуживание клиентов отвратительное.
                  Купился на мобильную связь. Подключили быстро, но сразу же появились проблемы:
                  1 )Проблема с LTE и вызовом на телефонах Nexus 5
                  Yota в свою очередь признала, что проблема есть и они ее вот очень скоро исправят. Тикет был создан в сентябре 2014 года, ответа до сих пор нет.

                  2 )Перестали приходить СМС сообщения от некоторых абонентов + сервисов где была включена двухфакторная аутентификация. Написал в ТП 22.03.2015 года и меня «приятно» удивила ТП своим ответом:
                  Заголовок спойлера



                  И опять молчание!
                    0
                    С Nexus 5 действительно могли раньше возникать проблемы, но они были решены обновлением на последнюю версию Android. Если сложности до сих пор возникают, то напишите нам, например, здесь: vk.com/yota_help. Мы также проверим Ваши тикеты (в том числе и по Вашей ситуации с смс), посмотрим, почему решение задержалось столь надолго, и ответим на все Ваши вопросы. Приносим свои извинения за долгое ожидание в решении Вашего вопроса.
                  0
                  есть подвижки в решении вашей проблемы?
                    0
                    Никаких. И две недели обещанного максимального срока рассмотрения претензии уже давно истекли.
                  +1
                  Интересный момент с регистрацией нового клиента на сайте. Допустим, у меня уже есть устройства yota, но я хочу завести новый аккаунт. Нажимаю кнопку «профиль» на сайте и вижу на выбор вход через фейсбук или вконтакт или по телефону с паролем. Внимание, вопрос — где регистрация? У меня нет вконтакта и фейсбука, получается, пролетаю мимо?
                    0
                    Я тоже пытался понять как зайти в личный кабинет имея на руках их симку, но так и не понял :((. Возможно это все потому что купил я ее на пол года раньше, но блин я надеялся что будет работать.
                      0
                      Да, все верно, создать новый аккаунт без нового устройства нельзя. Если Вам требуется новый аккаунт, Вы можете прийти в нашу точку продаж (http://www.yota.ru/map-sales/) с паспортом и модемом, заключить новый договор и зарегистрировать новый личный кабинет. Посредством «ВКонтакте» и Facebook также создать новый личный кабинет не получится. Если Вы просто забыли пароли, то можем помочь восстановить доступ, например, при обращении сюда: vk.com/yota_help
                      +2
                      У йоты классный мобильный сайт. Когда поворачиваешь телефон горизонтально он перестает отображаться и просит повернуть телефон. Адаптивненько.
                        –1
                        У йоты такой классный мобильный сайт, что на четырехядернике с 2,5Ггц он тормозит.

                        Извиняюсь, не читал пост, просто не удержался.
                          +3
                          Особенно круто это выглядит на авто-магнитоле. Видимо машину надо перевернуть.
                            –2
                            Действительно, у нашего сайта случаются иногда мигрени, и мы уверяем Вас, что это сезонное, и надеемся, что эту задачу также удастся решить в короткие сроки. Мы не скрываем, работы действительно много. Но мы делаем все зависящее от нас и постараемся поскрее во всем разобраться :)
                            +2
                            1) После первого захода страница в вечной загрузке — просто белый экран. жмем f5 и моментально грузиться страница. Что-то не то
                            2) Могли бы страны расставить по алфавиту www.yota.ru/voice/#/overlay/international
                            3) Ползунок драгается не за мышью www.yota.ru/voice/#/tariff/mobile/100m (а здесь норм www.yota.ru/tablet/#/benefits)
                            4) Наверное страница должна красиво выезжать сверху, но я вижу только как она дергается в самом начале (это легко заметить, если переходить из раздела в раздел)
                            5) выделение подпунта меню постоянно висит, даже если я перешел в другой основной пункт меню. и если просто находиться на странице, то эта полоска просто висит
                            6) в ie11 ни одна страница не грузиться с первого раза. всегда надо жать ф5

                            тестировщика и менеджера на пику
                              0
                              Благодарим за внимательность, мы передадим данные замечания нашим специалистам. Надеемся, что данные неудобства быстро решатся и никого на пику насаживать не придется, но в будущем обязательном возьмем такие методы на вооружение, спасибо за идею :)
                              0
                              Так вот почему ссылка на загрузку вашей программы, которую дают после окончания регистрации — www.yota.ru/ru/devices/download — выдаёт 404. Теперь понятно, спасибо!
                                +1
                                Убрали телефон поддержки с сайта. огромный минус вам…
                                  0
                                  Владивосток, три(!) месяца промучился с входящими звонками, которые не входили. Теперь даже не интересно как дела у конторы, хотя ценник на интернет были интересны и раз десять спасали, правда раз в 30 минут тыкать кнопку подтверждения надоедало, но деваться не куда было.
                                    0
                                    Мы будем благодарны, если сообщите номер заявки — проверим, почему так долго разбирались с данной проблемой. На данный момент сложностей со входящими во Владивостоке не наблюдается.
                                    0
                                    Ха-ха! Пошел на сайт ознакомиться с новым дизайном. Браузер с минуту крутил бегунок и писал «waiting for static.yota.ru». В итоге не дождался, закрыл.
                                      +2
                                      Текст поста больше чем размер исходников вашего убогого портала. Серьезно. У вас до сих пор нет личного кабинета, автогенерации отчетов о разговорах. Всё приходится делать чер вашу укуренную поддержку, которая никогда не управлялась быстрее чем за 40 минут с простой задачей по приёму заявки на получение выписки. А потом присылает выписку другого абонента.
                                        –2
                                        Пришлите в личку, пожалуйста, номер телефона и e-mail, куда Вы получили детализацию, а также дату Вашего обращения.
                                          +2
                                          Этот вопрос уже разобран. Ваш официальный ответ заключается в том, что это произошло из-за того, что я попросил прислать мне операцию в виде электронной таблицы, а не PDF, как вы делаете по дефолту.

                                          Конечно, если клиенту нужна детализация, то нужно ему её дать так, чтобы он низачто не смог её отсортировать. PDF тебе, Карл!

                                          Ну и я молчу уже о том, что пересылать такую информацию в открытом виде по электронной почте нельзя. И единственный способ решить проблемы человеческого фактора и защищенный пересылки, это сделать нормальный личный кабинет. Уж скоро год, как вы вышли на рынок. Стыдно должно быть.

                                          Так что продолжайте пилить свои чатики в мобильном приложении.
                                        0
                                        Firefox Nightly

                                        Заголовок спойлера

                                          0
                                          А жаль на самом деле что за жалобами на саппорт прошли незамеченными технические подробности данного проекта. Мы внедряем Liferay уже несколько лет — и могу сказать что этот проект был уникальным в плане реализации на Liferay — причем не только для России но и для Европы.
                                            +2
                                            Да потому что всем всё равно на чём вы там внедряете, если это не приводит к улучшению качества оказываемых услуг, к которому на сегодняшний день большие претензии. Применению той или иной технологии должно соответствовать целеполагание, а иначе это превращается в маструбацию.

                                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                          Самое читаемое