Chess.com Redesign

Collaborated with a team of four UX/UI designers to redesign Chess.com, focusing on enhancing user experience and interface. From initial research and concept development to final design execution.

My Role

In this project, I worked as a UX/UI researcher and UI designer, conducting extensive research to gather user insights and identify key areas for improvement. I collaborated closely with the team to translate our findings into effective design solutions, contributing to the overall aesthetic and functional enhancements of the Chess.com platform.

Scope
  • Research
  • Branding
  • Research
Team
  • Shey Naveed
  • Neha Ambati
  • Asraa Khan
  • Raine Cai
  • Adriana Escalante
Duration
  • 8 - 10 Weeks
  • 2023
Tools
  • Figma
  • Miro
  • FigJam
Location
  • Toronto

Why Redesign Something That Works?

Redesign Chess.com to deliver a user-centric experience while modernizing the platform's visual design.

As a long-time chess player, I've always appreciated the depth and strategy of the game. When a teammate suggested redesigning Chess.com during a brainstorming session, it instantly caught my attention. The idea brought back memories of the redesign contest I had seen back in 2021, and I realized this was a unique opportunity to contribute to a platform that has been a part of my chess experience. The chance to enhance a tool I regularly use and admire made this project especially meaningful to me.

The Introduction

"Design is not just what it looks like and feels like. Design is how it works."

- Steve Jobs

What Is Chess.com?

Chess.com is a leading online platform dedicated to the game of chess, offering a comprehensive suite of tools and resources for players of all levels. Founded in 2005, the site provides a variety of features, including live and turn-based chess games, puzzles, lessons, and articles. Users can play against others from around the world, join tournaments, and participate in an active community of chess enthusiasts.

Additionally, Chess.com offers instructional content from top players and coaches, making it a valuable resource for improving one's game. With its user-friendly interface and robust feature set, Chess.com has become a go-to destination for millions of chess players globally.

The Problem

The current design of Chess.com, while functional, lacks a modern and cohesive visual identity that resonates with today's users. The user interface is cluttered, making navigation confusing. Additionally, the design feels outdated, which can detract from the overall user experience.

The Solution

These design shortcomings create barriers to engage players, limiting the platform's potential to provide an intuitive and enjoyable chess experience. A redesign is needed to address these issues, focusing on creating a more user-centric, aesthetically pleasing, and accessible platform.

Desktop (Current Website)

Home Page

The Chess.com homepage serves as the central hub for users, featuring the latest chess news, trending games, and personalized content. It provides quick access to live games, puzzles, lessons, and user profiles, ensuring players can easily navigate to their desired activities. The homepage also highlights upcoming events and tournaments, connecting users with the vibrant Chess.com community.

New Game

Clicking "Start New Game" opens a menu with options like blitz, bullet, daily chess, and correspondence games, catering to various play styles and time preferences. This feature allows users to quickly select the type of game that best fits their skill level and desired pace on Chess.com.

Sidebar Navigation

The sidebar navigation on Chess.com provides quick access to essential features such as playing games and solving puzzles.

Users can easily navigate to different sections of the site, including live games, puzzles, lessons, and tournaments, ensuring a seamless experience for engaging in various chess activities.

Play
Puzzles
Learn
Watch
News
Social
Sidebar Navigation

The sidebar navigation on Chess.com provides quick access to essential features such as playing games and solving puzzles.

Users can easily navigate to different sections of the site, including live games, puzzles, lessons, and tournaments, ensuring a seamless experience for engaging in various chess activities.

Play
Puzzles
Learn
Watch
News
Social

Mobile (Current Mobile App)

The mobile version of Chess.com offers a streamlined experience for users on smartphones and tablets, ensuring accessibility and functionality on the go. It maintains key features such as live games, puzzles, and lessons in a responsive layout optimized for smaller screens. Users can easily navigate through tabs and menus to play games, solve puzzles, and access educational content, making it convenient to enjoy chess activities anytime and anywhere.

The mobile version retains the same core functionalities as the desktop site, providing a consistent and enjoyable chess-playing experience across different devices.

Homepage
Puzzles
Learn
Watch
More

The Research

"Research is formalized curiosity. It is poking and prying with a purpose."

- Zora Neale Hurston

The complex navigation and outdated UI frustrate users and stops them from exploring the different features the website has to offer.

What We Did

We conducted interviews with 5 dedicated Chess.com users to delve into their favorite features and what drives them to use the platform. Key insights from these discussions were compiled into organized cards, and as a team, we categorized this valuable information to better understand user preferences and needs.

