Sponsored By

Chessarama redesigned: a peek into our new interface

For this chapter, we're shining the spotlight on a critical aspect of any game — the User Interface (UI).

Thalia Chiquetano, Blogger

November 16, 2023

3 Min Read
Game Developer logo in a gray background | Game Developer

Welcome back to Checkmate Chronicles, where we unveil the intriguing transformation tales behind the development of Chessarama!

For this chapter, we're shining the spotlight on a critical aspect of any game — the User Interface (UI). Strap in, as we journey from the wireframes of the past to our vibrant new designs. Ready to experience this visual transformation? 🖌️

Exploring the art of usability

The UI in a game acts as the gateway to its essence. When well-executed, it weaves effortlessly into gameplay, enhancing immersion and user experience.

Our team embarked on a mission to redesign Chessarama’s entire UI, aiming for an interface that wasn’t just visually appealing, but also sparkled with joy and improved usability.

The UI's new version boasts a cohesive design, with recurring components that create a stronger visual identity. By maintaining consistency, we've ensured that interactive elements are instantly recognizable, thus elevating the overall user experience.

A deep dive into the new designs

Main Menu: With the game title taking its rightful place and the repositioned buttons aligned to the left, our main menu promises enhanced readability, providing the perfect gateway to our game.

1-Image-Main-Menu.png

Campaign Level Select: The improvements include a clearer indication of the status of the levels (locked, completed, all challenges made), a better contrast between text and background, and a more intuitive pagination.

2-Image-Level-Select.png

Set Selection — Chess Match: On the new version, players can instantly see all sets available to select and easily identify that “Play a Match” is a button.

3-Image-Chess-Match.png

Gameplay — Campaign: On-screen displays now keep players informed about the current game mode and level. The “Close” button also features a more user-friendly text.

4-Image-Challenges.png

Gameplay — Battles: Enhanced button visibility, improved contrast, and a more user-friendly input indication system form the core of this overhaul.

5-Image-Battles.png

Results — Battles: Now there’s a differentiation between challenges that were completed previously and on the current run. Badges mark level/match completion and all challenges completion. And it is clear which chess set will be received for completing all challenges of each Battle mode.

6-Image-Battles-Won.png

Pause Menu: The revamped pause menu is more clean, with game stats removed from it (since it is now available on the Level Select when accessed via gameplay) for improved clarity and user flow.

7-Image-Pause.png

Profile: The new profile shows the player progress and stats in a more joyful way on the new layout, with more images and the information better grouped and organized.

8-Image-Profile.png

Collection: The Collection has been refined, featuring grayscale for locked items, clear unlock conditions, and an expanded set view within the same screen for effortless navigation.

9-Image-Collection.png

An interface transformed

Our UI redesign didn't merely focus on aesthetic touch-ups. Every screen underwent a transformation, raising the quality and consistency bar. Addressing previously identified usability issues, we've strived to make your Chessarama journey smoother and more delightful!

As always, we cherish the support and enthusiasm from our community. Feel free to drop your thoughts and suggestions in the comments. And if you haven't already, remember to add Chessarama to your wishlist!

Until our next chronicle, keep strategizing and enjoy the revamped experience! 💙

See you soon on the board. ♟️

Daily news, dev blogs, and stories from Game Developer straight to your inbox

You May Also Like