Chess.com brand identity and web interface
design proposal by Sergey Navasardyan
Studying the branding of Chess.com and other chess platforms, I tried to find ways to differentiate Chess.com from its competitors and find a solution for its identity that would emphasize the brand over other chess platforms.
For comparison, I downloaded several chess platforms and filed the apps in the same folder on my phone.
It was surprising, but logical, that many of the icons have similar visual identities; they all depict a chess piece with the same name under the app - Chess
One or two chess platforms stand out with their visual solutions and names, but Chess.com felt lost in this crowd.
That's why I tried to find a new visual solution that would set Chess.com apart from its competitors: a more unique and fresh approach to the brand.
The solution was hidden in Chess.com, in the icon that is currently used for a new game, or rather in the movement of the animated icon.
Yes, it’s dynamics that I think can set Chess.com’s identity apart!
After some elaboration, I got to the following two options. They are almost indistinguishable from each other, but if we pay close attention, we can see that they differ in finger movement. In the first case, the hand seems to start the game carefully, defending. In the second, the hand attacks, sending the pawn to battle.
I prefer to attack because it is the best way to defend :)
I think in order to make the identity completely clear, it is necessary to add the “.com” to the app’s display name. In this way, the branding of the Chess.com app will become stronger and more recognizable.
The main change that may be significant is to rename the “Connect” section of Chess.com to “Community” and replace the icon where I purposefully emphasized the female figure. This, I believe, is a more welcoming name and icon that better represents the inclusiveness of the game of chess.
The second change is to the notifications, which were at the top of the dashboard.
In the images below, I tried to create a new visual solution for the list of completed games, in which I mainly focused on the structure, the layout, how to revise the right panel, and the hover states.
and highlight the result of the game from the left, which in hover state will have a short animation, thus highlighting the line on which the user is pointing.
Indicator arrow if the user’s rating goes up or down
To avoid extra information noise, it made sense to replace the user’s username with just “You”
For a cleaner and clutter-free interface, I removed the icons from the right panel Live Games section. I recognize this may not be the universal solution.
Light UI design and color scheme that I think should be applicable to the whole platform, not just the selected areas
The Chess.com Blogs and Forums are very powerful tools to make the product more socially engaging for the general public.
I think some aspects of the page are easily missed because of their similar color and design to the rest of the page, and some parts of the right panel need to be separated by color depending on content type.
To make slight structural changes, bring the search bar up to the top and keep it sticky. Also, enable the user to search blogs by category and keywords similar to the Forums section
Chess.com forums are a vital place for the chess community, but it needs some special design and attention. It will be easier to use if the Categories drop down menu was placed at the top of the Forums page for easy navigation.
The main screen before starting the game can be muted to highlight the game selection options.
I reimagined the secondary selection buttons and hover states to them.
I tried to create a lighter right panel and board design from the moment the game starts so that the main focus of the user stays on the board and the moves.
As for the board options, at the start of the game they can be located in the bottom left panel, compared to where they currently are in the middle of the board and the right panel.
The right panel can be more informative and focused on steps if it has a centralized structure.
The clock can be accented with the player whose move is at that moment, and the rating can go under the name to give more space on the right for the winning checkered icons (which is intentionally missing in my design).
The result panels could be better highlighted at the end of the game by muting the screen below.
Thank you for your time and consideration.
As a chess enthusiast, I realize the game’s importance and significance for human beings. I believe that design improvements and modern visual solutions can become the bridge that will make chess more accessible to a wider range of friendly users, and will make Chess.com the more desirable option for people who are faced with so many choices of which chess platform to use.
That's why I chose to create new visual solutions for different elements from Chess.com which are already built into the current UX.
I tried to find new visual solutions for the dashboard and replace the existing three-dimensional icons with flat ones.