Website design
for a soccer school

Website design for
a soccer school

Our client

Our client is a soccer school for children from 4 to 10 years old. Here young athletes improve their physical fitness, learn to work in a team and play soccer professionally.

whistle

Project start

book

Prehistory

For years, the Calcio Soccer School had attracted new students through parental recommendations. But the project needed to grow. That's where the challenge with the asterisk came in - to create a new channel for attracting customers so that more people would learn about the school.

We had the responsible task of developing a website.
And the first question we needed to find an answer to was which stack to choose. WordPress? Laravel?
flag

Start

Sounds good, but not for this project! We always choose what works best for a particular business challenge. This is the school's first website, and its purpose is to test a hypothesis. So we needed to do everything quickly, inexpensively, but with high quality. The choice fell on Tilda. In the future, on the basis of the landing page, it will be possible to develop a full-fledged multi-page website, which will allow the school to develop further.

Getting to know the mascot

Next we were to meet an important member of the team. Someone who reflects the soul and philosophy of the project. The team's mascot - the Phoenix bird. It speaks about overcoming, about strength, about how important it is to rise up when it seems that everything is lost. The client wanted this image to live on the site and not just decorate the pages, but inspire, unite and make the school recognizable. We decided that Phoenix should be everywhere - from the details in the design to the overall atmosphere.

Spoiler

In the end, it's not just present on the site, it ties all the elements together so that every parent and child feels: here they will find support and a path to their victories.

talisman
football teamfootball team
brush

The color palette

We noticed that Phoenix wears a red jersey with black stripes - the same ones the high school soccer players wear. These colors became the basis for the website. Red is associated with energy and passion, while black emphasizes confidence and the school's serious approach to training. And so the website became part of the team.

Audience and Content

Once the overall style of the site was outlined, we moved on to the question of who exactly was signing up for training. It was important to set accents in the design, determine content blocks and text style. We found out that the decision is most often made by parents who want their children to develop and learn new skills. So we focused on what was really important to the CA. Here are the main points:

  • Training Schedule,
  • Information about the coaching staff,
  • Training methods and programs.
These blocks became the foundation to make it easy and convenient for parents to choose workouts for their children.
whistle
search

Creating UX Texts

Next, we tackled the texts. As we've already mentioned, a landing page is a way to create a website quickly and without unnecessary costs. Therefore, some stages, such as prototypes, are skipped. But it is still necessary to show the client how the site will look like. That's why we prepared UX-texts - not a continuous canvas of letters, numbers and symbols, but structured information with highlighted headings, lists and blocks.

ball

Simple language

We took into account that most often parents do not know much soccer slang. That's why we wrote all the texts in clear language, and left the clever words like "offside" and "cross pass" for next time. And guess what? Our first small victory on the project didn't take long: the texts and structure were agreed upon the first time! Apparently, we hit the heart of both the client and his target audience.

Main screen

The main block is a kind of door to the world of the school, where it is clear from the threshold whether there is a match or not. That's why we put the main information on the first screen.

  • Age groups (4-10 years), approach to teaching, unique tricks - everything is at your fingertips, and everything is clear and to the point.
  • We specifically highlighted the age restriction to appeal to the right audience.
  • To make it easy to read the information, the background was made with a gradient - it removes visual noise from the photo and helps to focus on the essence.
laptop
form

A tempting offer

The goal of the site is to bring in new young soccer stars, and we couldn't help but highlight the main offer: a free trial week! The red entry button immediately attracts the eye due to its brightness, and next to it the Phoenix cheerfully calls out: "Come join us! The first week is free." And the arrow winks - how can you resist?

And to convince parents, we have added the key advantages of the school: small groups, convenient schedule, author's methodology and experienced coaches. These important points are neatly highlighted with asterisks, which unobtrusively direct attention where it is needed.

presentation

Live presentation

To capture the user's attention, we added videos of students. Video is about live emotions and the effect of total immersion. You watch it and feel as if you are already tying your shoelaces on the field, instead of just reading the text.

