♞ How we made Worldchess.com
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
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
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.
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.
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.
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.
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.
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.
We introduced 281 corrections after the completion of the first version.
Simultaneously we kicked off a special project on the upcoming World Championship in New York.
Elements
Composing the options of the main teaser: broadcast, important news, main topic.
Thinking over a quick reference mode and trying a fallback option in shifting the news feed a bit higher.
Working on the adaptive design.
Assembling interface elements, and the palette for developers.
Preparing a set of SVG icons.
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.
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.
— 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.
— Helvetica Neue for service information and descriptions.
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.
The hundred of those brave and skilled.
The volume of emails with the illustrator while working on ranking was 319 letters.
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.
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??
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.
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.
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.
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.
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.
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
