ФК Арсенал: Редизайн сайта футбольного клуба с адаптацией под мобильные — глубина просмотра выросла в 1,6 раза
Тульский ФК «Арсенал» — сайт без мобильной версии и устаревший визуал. Сделали редизайн с адаптацией под mobile и сохра…
TL;DR
Тульский ФК «Арсенал» — сайт без мобильной версии и устаревший визуал. Сделали редизайн с адаптацией под mobile и сохранили админку. На мобильной странице команды глубина просмотра выросла с 1,52 до 2,48 страниц, отказы упали с 22,5% до 15,6%.
Pitch
К нам пришёл футбольный клуб «Арсенал» из Тулы — у сайта не было мобильной верстки, с телефона он открывался как с десктопа, при том что большая часть болельщиков сидит со смартфона. Изначальный запрос был только адаптировать текущий дизайн под mobile, но в обсуждении договорились о глобальном редизайне с сохранением структуры и админки. За полгода (октябрь 2021 — апрель 2022) переделали визуал, сверстали адаптив, осовременили карточки игроков и турнирную таблицу. На главной отказы упали с 16% до 13,3%, глубина просмотра выросла с 2,17 до 2,8 страниц. На мобильной странице команды глубина просмотра выросла в 1,6 раза, время на сайте — почти в два раза.
Контекст клиента
ФК «Арсенал» — тульский профессиональный футбольный клуб. Аудитория сайта — болельщики, большая часть которых заходит со смартфона: смотрят расписание матчей, состав команды, турнирную таблицу.
Задача
Клиент хотел осовременить сайт с точки зрения дизайна и юзабилити. Главная проблема — отсутствовала мобильная вёрстка: с телефона сайт открывался так же, как с десктопа. Поскольку большая часть болельщиков сидит со смартфона, изначально клиент обратился с запросом разработать мобильную вёрстку в текущем дизайне.
В процессе обсуждения проекта решили, что сделаем глобальный редизайн сайта с адаптацией под mobile. Параллельно — сохранить прежнюю структуру и админку, чтобы безболезненно перенести текущий контент и оптимизировать расходы.
Алексей Андросов, дизайнер Intensa:
Изначально стояла задача сделать мобильную версию. Но на сайте было много моментов, которые можно улучшить — не хотелось переносить их в мобильную версию. В итоге решили переделать mobile параллельно с десктопом. Мы не меняли структуру сайта и страниц, чтобы перенести контент в текущем виде. Основной упор сделали на осовременивание визуала — максимум акцента на типографику и фото без лишнего графического шума.
Что сделали
По просьбе клиента сохранили прежнюю структуру сайта, чтобы безболезненно перенести текущий контент. Для оптимизации расходов было важно оставить первоначальный код — админку сайта. Поэтому работали только с его внешним видом и сделали минимальную оптимизацию кода, чтобы сайт не посыпался при редизайне.
При разработке дизайна держали фокус на пользователях мобильных устройств и избегали мелких элементов, в которые сложно попасть пальцем. Одновременно верстали и десктоп, и mobile. Работали полгода — с октября 2021‑го по апрель 2022‑го.
1. Анализ сайта и проблем
Проанализировали сайт и выявили основные проблемы: типографика, оформление, устаревшие фоны.
2. Дизайн‑проект
Сделали и согласовали дизайн‑проект. За референс взяли сайт французского футбольного клуба PSG. На него ориентируются многие футбольные клубы России, поэтому для болельщиков такая вёрстка понятная и привычная. Адаптировали интерфейсные элементы, сохранив айдентику и фирменные цвета клуба «Арсенал».
3. Типографика
Избавились от смешения текстовых шрифтов и размеров, привели типографику в порядок. Стандартизировали размер шрифта под разные задачи и используем 2 основных шрифта: для заголовков Roboto Slab, для основного текста — гротеск Montserrat.
4. Цвета и графика
Почистили лишние цвета — оставили три основных в айдентике клуба: жёлтый, чёрный и красный.
Сделали векторную графику. Она масштабируется и выглядит качественно на любом экране — с телефона или десктопа. Растровая графика, которая была до этого, мылилась.
5. Меню «Бургер»
Скрыли в главном меню все выпадающие пункты — теперь они выводятся по клику на иконку из трёх горизонтальных линий и не создают лишнего визуального шума.
6. Карточки игроков
Осовременили карточки игроков.
7. Турнирная таблица
Переверстали турнирную таблицу. Во‑первых, вынесли её наверх — это первое, что видит пользователь, когда заходит на сайт. Во‑вторых, расширили и визуально почистили таблицу, чтобы по ней было быстрее и проще считать информацию.
8. Дизайнерская фича: переливающаяся шапка
Для внимательных пользователей: полоса в шапке сайта переливается — как небо на стадионе после файеров.
Алексей Андросов, дизайнер Intensa:
Иногда на стадионе фанаты зажигают файеры, которые светятся жёлтым или красным цветом — прямо в фирменном стиле «Арсенала». Пришла идея добавить в шапку переливающийся градиент. Выглядит, как ночное небо, освещённое файерами.
Видео с переливающейся шапкой: https://intensa‑backend.intensa‑dev.ru/storage/article/zMurdXBUKfWFb4NSGh8odxZofMGBqNYUdqpdW7mP.mov
Результат
Сравнили сезонные периоды до и после редизайна. На главной странице качество трафика улучшилось и с телефона, и с десктопа.
Главная страница:
| Метрика | До | После |
|---|---|---|
| Отказы | 16% | 13,3% |
| Глубина просмотра | 2,17 страниц за визит | 2,8 страниц за визит |
| Время на сайте | 3:14 | 3:58 |
Отказы — это пользователи, которые просматривают только одну страницу, не переходя на другие, после чего уходят с сайта.
Также видим положительные изменения метрик на внутренних страницах сайта. Например, так изменился мобильный трафик на странице команды:
| Метрика на мобильных | До | После |
|---|---|---|
| Отказы | 22,5% | 15,6% |
| Глубина просмотра | 1,52 страниц за визит | 2,48 страниц за визит |
| Время на сайте | 1:40 | 3:31 |
Команда
- Алексей Андросов — дизайнер
- Кирилл Трофимов — генеральный директор
Технологии
HTML5, CSS3, JavaScript, SVG, шрифты Roboto Slab и Montserrat.