Football-inspired design

We designed the key features of the school in the format of a soccer field to support the sports theme. And what about the Phoenix? He is once again in the center of attention, inspiring and setting the mood for the whole section.

football field

Success Diary

Motivation is the engine of victory. The school has created its own way to inspire children and developed a personal diary. It has become a real highlight: inside is a tracker for parents to follow the progress of their champion and tips from soccer stars to inspire their child.

And in order not just to tell, but to show at once, we added a photo of the diary to the website. Now everyone can look inside and see what this motivational treasure looks like.

Also, did you notice? In this section, the background changes from black to red, creating a bright contrast. This technique attracts attention and makes the information more visible. If all the blocks looked the same, the user would probably just scroll down the page without looking at the details.

Division of blocks
laptop
methodology

An exciting learning experience

In this section, we tell you more about the teaching methodology that makes the school special because it turns the child's development into a fun process. We have shown the basic idea in the form of a triangle, where three key figures - the coach, the parent and the young athlete - are united by a common goal: to help the child unlock his or her potential and succeed.
And, of course, the school mascot is back with us! It complements the concept and supports the team spirit.

Getting to know the coach

And afterwards we decided to organize an introduction of parents to the coach. Already at the stage of choosing a school it is important to create a first impression of a specialist, and we did everything to make it positive. We added the coach's achievements, told a little about his approach to training, and for more clarity - a quote that reflects the approach to work. But dry words did not seem enough to us, so we supported everything we said with photos of the coach in work with children. The photos add warmth, transparency and help parents to make sure that their child will be in good hands.

trainer

Group classes

If before we told you about the advantages of the soccer school, then in the next block we moved on to the description of lessons. In the club, children are divided into groups by age, so that they all have the same level of training. For each group we described the basic information: for what age training is suitable, how many of them per week and what is the duration. We didn't forget to remind clients about the free trial week!

group

Schedule

We also added a schedule of classes, which is one of the most important factors when choosing a club for a child. It is important that it is convenient not only for children, but also for their parents. We designed the module in the form of a weekly calendar, where you can see all the classes at a glance: days, time and duration. This format helps you to quickly see if the class fits into your family's schedule and if it is suitable for your child.

Cost

And after telling them about the school, we got down to the numbers. We offered the client three options for the cost of lessons. For each tariff we described the benefit - how much one lesson costs - and explained in detail how they differed.

lesson
message

The review block

Parental feedback plays an important role when choosing a school - it builds trust and helps new clients make a choice. That is why we have dedicated a separate section to it.
To make the reviews look as authentic as possible, we added names, photos of parents. This creates a sense of real connection and emphasizes transparency. After all, nothing convinces better than the words of those who have already traveled this path and are satisfied.

question

FAQ

The block with frequently asked questions helps parents to find a quick answer on the topic of interest, and school staff to avoid answering the same queries. And if a client still has a question that is not answered in this section, we have provided an opportunity

ball

Functional website

We made the site not only user-friendly, but also functional. We set up automatic sending of data from the record form directly to the Tilda CRM system, so that the client could easily manage requests and not miss out on customers.

Always in touch

Added a permanent contact bar - phone number and Telegram. This is a simple and always available alternative to a chatbot to help parents contact the school at any time.

feedback form

The bright profile of the school

In this project, it was important for us to create a business card for the school. It was important to create a school business card so that the team spirit would be felt at first sight and the uniqueness of the project would be immediately noticeable. We fully immersed ourselves in the idea of the project and took everything into account: the school philosophy, the charisma of the mascot and the needs of the parents.

Every detail here is in its place and adds up to the overall picture. The design of the website sets Calcio apart from other schools, the structure of the site helps you quickly find the information you need, and the texts are simple and clear. Even if you know only the word "ball" about soccer, you will still understand it.
phonephone

Elena

ACCOUNT MANAGER

girl
Up