Online Chess Platform
Visual Design Project
Duration
Role
Tools
3 months
Visual Designer,
UX Designer
Figma, Illustrator
The Opening
Lichess is one of the biggest online chess platforms. It caters to players all around the world with varying levels of skill. Currently, Lichess has a large user-base of about 90 million users a month. I chose this particular platform as I love playing chess and I wanted to give Lichess a visual overhaul to make it more intriguing and visually inviting while staying true to its sophisticated identity.
Existing Website
The existing website, although offering very high utility lacks visual consistency, clarity, and an interesting visual identity. Through usability testing, I also found out that new users to the website had some trouble with navigation, understanding terminology, and were overloaded with information.
Heuristic Evaluation
I decided to go with Nielsen’s heuristics because they offered a holistic review of the website. It provided evaluation on areas such as minimalist design, help, and documentation, which I felt were areas with the most opportunities for improvement in the website’s design. The website’s design caters well to returning and long-time users but does very little to seem welcoming to new users or offer help on how to use the interface. Another important area is error recognition. The website does not have dialogue boxes that lets the user know an irreversible action is about to take place, and hence the users can accidentally click on things with no way to recover from that.
Usability Study
For my usability study on Lichess.org, I decided to conduct a remote moderated session using Zoom Meetings, which allowed me to record the sessions for later analysis. I began by creating a dedicated account on Lichess.org, despite the option to use it as a guest, to track progress and ensure access to all features. After recruiting participants, I sent them Zoom invitations and, upon their joining, obtained consent for recording. I provided them with login details to a dummy account to start the testing. The procedure involved guiding participants through two main user journeys, broken down into ten tasks. I timed each task and asked participants to rate the difficulty of completion on a scale of 1 to 5, with 1 being difficult and 5 being easy. After finishing all tasks, I encouraged participants to provide feedback and share any thoughts on the website's usability. This approach allowed me to gather detailed insights into the user experience and interface interaction on Lichess.org.
What did I learn?
The home page: Both the heuristic review and the usability testing showed that the home page needed to be redesigned. This is the landing page of the website, so it needs to emphasize all the important action buttons, especially the actions that can allow users to get in a game as quickly as possible. The heuristic review showed that there wasn’t a match between system and real world for the play tiles. The usability study showed that most users read the page from the top left. Hence, moving the main action buttons to the left and emphasizing them was very important.
The play page: Since most users struggled to find the “Resign” button in order to resign and end the game, emphasizing the main action buttons was important. This is also the page where most users would be spending their time as players. Both the heuristic review and the user testing confirmed that there needs to be more system transparency.
The learn page: The learn page task (Task 8) had the most number of failures and users communicated that the page was disordered and difficult to navigate. The website has a lot of different resources. But users found that some were easier to access than others. Providing a singular learn page
The Middlegame - Strategy
My strategy involved identifying the identity of the website and giving it a much deserved visual flair and clarity. I went with the mantra, “Sophisticated, yet simple”. This is meant emphasize the sophisticated utility of the platform using an art deco visual languor, while strictly adhering to a simple layout and information hierarchy.
Moodboard
Color and Type
The Endgame - Solutions
I used the insights derived from the Heuristic Evaluation, the Usability Study, as well as Competitor Analysis on similar products and game UIs to redesign the website using the new Visual Design Strategy and Style Guide.
Solutions
What I've learned so far
Throughout the three-month Lichess redesign project, I learned a great deal about balancing the intricacies of website redesign while adhering to the platform's original philosophy and addressing the needs of its extensive user base. One of the most challenging aspects was to ensure that the redesign did not alienate existing users while still modernizing the experience. I honed my skills in applying heuristics and conducting usability studies, which were instrumental in identifying and prioritizing key improvements. These methods provided a structured approach to evaluate the user interface and helped me to make informed decisions about the redesign. Additionally, I immersed myself in brand strategy and visual design principles, which enabled me to craft a refreshed identity for Lichess that resonated with the community and aligned with the brand's core values. This project was a comprehensive exercise in user-centered design, requiring a delicate balance between innovation and familiarity.