Група 1+1 медіа
Вебдизайн

Редизайн сайта ТСН

Основная задача — редизайн новостного портала ТСН.

Клиент

ТСН — часть группы компаний 1+1. Это не только новостная телепрограмма (в эфире с 1997 года), но и несколько отдельных компаний — ТСН.Проспорт, ТСН.Леди, ТСН.Авто.

Целевая аудитория

Потребители новостного контента разных типов.

Сложности

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

Процесс

Работы по редизайну tsn.ua проходили год и всё ещё продолжаются.

Старт

Первые две недели работы мы посвятили:

  • разбору статистики по старому сайту;
  • исследованию целей каждой компании группы (ТСН.Проспорт, ТСН.Леди, ТСН.Авто);
  • опросу клиентов.

Анализ целевой аудитории

От компании мы получили восемь портретов типичных пользователей.

Для каждого персонажа мы создали карточку с такими параметрами:

  • кредо;
  • основные цели;
  • точки входа на сайт;
  • характер поведения на сайте;
  • рекомендации для комфортного пребывания на сайте.

Ментальная карта

При разработке ресурса для представления данных и их взаимосвязей мы использовали метод составления ментальной карты (mind mapping).

В итоге мы создали документ, который показывает иерархию контента. В нём мы описали и принципы внедрения элементов в соседние разделы.

Создание мудборда (mood board)

Созданный дизайн должен был удовлетворить одновременно нескольких руковидетелей ТСН. Чтобы найти правильную визуальную стилистику для проекта, мы разработали мудборд с их участием.

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

Полученные изображения мы сгруппировали и дополнили собственными референсами. Каждому заказчику снова предложили выбрать по три варианта.

При этом на видео мы фиксировали скорость выбора. С помощью него мы определили подходящую визуальную стилистику.

Разработка прототипов

Мы построили маршруты пользователей на сайте и страницах для основных 8 разрешений экранов.

Прототипы тестировали на персонах трёх типов:

  1. Реальные люди, которым предлагалось решить простую задачу (войти в личный кабинет, оставить комментарий в названном разделе и т.д.) на интерактивном прототипе перед веб-камерой. Основная метрика для оценки прототипов — скорость.
  2. Четыре персонажа, смоделированные по запросам руководства.
  3. Руководители ТСН.
  4. Дополнительно в утверждении прототипов страниц о футболе и авто участвовали приглашенные дикторы и эксперты в этих областях.

Рекламные блоки

Нам также нужно было по максимуму предотвратить возможные потери рекламного отдела из-за перехода на responsive design. Мы заложили в интерфейс несколько вариантов размещения рекламы:

  • Сквозной рекламный блок 300*250 на всех сайтах группы.
  • Решение с внутренним названием «Пандора» — rich-медийный рекламный блок, который позволяет разместить в любом месте рекламную плоскость любой высоты.
  • Другие рекламные площадки.

Разработка интерфейса и документации

Мы создали глоссарий и UI guide под каждое из разрешений на движке Wiki.

Для сайта были разработаны все возможные типовые элементы — от шрифтов до иконок, цветовой палитры и компоновок.

Каждый элемент в UI guide и его состояние имеют порядковый номер и уникальное имя.

Всего мы создали более 300 элементов для 40 страниц в 6 вариантах для каждого из разрешений.

Результаты

Новая версия tsn.ua появилась 22 января 2016 года.

Главной опасности — оттока посетителей из-за редизайна — удалось избежать. Более того, по данным Similarweb, с декабря 2015 года по февраль 2016 наблюдался некоторый прирост — с 13,4 млн посетителей до 13,6 млн. По данным внутренней аналитики tsn.ua, за месяц после перезапуска:

  • показатель отказов уменьшился на 26,73%;
  • увеличилось количество просмотров страниц за сеанс (рост почти на 18%).
3075