Case study – UX/UI Redesign concept

Chessable.com

Introduction

 Chessable.com is a learning platform for users that want to improve their chess skills. The platform is using the spacing  effect (spaced repetition learning) to enhance the learning experience for the users. This is the most effective method of learning certain skills, short studying sessions, spaced over time. The most known product applying this method for teaching is Duolingo. Duolingo is using spaced repetition learning to teach their users language (this has proved to be very effective), Chessable.com is using the same principals to teach chess. 

 The changes I propose are a product of user data I have collected from the Chessable.com forum and user opinions on reddit. I have also suggested general UI/UX principles that should be applied to basically every digital product on the web in 2019.

This case study will show you that many problems can be solved with very simple solutions. These problems may not look very important if you look at them isolated from each other, but combined the solutions will work together to make the product feel more streamlined, more intuitive, and as a final result, increase the learning effectiveness offered to the user. 

Tools & resources

Affinity Designer
My vector-/pixel tool of choice, for creating concept designs.

Index

1. Chessable.com – UI Overview

2. Problems / Solutions / Improvements

    2.1High priority problems
       
Dark mode
           Control panel
           Settings menu

       Chessboard color themes
       Resizable chessboard
           Coordinate system
       Piece sets

   2.2 Analysis tools
       Squares and circles
       Arrows

3. Final words

1. Chessable.com – UI Overview

Here you see the current version of the chessboard on the Chessable.com platform. This instance is where the user is encouraged to read the study notes which explains why the move is made. After reading the study note the user will have to click the Next button in order to continue the lesson.  

This is one of the screens I will focus my case study on. It features many of the important problems that need to be solved.

The next picture (below) show you the settings menu that pop up when you click the cogwheel icon.

Throughout this case study I will be expanding the settings menu and implement most of the changes that I suggest.  

2. Problems / Solutions / Improvements


2.1 High priority problems

The research part of this case study was performed by collecting publicly expressed user opinion data related to the Chessable.com platform found on social media and the forum on Chessable.com. It became very clear that there are some issues that are expressed time after time, which means that they are serious issues that need to be addressed asap.

The problems that are expressed publicly should be prioritised first, because, they are not only UX/UI issues, they are also PR issues.

The four most commonly expressed UX concerns expressed by the users are the following:

No dark mode
No chessboard themes
No chessboard resize function
No piece sets

Four key properties that every chess platform should have. At first glance they might look like UI problems, but since the modern online chess user take these functions for granted, they are directly transformed into user experience issues.

The minimum requirements for UX design should always be, that the users will get what they expected when they sign up, download the app, or click the CTA button. We need to solve these issues in order for the Chessable.com platform to meet the minimum UX requirements.

 


Dark mode

 Everything changed when Apple announced that the new version of their operating system (Mojave) was going to be delivered to the customers with dark mode enabled by default.  

 The two most populated chess platforms today are Lichess.org and Chess.com. Both of these platforms use dark mode. Basically, the whole community of online chess users today, take dark mode for granted because of this.

Just look around, Spotify, Discord, Netflix, MacOS, Windows; dark mode is standard today. It is what users expect from products.

Before


After

This is the dark mode palette I am suggesting for the platform.

 

Modified top menu
I have also implemented some additional UI changes. You can see that the
back and pause, has been removed from the top border.  The logo and Chessable text in the top border will serve as home buttons from now on.

 Expanded control panel
The paus-, play-, back- and forward buttons will from now on reside in the control panel I have created under the chessboard. 

 Switch side functionality
In the same control panel I have also put a button to rotate the board (white-black). An option several users have requested on social media and the forums.

 Fullscreen mode
I have put a maximise button for when a user want more of a full screen experience with the chessboard, this will hide the right hand column (study notes / lesson notes). This function will mostly be used by mobile users. To get that extra size of the chessboard they will hold their devices in portrait mode, or press this button.

 Book rating – Placement
I have moved the Rate this book stars to the top section by the author and book name. This is a more intuitive placement.

 Maximise lesson instructions
I have put a maximise button in the lesson text area for those that want to focus on the reading. Clicking this one will make the board smaller and text section larger.

 Next button – Placement
I moved the Next button and Study this move…-text box to the right, under the lesson text. It feels more intuitive to have the controls setup like this.

 Dark mode top menu icons
The fire-, ruby- and bell icons in the top bar is redesigned to work better in dark mode.

 Typography 
I have changed the typography to be a bit more easy to comprehend. The most noteworthy is the font change and that I have changed the text size of the book name.


Appearance settings

This section does not need much explanation. The users can change their time zone if they are travelling. They can select which language they prefer. They can turn dark mode on and off. I also decided to add a color blind feature for the users that prefer it.


Chessboard settings

Chessboard color theme selection

This is a function that users express a desire for on both Reddit and on the forums. Most competitors offer their users this functionality, so the users expect it to be included in the product. 

Chessable.com should provide at least a couple of chessboard color themes that the users are most likely to have encountered in their daily chess routine online.

