♞ How we made Worldchess.com

Sulliwan Studio
May 4, 2016 · 10 min read
Image for post
Image for post

Introduction

The history of chess accounts for more than a thousand years, and within the period it has undergone numerous changes, experiencing rises and falls in its popularity. By the end of 20th century, after games by Kasparov, Deep Blue robot and all the impressive prize funds, there came a calm period, when the popularity of the game decreased dramatically. However, after two decades of silence, chess is being called ‘a dormant giant’ of the sport industry again, and a new round of development is foretold. At present, chess is daily played by more than half a billion of people all around the world. This game is now built into a lot of operating systems, and as it turned out, even into a facebook messenger. Ant-Man is playing quantum chess with Stephen Hawking, while ex Spider-man is trying to win from Boris Spassky.

I. Client

Image for post
Image for post
Fédération Internationale des Échecs

Higher chess authority — FIDE (Fédération Internationale des Échecs, FIDE), founded in 1924 in Paris is an international organization which holds competitions, sets the rules and defines the future of chess (same as FIFA in the world of chess). In 2012 FIDE launched a new stage of development and concluded a partnership agreement with Agon company, which now is the main organizer of championships, fundraising campaigns and general popularization of the game.

II. Rebranding of chess

Image for post
Image for post
World Chess logo by Pentagram

Two years ago the Agon company created the World Chess brand, which was supposed to become a new representative of chess, and a development department of its kind.

In 2014 the Pentagram studio designed the identity and the new look of a chess set for World Chess. Then the turn of the portal for the new brand came, where professionals along with amateurs could learn the news from the world of chess, follow the ratings and watch the games live. The resources existing at that moment were completely out of date and the public life of the game itself was completely screwed, honestly speaking. The Agon challenged us to change the situation for the good. And the challenge was accepted.

Image for post
Image for post
One of the most popular chess resources before the development process was launched

III. Research

For a start we decided to meet top 100 chess players, publishers of the project, and also the new chief editor of the portal Dylan McClain, who previously used to write about chess for The New York Times. We managed to learn what chess players were actually interested in (mostly it was game analytics with the strategy of the moves analysis), discussed the format and the architecture of the project.

The final outcome of the meetings provided us with the essence for the brief, which was to create a source not about chess, but for chess players of any level. The major functions would be ratings, publications, games broadcasting. So, that is where we started from.

IV. Process

Structure
The tree of the project was built with the help of Mindmeister together with the client. This was quite a sufficient tool for modern structure design. However, by the end of the project a lot of the sections had changed, united or even dropped out, but for the first couple of weeks the ‘spider’ was cheerfully hanging on the office walls.

Image for post
Image for post
The initial structure

Wireframing
After negotiating the general structure we moved on to designing the pages with grey blocks. This was also done together with the client: the layout was presented on paper spreadsheets, where right away, without any ‘we’ll come back with the feedback’, the comments and notes on the project were written and drawn. Joint participation, client involvement, all that stuff.

Image for post
Image for post

Next, the rolls were digitized into working wireframes and used to work on the internals of the future website. At a certain stage the advertisement department became involved to agree on places and formants of the ads to not ball it all up with the final version of the website. Those wireframes we came an agreement upon were then animated with the help of layouts, also for a faster prototyping a new and swift Marvel App was used.

Image for post
Image for post
The stages of devising the main page, the broadcast and the article
Image for post
Image for post
We used 8 columns and a 20 pixel module for the grid

Colorization and grinding
After confirming the design, we started our favorite game of coloring altogether with a number of reflows. And then again. And again. Overall, there were 9 alternatives to the layout of the main page, and within each alternative yet another 4–6 iterations.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Choosing of headers.

Eventually, the file сhess_home_7–5_1–2_news_block-2-dev.sketch was sent for finishing developing. By the way, this was the project when we finally shifted from photoshop to sketch as the main page file in PSD was already 100 MB, contrary to the same file in sketch being only 15 MB together with speeding up. Thus, in an easy and natural way the diamond icon took its first place in dock.

Image for post
Image for post
Chess_home_7–5_1–2_news_block-2-dev.sketch

We introduced 281 corrections after the completion of the first version.

Image for post
Image for post
3000 pixel bug list

Simultaneously we kicked off a special project on the upcoming World Championship in New York.

Image for post
Image for post

Elements

Composing the options of the main teaser: broadcast, important news, main topic.

Image for post
Image for post

Thinking over a quick reference mode and trying a fallback option in shifting the news feed a bit higher.

Image for post
Image for post

Working on the adaptive design.

Image for post
Image for post

Assembling interface elements, and the palette for developers.

Image for post
Image for post

Preparing a set of SVG icons.

Image for post
Image for post

By the way, users’ icons on the website are created from a portrait of the current world champion (a Norwegian Magnus Carlsen at the time of writing). As soon as the place of the champion is taken by another player, the default user is changed to the one. For the most perspective players several profile pictures are made beforehand.

Image for post
Image for post

Typography