What The Research Told Us
  • Place prominent CTA's on the landing page.
  • Divide the navigation into 3 categories:
    Play, Learn & Social.
  • Modernize and update the style guide.
Interview Quotes

"Firstly, the very first one, I mean, what's actually my score is, I want to know, but I can find it somewhere. It should be like on the face, it should be like the very first thing I should click on the profile, it should say that these are the number of games. So that could be the best thing if it could happen."

- Sunny

"I just like seeing a bigger board on the desktop. So that's why I use the desktop. I just don't the mobile it's like you're kind of on the go. And if I if I'm rushed and I make a mistake, then there's no point in playing it because you're making stupid blunders. So just the web one I prefer more."

- Shant

"It'll be interesting if the chess celebrities today, who have a lot of influence in the chess world, had specific videos breaking down famous games. Even beyond celebrities, any chess teacher could do this. It would add value by offering in-depth analysis and learning opportunities."

- Kamau

Card Sorting

Following our research phase, we proceeded with card sorting to systematically organize and categorize the insights we gathered. This method allowed us to group similar information together, helping us identify patterns and prioritize user needs effectively. By structuring our findings through card sorting, we gained a clearer understanding of the most significant aspects influencing user interactions on Chess.com.

All Cards
Sorted
Play
Learn
Social

Wireframing & Design

"Good design is making something intelligible and memorable. Great design is making something memorable and meaningful."

- Dieter Rams

After defining the problem and redesign goals, we worked on low fidelity wireframes.

These initial designs focused on structuring the layout and functionality of the interface without detailed visuals. It allowed us to outline key elements, interactions, and navigation flows based on our research findings and user insights. This phase served as a foundational step before moving into higher-fidelity designs and prototyping.

It was important to include the main CTA's on landing page to improve efficiency and reduce confusion for new users.

Mobile Wireframes

Sign In
Homepage
Add Friends
Profile Page
Nav Menu

It was important to include the main CTA's on landing page to improve efficiency and reduce confusion for new users.

Mobile Wireframes

Sign In
Homepage
Add Friends
Profile Page
Nav Menu
Desktop Wireframes
Homepage
Play Now Menu
Add Friends
Profile Details

Style Guide

To ensure a cohesive and visually appealing redesign for Chess.com, my team and I created a comprehensive style guide. This guide served as our visual language blueprint, ensuring consistency across all elements of the platform. It detailed our choices for typography, color palette, iconography, and UI elements, providing a clear framework that unified our design efforts and streamlined the development process. By adhering to this style guide, we were able to maintain a consistent and professional look throughout the redesign, enhancing both aesthetics and user experience.

Final Designs

With our comprehensive style guide in place, we moved on to creating high-fidelity mockups for the Chess.com redesign. The style guide provided a clear framework for our design elements, ensuring consistency and cohesiveness across all screens and interactions.Using the defined typography, color palette, and UI elements from the style guide, we crafted detailed mockups that accurately represented the final look and feel of the platform. These high-fidelity designs allowed us to visualize and fine-tune every aspect of the user interface, from the layout of the home screen to the intricate details of the game boards and player profiles.

Mobile

Sign In
Homepage
Add Friends
Profile
User Stats
New Game
Choose Game

Desktop

Homepage
Homepage (Signed In)
Add Friends
Scores & Statistics
Profile Details

Project Reflection

Working on the Chess.com redesign project was an incredibly rewarding experience. Collaborating with a talented team of UX/UI designers allowed us to combine our strengths and perspectives, leading to a more robust and innovative design. The teamwork and open communication we maintained throughout the project were key to our success. This collaborative effort not only enhanced the final product but also provided valuable insights and learning experiences for everyone involved. Overall, it was a great opportunity to grow as a designer and contribute to a project that holds personal significance for me.

Learnings
  • Importance Of Consistency
    Establishing and adhering to a style guide ensures a cohesive and professional design.
  • Collaborative Synergy
    Working with a team of designers brings diverse perspectives and enhances creativity.
  • User Centered Design
    ‍Regular feedback from users and stakeholders is crucial for creating a design that meets their needs and expectations.
  • Iterative Design
    Continuous iteration and refinement are essential for achieving the best possible outcome.
  • Effective Communication
    Clear and open communication within the team is vital for maintaining alignment and resolving challenges.
Next Steps
  • Future Projects
    Apply the lessons learned from this project to future design challenges and team collaborations.
  • Prototype Development
    Develop an interactive prototype to showcase the redesigned platform in action.
  • Continuous Learning
    Stay updated with the latest design trends and techniques to continuously improve my design capabilities.