I have provided a couple of examples of color themes that might appeal to the users of Chessable.com. I have taken inspiration from the most common themes I see used by streamers on Twitch.tv, playing on Lichess.org and Chess.com.
 

Chessboard color themes

Click on a thumbnails to see a higher resolution example.

Resizable chessboard functionality
This is a high priority issue. Many users express the need for this function publicly. I have decided to take the Lichess.org approach and made a slider control to adjust the size of the chessboard.

Material difference
This function would make it easier to see how the material balance between white and black is. Sometimes your aim is to fight over a square, sometimes it is to fight over material, sometimes you fight for position, etc. This function makes it easier to figure out what you are fighting for at the moment.

Coordinates
As you can see on the screen cap, the Chessable.com platform is using a coordinate system that displays the coordinates inside the squares of the chessboard.

 The coordinates are overlapping the pieces, this makes the product look rushed, it gives the user the impression that the product was released prematurely. It also reduces whitespace within the square. The information (coordinate + piece + eventual arrow/square/circle) presented in the squares becomes too dense. Dense information is confusing to the user and therefore, induces negative effect on the learning efficiency.

Therefore, I added a button to turn the coordinates on and off. This is also a way to free up space to make the chessboard larger for the players that don’t need the assistance of a coordinate frame.

The picture above is showing you the current coordinate system used by Chessable.com.

The picture above shows the coordinate system I suggest. The text below will tell you why I came to this decision.

Above is the Chessboard settings section again, as a reminder since we have two more elements to discuss.

Mark last move

This is a function that is important for beginners, but can be a distraction for experienced players. In the Two Knights Defense example I am using, you can see the last move by white is marked by yellow squares and blacks last move is marked by blue squares.

I added a button to turn it on and off.

Show legal moves

While enabled, this option is letting the user see all legal moves a piece has access to when the piece is selected. The legal moves will be represented by grey semi-transparent squares.


Pieces settings

Various piece sets to choose from

This is a function that many users ask for on the forum and reddit. Just like the example with the chessboard color themes, this is a function that the users expect since, they are used to having it in all of their other day-to-day chess software.

Below you will see two chess piece sets I have created to give the Chessable.com platform a more unique touch.

I have decided to go for one design inspired by, the most popular chess piece design, the Chess.com cartoony style that many users prefer.

Move animations
I added a button to add move animations on and off.

 Auto adjust for dark mode
The cartoony version has two different sets of black pieces, one with and one without white outlines.

 


Pieces set 1


Pieces set 2


Sound settings

Extended sound controls

I have added a lot of sound controls that the platform can benefit from. In my opinion every chess platform should have some different sound themes to choose from.

The rest of the controls are pretty self explanatory.


Study settings

Review- and Learn speed settings 

Simple sliders for control of the speed options, much like they are today on the platform. No major changes are needed.

Automatic first move
This is a function I want to include in the platform. For users that want to have the decision of when to start the lesson after it has loaded.

Full sequence at end of lesson
This is a function I would like to add to the platform. I often find myself learning all the moves of a sequence, but at the end I want a repetition of the full sequence, from first move until the last. I want it as a confirmation that I actually remember the full sequence.

Email notifications
There should be an easy way to turn on and off the email notifications for when the user has new moves available for review.

2.2 – Analysis tools

This is how the analysis tools look in the current version of the platform.

Overview 
The analysis tools used in chess (squares, circles, arrows) are the tools at the teachers disposal for communicating abstract ideas to the student.

These symbols can be drawn in five different colors, green, red, yellow, blue and grey.

Opportunity to become new industry standard
The analysis tools that the competitors offer, are all lacking in the details. It appears to me as all developers have settled with semi-good solutions.

This is a great opportunity to become the best in the industry!

Colored squares and circles 


Wrong layer order

The first problem I want to solve is the issue with the unintuitive layer system. In the current platform the pieces are located on the bottom layer, this has the effect of making the analysis symbols to appear on top of the pieces. The pieces should be on top of the colored squares and circles in order for the board structure to be as easy as possible to comprehend. 

Color theme

The colors used in the current platform look outdated and doesn’t fit the platforms otherwise modern palette. The modern user is expecting a modern palette. I have chosen to go with the most known palette for the colors in question, the Google logo palette of 2019. 

Transparency gradients 

The transparency gradients applied to the yellow and blue squares in the screen capture above, has an outdated look. I wonder what the purpose of them are, and when I wonder what the purpose of something is, that in itself means that the purpose is not realised. I have removed the transparency gradients in my solution.

Resizable squares

I will also implement a function for making large squares if the user holds the short key for drawing a square and move the cursor over the chess board. This is a function that could visualise king chase areas, influence over certain areas of the board, etc.

Here is my improved system for coloured squares and circles. The middle row of grey squares with a lower opacity is symbolising legal moves for the selected piece (the rook).


Arrows

