Scores24 by Flatstudio | The home of sports.

— Client

Scores24 is online platform that provides up-to-date statistics on sporting events with provision for placement of promotional materials on the platform. Earlier in 2017 we developed a large design system for its website.

visit website

Status: In Support

— Task

Create an all-inclusive and innovative design system for a complex project on sporting events.

— Our role

Strategy, Branding, Ui-Ux, Support, Creative direction

Overview

To create this platform we gathered our forces with Scores24 team and together we analyzed the current market of the Russian sportsbooks, that gave us an insight into the common mistakes and the needs of the fans. While designing Scores24 we focused firstly on sports pages taking into account the individual nature of each sport and the high requirements for data visualization.

Pages upon pages

A collection off Sports, all in one unique style.
Tables and Graphs

We made simple initially complex tables.
Customized games

Tailor-fitted graphical fields for live matches.

Cozy home for sports and you.

We designed the sports main page to feature an array of details on sorted events: completed matches, upcoming matches, leagues catalogue and coefficients from the leading bookmakers in the industry. In the development of the main page, it was essential to take into account all possible sports grids, for example, eSports, tennis and MMA contain different grids but perfectly fit together as they play by the same rules.

01 — football main

02 — coefficient table
03 — tennis grid

04 — top leagues modal

05 — search

06 — adaptive football

Manage your matches.

Interesting matches are everywhere, saving matches feature will help you gather them all in one place. You do not have to worry about missing great games with the Saved matches function.

07 — saved matches

Coefficients.

Scores24 is not a betting platform, thus the website doesn’t have betting option. Nevertheless, we incorporated a coefficient function to display coefficients from the bookmakers to help you understand what chances of winning each team has.

08 — adaptive Coeficiente

You might want to settle down for this.

Considering the importance of great data visualization, we designed the match page to take up maximum screen space for a better display of the information. In addition to information about players and previous games user has access to forecasts, news and other media around the current match.

01 — football prematch

02 — football live

03 — football results

04 — football adaptive

Leagues and divisions.

While designing League page we focused on the development of the tables and dynamic statistics. Here you can access league tables with their various corresponding statistics.

05 — league page

06 — league adaptive

Join your favorite team.

“Team” word is not only about players, but it is also about millions of dedicated fans! Subscription to a team increases the involvement of the audience, and the adaptiveness of the page - the coverage of different devices.

07 — football team

08 — adaptive football

A review of the players.

The profile page gives a complete description of the players and coaches on a team. The player description begins with personal specs and end with position in the team, and some players even got a personalized cover image on the profile branded to suit them.

09 — football player

10 — coach profile

11 — profiles adaptive

Swing it out with Tennis like never before.

In tennis we faced a new challenge – a more complex output of the results. Due to this the page required a more demanding table design. So we created a simplified table design for improved result display. And the end result ticks all the boxes, plus it looks clean and awesome!

01 — tennis prematch

02 — tennis live

03 — adaptive tennis

The actual game play.

However, not everything required changing – the Tennis championships fit perfectly into our already developed grid and platform layout.

04 — tennis tournament

05 — rating rournament

06 — adaptive tennis

Tennis player profile.

Tennis player does not have a team, only competition. One on one battles determine the end results. And the profile page gives a all-inclusive review of the matches and winners.

07 — tennis player

08 — adaptive tennis

Hockey game play.

Considering the fact that hockey is a team sport, hockey results are similar to football – so our grid didn’t face any difficulties.

01 — hockey prematch

02 — hockey live

03 — hockey results

04 — adaptive hockey

Beyond the hockey field.

The tables for hockey results are however much different than football as they require a lot more of the data detailsation. Their adaptability to mobile devices has become a major challenge when working on the screens of the championship.

05 — hockey tournament

06 — tournament adaptive

And behind the sticks are...

This is the case when hockey enlists the help of football. By relying on the grid for football which was already developed, Scores24 player profile for hockey was created. Our design system proved to be a perfect fit.

07 — player profile

08 — player adaptive

Bounce, dribble, aim and shoot.

Design without the basketball flooring, but with adaptability. Basketball match will greet the user with already familiar structure, what makes website navigation logical and convenient on all sports pages.

01 — basketball prematch

02 — basketball live

03 — basketball results

See you in Basketball court.

NBA tournaments differ in types of conferences and leaders in rebounds and points. We also developed an adaptive grid for the play/off that was used in other sports.

04 — basketball tournament

Meet the big ballers.

Yes, this is another athlete's profile. Yes, it’s equally intuitive and user-friendly. For every sport there are content banners-tie-ins that increase the user transitions to other sections on the website.

05 — basketball player

Friendly design for not-so-friendly MMA.

A unique and user friendly template was developed to display details of upcoming matches and past results for the Mixed Martial Arts sports.

01 — mma prematch

02 — mma profile

03 — mma adaptive

When we say all sports, we mean all sports. Almost...

From baseball to winter sports, we didn't leave out any known sporting events. Every sports has its own crafted design of the statistics pages and athlete’s profiles.

01 — winter sports

02 — baseball sports

Welcome to the dark side of Scores24.

Cyber players and fans can revel in their own corner of the Scores24 universe branded with a dark theme set in the familiar layout of the conventional sports. Yes, dark interface! We know you love it.

01 — main cyberspot page

CS:GO, get connected with other players.

We tried on a our main design template for the Team modes, Streaming widgets and Discussion boards pages and also divided Playoffs, Team members and Group tournaments into LAN and Online. We also added Leaders of matches and Favorite weapons. All with one main goal – connect cyber players with one another.

01 — match page

02 — live match

03 — completed match

04 — tournament page

05 — team page

06 — team leaders

07 — favourite weapon

Dota 2: a profile page for cyber players.

Cyber Players can now access their own personalized profiles with widgets designed to display their personal statistics and peak performances.

01 — schedule of matches

02 — live broadcast of the match

03 — completed match with recording

04 — player profile

05 — player widgets

By now we bet nothing can surprise you, except maybe for...

Enjoy sports in shapes and images. Here you can find vibrant and colourful custom made graphics and illustrations of the playing fields of the most popular sports created to enhance the user interface.

01 — Football field
02 — Basketaball field

03 — volleyball field
04 — Hockey field

05 — handball and futsal field
06 — ragby and american football field

07 — Baseball field
08 — american football

09 — Tennis court
10 — Tennis court

11 — Sports icons

All about Scores24.

We incorporated extra pages that give information about the company, contact details, terms and conditions for users on the platform and advertisement rules. We made the most formal information look accessible, enticing and fun to read.