The main requirements for the types used are moderate aristocracy, rigour and recognition. Ultimately the following set was evolved:

— For the major titles the tone is set by Superior Title.

Image for post
Image for post

— For the articles’ text body PT Serif is used. This was the one to be the most comfortable for reading by chess players, a third of whom wear glasses.

Image for post
Image for post

— Helvetica Neue for service information and descriptions.

Image for post
Image for post

Illustrations

Four weeks, two gigabytes of photos, one Lera Bazankova, and finally we got the portraits of all top 100 chess players designed in a unified style. Even popular chess players dislike photo sessions, that is why we had to literally collect the portraits bit by bit for rendering, and even request for them at FIDE. Now Lera knows all the players’ faces even better than the judge of the Chess Federation.

Image for post
Image for post
The evolution of the portrait of the world’s champion Magnus Carlsen

The hundred of those brave and skilled.

Image for post
Image for post

The volume of emails with the illustrator while working on ranking was 319 letters.

Image for post
Image for post

V. Major functions

Ranking

This is one of the most important sections, the data for which comes from FIDE servers. The servers are a bit out of date, so they used to transmit data in exсel files, very slowly, with frequent failures. Therefore, a number of things had to be reconfigured, and now the rating is updated every 10 seconds.

For the moment we have launched the most important ranking categories:

— The statistics of each player in every game of different types (classic, blitz, rapid). Could be compared with other players’ statistics. By the way, the players’ attachment to the color of figures is not a myth, therefore, in each pie chart the capacity of playing either black or white figures can be measured and compared.

— The major ranking comes from FIDE, based on which every player can get his own position in top 100. Apart from the general ranking, each player’s profile contains a graph which illustrates the changes of the position of the given player on the temporary scale.

Image for post
Image for post
A player’s page, general ranking and the screen for players’ comparison

Game player

Any chess game can be saved in a text format PGN (portable game notation). We designed a special player for the games, which transforms notations and visualizes them on the website in a form of a chess board. It is possible to click all the moves with comments from chess analytics, and to get a detailed review of the game. Interestingly, the analytics, just as football commentators, sometimes mark the most outstanding moves:
No!!!!!!
So unusual for him!
WTF??

Image for post
Image for post
The file with notations (on the left) turns into a board with comments (on the right)
Image for post
Image for post
It is interesting to follow the extent of the knight stoned in different combinations of Staunton chess :-)

Chess pieces for the player were copied from a set of Staunton Chess made by Nathaniel Cook in 1849. However, the set was later advertised by Howard Staunton, one of the strongest chess players of the 19th century, in his magazine. This was the way the set got its present name.

Image for post
Image for post
Evolution of the figures for the player

Competitions broadcast

Only FIDE has the right to broadcast the games. However, what FIDE lacked before we started the development was the ability to broadcast the moves fast enough.

The process itself goes as follows: during competitions special boards ‘DGT e-Board’ with electronic sensors are used (about 1000$ per set), those capture the movements of the figures on the board. The information from the board is then transmitted to the computer of an administrator by a COM-cable in the form of notation, from where it gets to FIDE FTP. We then collect the data from the FTP through gateways designed specially for us, which finally can be visualized into a regular chess board demonstrating the moves of the players on the website. When the test started, the time difference between the move of the player and the visualization in the broadcast constituted 30–60 seconds. After a couple of days of debugging it the difference was reduced to only 4–5 seconds. Not bad at all.

The broadcast is splitted into two parts. The first one is the broadcast of the boards and videos, the other one is a media stream, where all the news related to competition get. The news feed is formed with the help of Waterfall tool.

Image for post
Image for post
Broadcast monitor, pop up with a separate game, media stream

By the way, it is nice to mention that the candidates tournament, where we tested our broadcast in real life for the first time, was won by a Russian Sergey Karjakin. He will be the one to go to New York to compete for the champion title with Magnus Carlsen.

Image for post
Image for post
Sergey Karjakin after winning the candidates tournament in Moscow, March 2016

VI.Technologies

The entire backend is developed with Python with the help of Django framework. MySQL servers with replications are used for long term data storage. Operational data is stored in Redis, cache in Memcached frontends. Hosting is provided by Amazon. The statistics is placed on S3. Games broadcasts are held with the help of server-to-server interaction through RabbitMQ, realtime front-end on Tornado.

Image for post
Image for post
News feed control panel, article writing, rating management

Conclusion

The project was launched within 3 month time, being now actively maintained and developed. A new app design, game platform creation, rating features enhancement, and game broadcasts refining are the ongoing plans.

worldchess.com


Titles

Dmitry Sulliwan
Art Director, designer

Makar Bogdanov
Designer

Dmitry Alexashin (Astroshock)
Technical director

Dmitry Guschin(Astroshock)
Lead Developer

Андрей Мирзоян (Astroshock)
Developer

Lera Bazankova
Illustrator

Maria Kunitsa
Producer

Vladmir Kukaev
Robert Fontaine
Dylan McClain
Consultants

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store