Arrow layer system
In the current version of the platform the arrows drawn on the top layer. I will change it so that the arrows are located under the starting piece, but above the rest of the pieces. This will make it easier to see which way the arrow is going and it makes the UI more clean.

 I have chosen to ditch the transparency of the arrows, except for the arrow head, or when an arrow is drawn over another piece.

Below you will see and example of how my analysis tools compare to the current Chessable.com version. I have made the same setup as in the example that has followed us through this case study.

Arrows on their own
Below you can see, how the arrows look when they are drawn on their own without the interference of pieces.

Complex arrow systems
I have made a system for when many arrows are directed against the same square or the same piece. In most versions of arrow setups from competitors, there is really no system to deal with this issue.

My system is not perfect, but it is a good start to explore this uncharted territory.

Below you will see what happens if four arrows face the same square from four different directions.

Four arrows, different direction
This is how it looks like when four arrows come from the other directions. 

Eight arrows
Let’s up the ante! Let us see what happens when eight pieces (from eight different directions) have arrows that are facing the same square. 

What do we got so far?
Now we have, four systems for how multiple arrows can face the same square. Below is an illustration of these systems. Note, that one system is a combination of the two four arrow systems two systems. That system can only be used to draw three arrows.

Multiple arrows going the same way
This is a very tough nut to crack. My solution is certainly not optimal, but it is way better than nothing.

My system for what happens when two arrows are drawn in the same direction, overlapping each other, is color based. I will make part of the arrow change color, it will illustrate that one additional arrow is drawn within the same arrow.

Let me illustrate what I mean with the picture below. Arrows are drawn, starting from the green covered squares. They are all drawn to the destination squares marked with red circles. On the yellow squares stands another piece, this piece also has an arrow drawn towards the same destination square (red circle). In the last example a third piece is introduced standing on the blue square, this piece also has an arrow drawn to the destination square (red circle).

As you can see, the nuance changes in half of the arrow as the arrow passes the pieces standing on the yellow squares. In the example with the blue square, yet a new nuance is created as the arrow passes this piece.

Every time there is a nuance added to an arrow, it means that it has a new arrow drawn from a square the original arrow passes.

If one of the arrows has a destination square that is a shorter distance away than the others, then the nuance that was created while the arrow passed under that piece will, end on the destination square that this arrow was drawn to.  

Multiple arrows going the same way, different colors
When the arrow leaves the second piece, the arrow willz have a part of it filled with the color that was drawn from the second piece.  See an example in the picture below. 

3 – Final words

Unleash the potential
Chessable.com is an amazing product, but it still has many flaws when you examine it through UI and UX glasses. This whole case study is based on only two screens from the Chessable.com platform alone. However, what I hope that I have shown through the case study is that many of the problems has easy solutions.

 The dark mode palette I suggest, in combination with the analysis tool changes, would put Chessable.com on par (UI wise) with the major chess platforms (Chess.com & Lichess.org).

Long term potential (coaching platform)
The potential that I see with Chessable.com long term, is the potential to make it the number one chess coaching platform. It has such an ideal setup for it, coaches can pre-prepare courses for the students, they could pre-record video presentations, they could have live lessons and study sessions. Chess tutors need a platform to promote their services, a place where students go to look for tutors. Most people dream of passive income, and chess tutors are no exceptions.

 If Chessable want to become the go-to-platform that online tutors decide to use, then they have to fix many of their UI and UX issues. Improve the analysis tools to make the job easier for both students and tutors. 

 The competition between the coaches, if they operate on the same platform, could make the quality of coaching content sky rocket. In my opinion Chessable.com should try to become the marketplace for chess studies, both live studies and pre-prepared courses.  

 Most important untouched issues

There are still many problems that I haven’t touched in this case study, problems that need to be addressed first thing after fixing the high priority issues I have pointed out. There are especially two UX questions that stand out (and they are closely related to each other). Both of them are widely discussed online.

Offline mode
Incentives to go PRO (subscribe)

Premium features
Offline mode is a definite must. Chess is played world wide and many users does not have the luxury of using mobile data freely. It is also, heavily connected to the other issue, what are the incentives to go pro? Usually going pro means getting rid of ads, and offline mode. The incentives need to be clear, they need to be easy to understand.

Dark mode
I know that there have been discussions about making dark mode a premium feature, to me that seems a little risky. Like I have stated before in this case study, every user today expect dark mode to be available, free versions and premium versions. If the team decide to head down that road, then I suggest giving every user a 30 day trial of premium mode when they sign up.

Free book rotation
Another incentive to go pro could be to have a Free book rotation, many online games have this feature (in different forms, usually free hero rotations in micro transaction games), many users are familiar with this system. Make some paid books available for a week, then comes new books. If people liked the book they started studying they will probably buy it when the seven days are over, it takes more than seven days to learn most books. 

Account linking 
One feature that Chessable.com would benefit greatly from is account linking to Lichess.org or Chess.com. That way the platform will know the rating of the user, and could have algorithms for suggesting and promoting  beneficial books that suit each users individual skill level.