Клиент
Southampton FC — футбольный клуб из графства Гемпшир, основанный в 1885 году. Играет в высшем дивизионе в системе футбольных лиг Англии — в Премьер-лиге. «Саутгемптон» был основан членами Молодёжной ассоциации церкви Святой Девы Марии, поэтому членов клуба традиционно называют «святыми» (англ. The Saints).
Задача
Первая встреча с руководством ФК произошла осенью 2015 года. «Святые» хотели запустить новый сайт к началу сезона 2016.
Футбольные клубы Английской Премьер-лиги в тот момент «сидели» на шаблонных сайтах — максимально простых и скучных. На них были краткие исторические справки о ФК и расписание игр. Отличались друг от друга эти сайты разве что цветовым оформлением.
«Саутгемптон» решил изменить правила игры. Им нужен был современный и динамичный сайт, вовлекающий фанатов в жизнь любимого футбольного клуба и дающий новые возможности для коммерческой деятельности: продажа мерча, билетов на матчи, членства в клубе и спецобслуживания во время игр.
UNRVLD (бывшие Delete Agency) провели необходимые исследования, разработали концепцию, прототипы и дизайны для нового сайта. Вся техническая часть проекта реализована силами fuse8.
Дизайн
У футбольного клуба «Саутгемптон» есть логотип и фирменные цвета — алый и белый. Они легли в основу стайлгайда нового сайта.
![](/media/2257/стайлгайд.jpg?anchor=center&mode=crop&quality=90&upscale=false&rnd=132245940090000000&width={width})
Алый — как полосы фанатского шарфа и поле на щите. Золотой — как нимб над футбольным мячом и шрифт названия клуба. Черный — как цвет геральдической ленты. Дополнительные цвета — традиционный белый и несколько оттенков серого.
Определившись с основными цветами и шрифтами, дизайнеры Delete создали несколько макетов главной страницы сайта. Расстановка и назначение блоков на них менялась в зависимости от того, в какой момент времени фанат зашел на Southamptonfc.com — перед матчем, во время или после.
![](/media/2262/протитопы1.jpg?anchor=center&mode=crop&quality=90&upscale=false&rnd=132245973880000000&width={width})
После утверждения дизайна главной страницы, мы приступили к созданию макетов всех остальных разделов.
![](/media/2251/финальный-дизайн.png?anchor=center&mode=crop&quality=90&upscale=false&rnd=132245760930000000&width={width})
Разработка
Мы выбрали Sitecore CMS, потому что она идеально подходит для воплощения в жизнь всех амбиций «святых». Sitecore CMS позволила создать новый сайт Southampton FC, организовать его работу и связать со сторонними сервисами и сайтами. Еще одна причина, по которой выбор пал именно на Sitecore — возможность системы предоставлять пользователю персонифицированный контент на основе его предпочтений.
Интеграция
Новый сайт «Саутгемптона» стал центральной вещательной площадкой футбольного клуба. Здесь фанаты получают всю информацию о жизни «святых» — семь дней в неделю, 24 часа в сутки. Это разноплановый и качественный контент. Причем он меняется по форме и содержанию в зависимости от периода публикации: до матча, во время или после. Главный принцип такой: если на новом сайте Southampton FC есть всё, зачем фанату идти куда-то ещё?
Чтобы это стало возможными, мы интегрировали Sitecore с несколькими сторонними сервисами и площадками:
- SQL Data Warehouse;
- платформа для управления внешними медиа-файлами Third Light;
- видео-провайдер Ooyala;
- Opta — спортивная статистика;
- BBC Radio Solent — аудио-трансляции;
- официальные страницы ФК в социальных сетях.
![](/media/2259/стек-технологий.jpg?anchor=center&mode=crop&quality=90&upscale=false&rnd=132245954590000000&width={width})
Сложности
С первой сложностью мы столкнулись перед запуском сайта — это ограничение публикации видео Премьер-лиги в разных странах мира из-за разницы во времени.
Мы получили огромный список требований — где и когда можно показывать игру по странам. Суть в том, что на сайте «Саутгемптона» информация о матче должна появляться не раньше, чем ее покажут по местному телевидению. Все эти условия прописывались отдельно для разных стран.
Еще одна проблема возникла с аудио-стримами — они не работали на устройствах с iOS. Мы связались с людьми, которые писали эти стримы и договорились, чтобы они передавали нам информацию в том формате, который мы можем перекодировать и встроить для iOS другим способом.
Во время текстовой трансляции первого матча Southampton FC на новый сайт пришло столько посетителей, что серверы не выдержали нагрузки. Общее количество фанатов в пять раз превысило наши самые смелые ожидания. В итоге часть пользователей просто не увидели сайт — страница загружалась бесконечно долго. Мы начали выяснять, в чем же проблема.
На тот момент сайт располагался на шести виртуальных машинах в приватном облаке. Когда одна из них оказывалась под большой нагрузкой, балансировщик не прекращал направлять на неё новые запросы. В итоге пользователи, волей судеб распределенные именно на этот сервер, оставались ни с чем.
Проблема была решена быстро и просто: мы добавили еще две виртуальные машины и перенастроили балансировщик нагрузки. Теперь, когда он видел, что на одном из серверов время отклика превышает лимит, он отправлял новые запросы на свободные машины.
Результат
Сайт «святых» был запущен в начале сезона 2016, как и хотело руководство клуба. Перед тем, как отдать проект в разработку, наши коллеги из Англии провели исследование и выяснили, чего ждут люди от сайта футбольного клуба. Поэтому фанаты получили именно то, что им было нужно.
![](/media/2261/final.jpg?anchor=center&mode=crop&quality=90&upscale=false&rnd=132245969780000000&width={width})
Возможности нового сайта Southampton FC
Southamptonfc.com стал информационным хабом для всех фанатов «святых». На сайте регулярно обновляется раздел с новостями клуба, анонсируются ближайшие матчи и выводится актуальная турнирная таблица Английской Премьер-лиги.
Уникальный раздел сайта — MatchDay Live. Здесь ведется текстовая онлайн-трансляция матчей. Благодаря интеграции с BBC Radio Solent, в ленте появляются аудио-комментарии. Сюда же из OptaSports подтягивается статистика матча и игроков, посты из соцсетей и фотографии с поля — из Third Light.
![](/media/2263/варатм.jpg?anchor=center&mode=crop&quality=90&upscale=false&rnd=132245976240000000&width={width})
Зарегистрированные на сайте пользователи получают доступ к дополнительным материалам — эксклюзивным видеороликам, аудио-стримам, интервью с игроками и пресс-конференциям. Одновременно с этим создается база фанатов, с помощью которой для каждого из них генерируются специальные предложения, скидки и акции.
![](/media/2264/раоьлрн.jpg?anchor=center&mode=crop&quality=90&upscale=false&rnd=132245977530000000&width={width})
В разделе Teams представлены списки всех игроков «Саутгемптона» с подробной игровой статистикой за сезон.
![](/media/2256/pasted-image-0.png?anchor=center&mode=crop&quality=90&upscale=false&rnd=132245775150000000&width={width})
Разделы Store и Tickets&Hospitality редиректят на сайты, где фанаты могут купить билеты на матч, сезонные абонементы, мерч от «святых» или заказать спецобслуживание во время игры.
Награды
В марте 2017 года Southamptonfc.com получил «золото» на конкурсе Sitecore Experience Awards в рубриках UK Digital Innovation и Global People's Choice.
Читайте оригинальный кейс Southampton FC на английском языке на сайте UNRVLD (бывшие Delete Agency).