How we developed the analytical platform

The main difficulty of the project was that sports statistics did not exist as a single ready-made dataset.

Information had to be obtained from several sources, processed and used in different parts of the product.

The same data should have worked correctly simultaneously in the match calendar, team cards, player statistics, standings, and detailed match analysis.

At the same time, some of the information had to be updated automatically, and some had to be edited by administrators.

An additional requirement was the monetization of analytics: the user could purchase a tariff, receive a certain number of available matches and use them to view paid content.

Thus, it was necessary to link data, analytics, content, users, and a commercial model into one system.

Create from scratch a bilingual analytical platform that:

• automatically receives sports data via the API;
• allows you to manage data and content through your own admin panel.;
• Provides users with a calendar, news, statistics and analytics;
• separates free and paid content;
• Supports tariff plans and payment;
• provides each user with a personal account;
• It works on desktop, tablet and mobile.

It was

It was necessary to collect disparate data about matches, teams and players and make an understandable user product out of them.

At the same time, it was necessary to take into account many conditions: the upcoming match, the current day’s match, the completed match, the postponed game, different types of statistics and different access rights.

Become

We have developed a full-fledged platform that combines:

• match calendar;
• detailed match analysis;
• statistics of teams and players;
• tournament tables;
• information about injured players;
• news;
• personal account;
• subscriptions and rates;
• notifications;
• ad blocks;
• own administrative dashboard.

As a result, sports data has become not just information on the pages, but the basis of a separate digital product with its own monetization model.

Prior to the start of development, we conducted a business analysis of the project and determined which data should be received automatically and which should remain managed by the administrator.

This was especially important for sports analytics: some data had to be updated regularly from the API, while others required manual adjustments.

As a result, the product architecture was built around several data sources related to the user and administrative parts of the system.

The NHL and Sportsnet APIs were used as sources. Additionally, the administrator could manually edit the necessary data and content through the control panel.

Separately, we have developed the visual system of the project.

The work did not start with individual pages, but with the formation of the overall product structure: prototypes, user scenarios, and interface components.

As part of the design stage, we created:

• logo;
• corporate colors and typography;
• the design of the main pages;
• personal account interfaces;
• pop-up windows;
• states of the elements;
• adaptive versions;
• the component library;
• UI Kit;
• animations and transitions.

The layouts were prepared separately for desktop, tablet and mobile.

In total, the design included more than 15 unique pages, separate personal account screens and a set of interactive states.

The UI Kit allowed you to define uniform rules for buttons, fields, cards, tables, drop-down items, and other components in advance. This is especially important for a project with a large number of repetitive interface elements.

One of the most difficult parts of the project is working with hockey statistics.

The data from the API was to be used in various scenarios and displayed according to the logic of a particular section.

For example, the calendar should take into account:

• match date;
• time;
• Location of the event;
• game status;
• completed matches;
• score;
• postponed matches.

It was necessary to collect much more information on the analytics page of a particular match.:

• lineups of teams;
• players in the trend;
• goalkeeping statistics;
• team statistics;
• injured players;
• last 5 matches;
• team meetings in the current season;
• additional facts;
• analytical materials.

At the same time, the same information had to be used correctly in different parts of the platform.

For example, data about an injured player was included both in a separate section «Injured players» and in the analysis of a specific match.

A separate task is the logic of displaying matches.

For the user, the match could be in different states:

Upcoming

The date, time, venue, and team information are displayed.

The match is today

It becomes possible to proceed to detailed match analysis.

The match is over

Instead of the time, the FINAL status is displayed, the final score and game statistics appear.

The match has been postponed

The user sees the PPD status.

This logic had to be taken into account not only visually, but also at the data and page access level.

A separate product block is the statistical sections.

In the tournament tables, the user could switch between between:

• by league;
• conferences;
• by divisions;
• wild card;
• seasons.

On mobile devices, the tables have a horizontal scroll with a fixed first column.

A similar approach was used for player statistics.

Three main scenarios were implemented in the players section:

Summary — ratings of the best field players and goalkeepers.

Player statistics — a table with filters by player type, season, and last name.

Injured players — a list of players with a breakdown by team and the possibility of filtering.

One of the key features of the product is the paid access model.

The user could choose one of four tariff plans. Each tariff determined the subscription period and the number of matches, the analysis of which is available to the user.

The mechanics were built around conditional «keys»:

1 key = 1 opening of paid match analytics.

If the match analysis is free, it is visible to all users.

If the match is paid, the system checks the user’s rights.:

• is there an authorization;
• is there a valid tariff?;
• whether the required number of keys is left.

After the launch of paid analytics, the corresponding number of available matches decreased.

After the subscription expired, the remaining keys also became unavailable.

For a user without a tariff, the system offered to issue a suitable tariff plan.

Payment was provided through Stripe and bank acquiring, and the purchase information was displayed in the personal account and sent to the user by e-mail.

The personal account has become a separate part of the product, not just a profile page.

In it, the user could:

• manage your account;
• change password;
• view notifications;
• save interesting matches;
• manage your pricing plan;
• Track the remaining number of available matches;
• receive information about the end of the subscription;
• manage the settings.

We have implemented a notification system separately.

The user could subscribe to a specific match and receive information about it both in his personal account and by e-mail.

To manage the entire platform, we have developed our own admin panel in pure PHP without using a CMS or a ready-made administrative solution.

The panel includes:

• the main page;
• tariff plan management;
• user management;
• news management;
• match management;
• statistics management;
• advertising management;
• configuring access to analytics;
• editing mode;
• system settings.

The administrator could also manage the content in two languages and manually adjust the necessary data.

This made it possible not to link the work of the product solely to the automatic loading of data from the API.

The main difficulty of the project was not the number of pages.

It consisted in the need to link a complex domain and a large amount of interrelated data with a clear user interface.

The same entities — team, player, match, season, statistics — were used in several sections at once.

At the same time, the system had to take into account different match conditions, different types of statistics, the relevance of the data and the user’s access rights.

Therefore, we designed the product not as a set of individual pages, but as a connected system where changes and data from one section should work correctly in others.

In about 5 months — about 2 months for design and 3 months for development — we created and delivered a fully finished platform to the customer.

In numbers

• 15+ unique pages
• 3+ API sources
• 4 tariff plans
• 2 languages
• 3 interface versions: desktop, tablet, mobile
• own UI Kit
• own admin panel
• user’s personal account
• subscription and paid access system
• notification system
• payment integration

The project was fully developed and handed over to the customer. Subsequently, the site was put on pause for reasons that are unknown to us, so we do not attribute business results to the project, which we cannot actually confirm.

Instead of the usual sports portal, the customer received the basis for a full-fledged sports analytics service:

• automated data collection;
• own statistical presentation system;
• content management;
• personal accounts;
• the subscription model;
• paid access to analytics;
• user management tools;
• a bilingual platform;
• adaptive interface.

So technically, not just a website about the NHL was created, but a ready-made digital product with its own business model.

If you need to develop a digital product based on complex data, an API, and your own business logic, we will discuss the task and propose a project architecture.