Арсенал — тульский профессиональный футбольный клуб. 

Предыстория

Клиент хотел осовременить сайт с точки зрения дизайна и юзабилити.

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

lucky streak 3

Поскольку большая часть болельщиков сидит с телефона, изначально клиент обратился с запросом разработать мобильную верстку в текущем дизайне.

В процессе обсуждения проекта решили, что сделаем глобальный редизайн сайта с адаптацией под mobile.

Задачи

  1. Обновить визуальную часть сайта, учитывая современные требования веб-дизайна.
  1. Разработать верстку, которая будет легко адаптироваться под разные мобильные устройства.

Решение 

По просьбе клиента сохранили прежнюю структуру сайта, чтобы безболезненно перенести текущий контент.

Для оптимизации расходов было важно оставить первоначальный код — админку сайта. Поэтому работали только с его внешним видом.

В процессе сделали минимальную оптимизацию кода, чтобы сайт не посыпался при редизайне.

Изначально стояла задача сделать мобильную версию. Но на сайте было много моментов, которые можно улучшить — не хотелось переносить их в мобильную версию. В итоге решили переделать mobile параллельно с десктопом. 

Мы не меняли структуру сайта и страниц, чтобы перенести контент в текущем виде. Основной упор сделали на осовременивание визуала — максимум акцента на типографику и фото без лишнего графического шума.

 

Алексей Андросов
Дизайнер Intensa 

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

Одновременно верстали и десктоп, и mobile.

Работали полгода — с октября 2021-го по апрель 2022-го.

Результат

Так сайт выглядел до редизайна:

Так выглядит сейчас: 

Как изменились метрики на сайте

Мы сравнили сезонные периоды до и после редизайна.

На главной странице качество трафика улучшилось и с телефона, и с десктопа.

  • Отказы — сократились с 16 до 13,3 %. Это пользователи, которые просматривают только одну страницу, не переходя на другие, после чего уходят с сайта.
  • Глубина просмотра — увеличилась с 2,17 страниц за визит до 2,8. То есть за одно посещение сайта пользователи стали просматривать больше страниц.
  • Время на сайте — увеличилось на 44 секунды, с 3:14 до 3:58.

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

Например, так изменился мобильный трафик на странице команды:

  • Отказы — сократились с 22,5 % до 15,6 %.
  • Глубина просмотра — увеличились с 1,52 страниц за визит до 2,48.
  • Время на сайте — увеличилось с 1:40 минут до 3:31.

Что сделали

1. Проанализировали сайт и выявили основные проблемы:

— типографика,
— оформление,
— устаревшие фоны.

2. Сделали и согласовали дизайн-проект.

За референс взяли сайт французского футбольного клуба PSG. На него ориентируются многие футбольные клубы России, поэтому для болельщиков такая верстка понятная и привычная.

Мы адаптировали интерфейсные элементы, сохранив айдентику и фирменные цвета клуба «Арсенал».

3. Избавились от смешения текстовых шрифтов и размеров — привели типографику в порядок.

Стандартизировали размер шрифта под разные задачи + используем 2 основных шрифта. Для заголовков Roboto Slab, для основного текста — гротеск Montserrat.

4. Почистили лишние цвета.

Оставили три основных в айдентике клуба — желтый, черный и красный.

5. Сделали векторную графику.

Она масштабируется и выглядит качественно на любом экране — с телефона или десктопа. Растровая графика, которая была до этого, мылилась.

6. Сделали меню «Бургер».

Это иконка, которая состоит из трех горизонтальных линий.

Мы скрыли в главном меню все выпадающие пункты — теперь они выводятся по клику на «Бургер» и не создают лишнего визуального шума.

7. Осовременили карточки игроков.

Было:

Стало:

8. Переверстали турнирную таблицу. 

Во-первых, вынесли ее наверх — это первое, что видит пользователь, когда заходит на сайт.

Во-вторых, расширили и визуально почистили таблицу, чтобы по ней было быстрее и проще считать информацию.

Было так:

Стало так:

Дизайнерская фича 

Для внимательных пользователей. Полоса в шапке сайта переливается — как небо на стадионе после файеров.

Иногда на стадионе фанаты зажигают файеры, которые светятся желтым или красным цветом — прямо в фирменном стиле «Арсенала». 

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

 

Алексей Андросов
Дизайнер Intensa 
Источник: ​​footballfoto.ru

Intensa — производственное агентство для e‑commerce.

Мы помогаем торговым сетям увеличивать выручку интернет-магазинов за счет быстрой и отлаженной аутсорс-разработки.

Начать проект
You May Also Like

Как организовать совместную разработку двух команд на одном проекте

В статье рассказываем, как организовать процесс, если в разработке и техподдержке интернет-магазина участвуют две команды. Соблюдать договоренности, отвечать за свою работу, синхронизироваться…

В 6 раз увеличили число конверсионных действий с рекламы новыми креативами

Magenta — производитель пластиковых карт и изделий из пластика. Компания изготавливает клубные, страховые, парковочные, подарочные карты, пропуска, абонементы, удостоверения с фотографиями, крепления…

Органический трафик из контент-маркетинга для интернет-магазина: когда нужен, особенности и результаты

Когда в бизнесе охватили все рекламные каналы и требуются дополнительные инструменты, когда покупатели не знают о вашем продукте или он слишком сложен и нужны…