Website Redesign for High School Sports Coverage

• Project: Website redesign with new features implementation, migration to the cloud, and mobile app development
• Duration: 4+ years
• Technologies: React, NodeJS, PostgreSQL, AWS, MongoDB, NestJS, Redux, Bootstrap, Swift, Codable, Firebase, Netfox
• Target audience: Coaches, parents, students, and others interested in school sports events

CSZ Network is a media website company covering all the high school sports in various American states. They provide media reporting and cover scores, schedules, and all the content for this field, empowering high school sports fans to form aware and powerful communities.

The Client’s Request

CSZ Network turned to Velvetech to refurbish its existing website and help transition from centralized control over schedules and game reporting to a crowdsourced model. The company’s team managed these activities on their side and wanted to engage coaches and athletes to share this effort, making the process more dynamic. Naturally, it required major changes to the platform.

As a result, the scope of work included website redevelopment to achieve initial goals and facilitation of schedule and score data processing. Since it was important for the company to have a convenient system for publishing game details, our mission was to make it transparent, smooth, and simple.

What We Did

It was agreed to move across the project iteratively, following the best practices of Agile development methodology. According to the main goals of the project, we divided the implementation process into several key parts

• Website redesign
• Cloud migration
• Admin panel design
• API creation
• Data collection and upload
• Forum feature addition
• iOS app development
• Reward system creation
• Tournament brackets design

Website Redesign and Cloud Migration

Velvetech redeveloped the website based on the Client’s requirements and mock-ups. At the beginning of the project, our team created the necessary development and deployment methodologies that allowed new functionality to be added without hindrance.

To comply with the initial request, it was necessary to ensure better performance and scalability. For that, we supported flexible cloud migration to AWS without causing downtime.

Admin Panel and API Creation

The previous version of the site caused some pain while working with the admin interface. Therefore, it needed a brand new start. Using NestJS as a platform for the backend development enabled the design of a fresh admin panel and the introduction of new features. The logic of data upload remained unchanged, but the process became more efficient.

Learn more about the Website Development Process

Another issue to tackle was API creation. It was essential for generating more potential for the website, converting it into a practical and efficient platform. Additionally, its implementation enabled the company to build a mobile app later on.

Data Collection and Upload

Schedule Information

It was agreed to keep the core principle of the schedule collection process as it mainly contented everyone. Schedule details are collected in the form of Excel files followed by the parsing process and mapping of the data.

However, there were some unwanted mistakes in the previous flow. The same game schedule details could have appeared several times. It was the right moment to avoid this issue in the refurbished version of the site. Thus, our team applied a new logic to track duplicates and eliminate errors of that kind.

Before publishing the results to the website, the admin panel enables making easy adjustments if necessary.

Score Information

As the preceding format of collecting scores implied no visible structure, it became vital to systematize the process and make it plain. Previously, it was only possible to receive results by sending SMS manually to the coaches. Those texts contained open-ended questions that led to incoherent answers without any links to appropriate games.

The improvements included the automation of sending messages and creating a score web form to facilitate the entire flow. After the changes took place, the system started sending SMS notifications automatically with a link to a web form that contained a few fields for score input and comments.

Presently, the process is nothing but painless. Three hours after the start of the game, all the coaches involved in it receive a message with a link to this form, fill it out, and submit the results. It’s also possible now to attach the game’s highlights such as images, videos, descriptions, etc.

The system collects the answers with structured data tied to a certain game. It is then approved by the system administrator through scores overlapping and after that uploaded to the website.

This fresh approach to data collection and its publishing eliminates superfluous errors and inaccuracy of results. On top of that, it streamlines the process and enhances its efficiency, saving time and making the system more transparent.

Forum Feature Addition

The next task Velvetech worked on was the implementation of a forum feature for the website to improve user engagement and increase participation in the CSZ Network online community. Website users can now create posts and reply to threads, attach photos and videos, and add hashtags for various sports kinds, states, and teams. It provides value in boosting the website’s content and fun for visitors.

iOS App Development

Another essential part of the project was the development of an iOS application that the company wanted to build for quite a while. Our mobile app developers created an app that duplicates much of the website functionality and complements it by adding more convenience for those on the move.

Even if the current website version is mobile-friendly, it’s more common today to access resources through a dedicated mobile app. After all, during a game, fans want to be able to quickly navigate info, comment, or share thoughts. And the new iOS app allows for all of that.

Reward System Implementation

Since CSZ Network wanted to boost user engagement, they came up with a reward system called Spirit Points. Users earn these points through various activities on the website. In the future, Spirit Points can be redeemed for sports tickets and exclusive merchandise.

By design, this system aims to create a more interactive and rewarding experience for users, encouraging them to actively participate and engage with the web app.

Tournament Brackets Design

To ensure the platform is well entertaining and provides all the game details in a comprehensive manner, CSZ Network asked our team to design tournament brackets. Inspired by other prominent sports websites, we added a section that visually represents core data such as teams, rounds, and scores. For more convenience, a user can search the results based on schools, states, sports, and dates, of course.

Challenges

Missing Scores

When the Client encountered the problem that some coaches were omitting SMS notifications and the games with no scores were piling up, it was an obvious signal for the team to tackle this issue. Velvetech carried through the concept of the Missing Scores Report — the idea the Client came up with.

A button click in the admin panel generates a list of games with missing scores that goes directly to the corresponding school and athletic director or coach. One of them completes the information and uploads the data directly to the website with no need for approval. This functionality has successfully handled the occurred matter. It has enabled filling the gaps and keeping the website up-to-date.

Missing Coaches Details

Similar to the previous challenge, we discovered that the database occasionally lacked other important information. The system requires valid contact details of coaches to enable the continuous flow of schedule and score data collection. In real life, personnel changes regularly. New people come on board and some of the staff leave or switch their phone numbers.

Velvetech provided the solution for that issue by building the Missing Coaches Report. Whenever contact details are missing, the system administrator generates a form and sends it to the athletic director of the corresponding school. This person then updates the details.

API Development

Another moment that caused light turbulence was API development. Due to the strict time limits and amount of previous system data to be migrated, we had to be very careful and highly efficient at the same time.

Our team overhauled the old system to support its scalability: moved application logic to separate services without changing the core. That left us with the absence of troubles, typical when building an application from scratch.

Outcome

It was important for the Client to keep sports fans involved and loyal. Accordingly, it was important for Velvetech to have the Client content and fulfilled. As a result of our work, the new website came to light. It has equipped CSZ Network with improved performance and user engagement.

Any website visitor can now become a registered user. It takes only a few steps to start participating in school sports discussions. Implemented forum feature allows users to post relevant information and score results.

Coaches feel the benefits of using the admin panel when working with schedules and scores, admitting it is a much faster and intuitive system from a user flow perspective. All the target audience, including parents, are pleased with the platform, which has received a new look designed by a third party.

Plus, the redesigned website offers advertising spots such as banner ads for relevant businesses to connect them with customers. So, it has become a lucrative place for everyone involved in the sports community.

What’s Next

Velvetech is excited about working with CSZ Network on additional features for the website. At the moment, we’re working on improving UI/UX design, making it more user-friendly and inclusive.

Velvetech is happy to help CSZ Network enhance its system, automate the core processes, and empower connections with the audience.