Workspace Digital Awards 2025 — успейте номинировать кейсы по льготной цене до 1 декабря. Принять участие!
PixelPeak
Champions Premier - дизайн сайта для детской футбольной школы
PixelPeak
#Дизайн сайта

Champions Premier - дизайн сайта для детской футбольной школы

133 
PixelPeak
PixelPeak Россия, Москва
Поделиться:
Champions Premier - дизайн сайта для детской футбольной школы
Клиент

Champions Premier

Бюджет

250 000

Сфера

Спорт

Регион

США

Сдано

Август 2023

Задача

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

1. Разобраться почему нет заявок с сайта

2. Сделать сайт более запоминающимся, этим отстроиться от конкурирующих школ

3. Привлечь новых ребят-футболистов и их родителей.

Решение

1. Разобрались почему нет заявок с сайта

2. Сделали вау-дизайн, который очень понравился владельцу и надеемся понравится ребятам и их родителям.

3. Владелец школы в восторге, причем ему совсем недавно сделали новый сайт, но как он сказал: "Ваш вариант это самое крутое, что я видел"

Особенности проекта

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

1Менеджмент проекта

Всю работу над проектом мы разбиваем на этапы:

1. Бриф

2. Аналитика

3. Прототипирование

4. Техническое задание

5. Дизайн

6. Разработка 

Каждый этап мы согласовываем с клиентом на звонке чтобы в конце работы не было сюрпризов.

2Аналитика и исследования

Текущий сайт клиент сам собирал на Wix. У клиента нет опыта в разработке и в дизайне, поэтому нет понимания как строятся страницы, как сделать так чтобы посетитель принял решение оставить заявку. 

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

Изучаем нишу:

1. Изучить какие смыслы доносят конкуренты на своих сайтах.

2. Какие у них услуги помимо тренировок. Как проходит тренировка.

3. Как устроена структура каждой страницы их сайтов.

4. Какое УТП.

5. Какая монетизация: абонементы, стоимость обучения на месяц/полгода/год.

6. Есть ли у них выездные соревнования, как они устроены.

7. Есть ли спортивные лагери на школьных каникулах. Что они там делают.

8. Какие результаты у их учеников, чем гордятся.

9. Что важно, родителям и детям, зачем они занимаются футболом.

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

Благодаря аналитике мы поняли ошибки текущего сайта:

1. Когда человек заходит на сайт, он сразу не понимает куда он попал

2. На сайт чаще всего приходят только родители футболистов школы, чтобы оплатить услуги или записать ребенка в лагерь

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

4. Нужно довольно много времени чтобы разобраться в услугах.

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

3Прототипирование

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

4Дизайн сайта

Главная страница

Самые интересные проекты получаются тогда когда они основаны на каких-то смыслах или метафорах. Это позволяет генерировать много идей, а клиент и его покупатели легки эти идеи считывают и получатся вау-эффект.

Кроме того на основе метафор, можно создавать историю бренда, а бренд с историей очень хорошо запоминается.

Мы не хотели использовать зеленый цвет (как цвет футбольного поля), потому что не хотелось работать со смыслами в лоб. Зато мы использовали черно-белые фото как отсылку к фотографиям первых матчей в 1872 году. И этот прием очень понравился любителям футбола, мы получили много приятных комментариев и подняли волну обсуждения футбола)

Например, в этом проекте мы использовали очертания футбольного поля и ворот. 

И посетитель изучая сайт, на самом деле как-будто двигается по футбольному полю, но поймет это только после того как дочитает сайт до конца.

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

Также мы задумали анимации, чтобы добавить немного игры и динамичности.  

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

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

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

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

А кроме того в школе воспитывают личные качества: волю к победе, принципы честной игры, командного духа. Ну какой родитель от такого подхода откажется?

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

Добавили блок с расписанием как будет проходить тренировка, что они не просто играют на поле, а у них есть:

- 10 минут разминают основные мышечные группы

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

- 15 минут функциональная подготовка

- 10 минут игра в футбол без подкатов, оффсайдов и остановок

- 15 минут растяжка, приводят пульс и температуру тела в норму, растягивают основные мышечные группы.

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

Пришла пора рассказать про варианты оплаты. И на этом этапе, когда уже все основные важные моменты разъяснены, посетитель готов приобрести абонемент на тренировку.

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

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

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

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

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

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

Собрали UI-kit возможно для одностраничников это не так важно, но тем не менее мы всегда делаем дизайн даже самых мелких элементов.

5Срок и стоимость

Срок разработки: 4 недели

Примерная стоимость таких сайтов: 170 000 руб.- 250 000 руб.

Результат

Комментарий агентства

Анастасия Красовская
Анастасия Красовская

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

https://www.pixelpeak.agency/football-school

Стек технологий

  • Figma Figma Графический редактор

Награды


Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

Хотите заказать похожий проект?

PixelPeak с удовольствием обсудит вашу задачу

Оставить заявку