Предыдущая версия Dc.ostankino.ru была удовлетворительной, но отставали usability, дизайн и технологичность. Сайт работал на бесплатной CMS Joomla. Она справлялась со своей функцией, но плохо масштабировалась, и была поставлена задача – перенести сайт на платформу 1С Битрикс, поскольку большая часть инфраструктуры ТТЦ «Останкино» организована на 1С.

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

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

• Администрация: руководитель группы, аккаунт-менеджер, главный редактор, технический директор.
• Интерфейс:дизайнер, иллюстратор, специалист по usability UI/UX, технический писатель.
• Разработка:архитектор, программист back-end, программист front-end, верстальщик, системный администратор, тестировщик.
• Редакция:копирайтер, редактор, корректор, переводчик.
• Маркетинг:веб-мастер, SEO-специалист.

Постановку и контроль задач между клиентом и командой организовали в Trello. В облаке на Яндекс Диске хранили рабочие файлы, в Google Docs создавали техническую документацию.

Состав команды проекта

Руководитель группы контролировал общий вектор развития и отвечал за ключевые чек-поинты проекта, связанные со сроками. Аккаунт-менеджер держал связь с клиентом 24/7. Контролировал постановку и выполнение рабочих задач. На основе технического задания, составленного техническим директором по требованиям клиента, специалист по usability разработал базовую сетку расположения и взаимодействия элементов. Дизайнер и иллюстратор оформили визуальный стиль проекта, технический писатель сформулировал инструкции для разработчиков по требованиям к динамическим элементам интерфейса. Системный архитектор описал структуру базы данных, программные модули и взаимодействия между ними для back-end- и front-end-разработчиков. Системный администратор подготовил сервер и перевел ресурс на https. Редакционная команда подготовила текстовое содержание сайта на русском и английском языках. SEO-специалист и веб-мастер оптимизировали текстовое содержание, подключили Google Tag Manager, Вебмастеры Яндекс и Google, Метрику, Аналитику, настроили цели, микроразметку и другие параметры, важные для корректной индексации сайта.

Мы не стали придерживаться концепции Mobile First, поскольку большую часть трафика ЦОД «Останкино» получает с десктопов, несмотря на общую тенденцию увеличения доли мобильных устройств. Это связано с особенностью услуг компании: клиенты принимают решение о подрядчике по хранению данных в офисе. Десктопная версия разрабатывалась параллельно адаптивной.

Такая гибкая сетка прекрасно подходит как для презентаций, так и для технического описания услуг.

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

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

Такая гибкая сетка прекрасно подходит как для презентаций, так и для технического описания услуг.

Первый экран

При попадании на страницу необходимо однозначно объяснить клиенту, что он нашел именно то, что искал. Обозначить название услуги шрифтом Display прямо в шапке. Важно присутствие заметной расшифровки названия, потому что не все могут быть знакомы с общепринятым названием Colocation.
Сразу кратко рассказать посетителю, почему нужно обратиться именно в ЦОД «Останкино». Объяснить, что это сочетание огромных серверных, энергетических мощностей и безопасности государственного стратегического объекта.

Состав услуги

Клиенты в первую очередь интересуются техническими подробностями состава услуг. Многие ЦОД предлагают похожие условия, и легко запутаться в разнице между качеством, условиями и стоимостью. Чтобы посетитель не зарывался в недра спецификаций и не устал от длинных описаний, мы сгруппировали самую важную информацию во вкладки Material Tabs. Описание стало емким, информативным и заняло мало места на экране. За счет интерактивности вкладок увеличились поведенческие факторы пользователей на странице.

Преимущества

Мы предположили, что если посетителя устроил состав услуги и он остался на странице, то у него появился интерес, значит, самое время наглядно продемонстрировать потенциальному клиенту, почему нужно обратиться именно в ЦОД ТТЦ.
Для этого объемный текст о преимуществах мы скомпоновали в виде 6 главных тезисов и графически объединили их вокруг ассоциативного изображения. Предложили ознакомиться подробнее с инфраструктурой, большое значение уделили фотографиям. Продемонстрировали государственные лицензии на услуги связи.

Лид-форма

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

Новый интерфейс и проработанная структура страницы позволили в разы увеличить конверсию и показатели поведенческих факторов.

После переработки сайта в 14 раз увеличился органический трафик. Внедрили сквозную аналитику и точечный мониторинг нагрузки сервера.

Учитываются составные данные всех входящих заявок: обратная связь, звонок, email из рекламных и органических источников трафика.

Поскольку много инфраструктурных единиц ТТЦ «Останкино» уже используют 1С Битрикс, то выбор CMS был очевиден. Это ускорило интеграцию нового сайта во все корпоративные системы. По опыту, 1С Битрикс – не самая плохая CMS на рынке. Она тяжеловесная, но очень распространенная - позволяет легко найти специалистов и обладает огромным количеством поддерживаемых модулей.

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

Использовался стек LAMP, слайдеры JS, система контроля версий Github. Чтобы сократить время разработки и оставить гибкие возможности модернизации верстки, мы провели интервью с клиентом и поняли, какие именно блоки нуждаются в редактировании неспециалистами и сделали для них отдельные модули в админке, например Блог. Статьи публикуют редакторы, которые не могут править html и создавать CSS-стили, поэтому мы подключили и настроили модуль Битрикса.

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

Созданию текстового содержания ресурса уделено особое внимание, потому что продающие тексты напрямую влияют на конверсию сайта. Важно в емком формате изложить преимущества инфраструктуры и услуг ЦОД.

Разработана редакционная политика, включающая в себя стандарты описания и оформления материалов. Большое значение уделено оптимизации под поисковые запросы, чтобы увеличить долю поискового трафика и составить конкуренцию не только по высокочастотным запросам, но и собрать long tail. Для этих целей организовали корпоративный блог, в котором организация транслирует экспертные знания и подход к формированию культуры предоставления услуг ЦОД, в которых огромное значение имеет соответствие стандартам SLA.

У компании есть международные клиенты, поэтому с самого начала принято решение создать «зеркало» ресурса на английском языке. Для этих целей подключены переводчики. Основной трудностью в адаптации английской версии стало наличие специальной терминологии, поэтому были подобраны специалисты, обладающие навыками перевода технических текстов.

После запуска новой версии сайта ЦОД ТТЦ «Останкино» вырос трафик, поведенческие факторы и увеличилась конверсия в заявки на услуги:

• В 4 раза выросла глубина просмотра на сайте. Количество страниц на уникального пользователя за одну браузерную сессию.
• В 14 раз увеличилось время пребывания пользователя. Длительность уникальной браузерной сессии на одного посетителя сайта бренда.
• В 6 раз увеличился трафик. Прирост органического трафика из поисковых систем по запросам согласно семантическому ядру.
• В 9 раз выросла конверсия в заявки. Динамика достижения цели «Отправить заявку»/«Позвонить» из органических источников трафика.

Благодаря детальной проработке технического задания запустили сайт на 3 недели раньше оговоренного срока.