GAME SCREEN OPTIMISATIONS

World Chess \ Jul 2023 - Aug 2024 \ Product Designer

When I joined World Chess, my first task was to improve the core element of the platform — game screen. I reached out to the support team and saw a pretty big number of complaints about the game screen being reported. Players were confused by how matches ended, what their game results meant and where to go next

The layout was especially difficult to use on mobile because key buttons were off-screen and the game analysis feature was hidden way below the chess board.

* This case study reflects my contributions to the product’s design during my time on the project. All product names, visuals and trademarks belong to their respective owners. The final implementation, current appearance, and future updates are controlled by the company. My responsibility extends only to the design work presented here.

Process

I analysed the full flow from how a game starts, ends and could be transitioned into the next one.

I listed all possible user states in FigJam like logged in, guest, free or paid and defined what each of them should see at every stage.

My goals were:
— Keep the game continuous. Players shouldn’t need to leave the screen or search for a new match elsewhere on the platform.;

— Increase free-user conversion. I wanted to show non-registered players how many rating points they could have earned to motivate signup;

— Highlight PRO account benefits. I decided to see result messages to tell free users what official FIDE title they would have received with a PRO account.

Design system contributions

I also participated in setting up a foundation of our design system. I started with game-related components. The game screens reused similar patterns with slight differences, so we worked with developers to turn them into reusable components like result banners, chess notation and analysis panels. It took more time at first but later saved hours: screens behaved the same on every resolution and new features could reuse the same logic.

Banter blitz

After a major redesign of the platform in spring I got back to working on a new engaging feature for game screens called Banter Blitz. It’s a live format where regular players can challenge professional chess champions for quick games. My role was to design the experience from both sides: the player and the champion. 

I gathered requirements, analysed similar platforms and mapped every step like creating a session, joining a queue, waiting, playing, taking breaks and finishing the stream. These user-flows and wireframes helped me and the team understand logic and potential technical requirements.

I designed the full interface: queue management, different states for anonymous, free, and Pro users and responsive layouts for web and mobile. Every screen and control was documented for implementation to avoid guesswork by dev and QA teams.

THE REDESIGNED GAME SCREEN MADE THE END OF A MATCH SIMPLE TO READ. IT BECAME MUCH MORE OBVIOUS FOR PLAYERS TO SEE THE RESULT, RATING CHANGES, AND A CLEAR NEXT STEP BASED ON THEIR ACCOUNT TYPE AND GAME OUTCOME. THE ANALYSIS NOW LIVES IN A COMPACT BOTTOM SHEET THAT STAYS ACCESSIBLE WITHOUT BLOCKING THE BOARD. AFTER THE UPDATE, THE SUPPORT TEAM REPORTED A DROP IN COMPLAINTS.