The initial Classic Play Games UI was designed quickly and without putting too much thought into every detail.
At that stage, the important thing was to bootstrap the project, get something running that I could experiment with, and start implementing the classic board games I wanted to play. A polished UI was desirable, but it wasn’t the priority.
I wanted to validate the tools, the overall direction, and the game implementations first.
I also think this is often the right way to build things. Designing everything up front, before you properly understand the problem, can easily become wasted effort. Iterating as you learn usually leads to better decisions.
Classic Play Games has a small collection of board games, some application-wide settings, and a number of game-specific settings. The first implementation helped reveal which controls we actually needed and how the different games varied.
Now that the shape of the application is better understood, we can revisit the initial design and make the different pieces work better together: improve the hierarchy, reduce unnecessary complexity, make the UI more consistent, and generally improve the user experience.
Initial UI
Classic Play Games is built with Flutter. I started the project using the Flutter game template, and the main settings page in the application still came largely from that template.
It did the job with a few small tweaks, so I left it alone while working on the games themselves.
Each game also has a game-mode screen. Most games provide two main ways to play:
- Player vs AI
- Local multiplayer using pass-and-play
For AI games, there are three difficulty levels:
- Easy
- Medium
- Hard
Parchís is the main outlier because it requires considerably more configuration. It supports four-player and two-player games, either against AI opponents or among local players.
In two-player mode, the players also need to choose one of the two diagonal color pairs:
- Green vs Blue
- Red vs Yellow
Dots and Boxes has another game-specific option: the grid size.
Other games will probably gain a few additional options over time. For example, Chess, Checkers, Reversi, and Connect Four could allow the player to choose which color they want to play.
The initial UI worked, but two problems became increasingly obvious.
First, the main Settings page did not feel like part of the same application.
Second, the per-game configuration screens had no clear hierarchy. Game modes and mode-specific options were presented at roughly the same level, they used more vertical space than necessary, and the structure became increasingly awkward as more options were added.
The original UI, including the inherited Settings screen and the increasingly crowded Parchís configuration:
Redesigned UI
The objective of this exercise was to make the site feel like a single application rather than a collection of independently styled screens.
I wanted to replace the default settings UI inherited from the Flutter template because it no longer felt like part of Classic Play Games. I also wanted the per-game configuration screens to follow a consistent structure, with a clearer hierarchy between the game mode and the options that belong to that mode.
Another goal was to reduce unnecessary vertical space. On some screens, especially Parchís, the configuration could become tall enough that the main action was pushed out of view. The redesigned layout tries to keep the important choices visible and make it obvious what the user should do next.
The redesigned version, with a shared visual language and clearer configuration hierarchy:
This is only a first step in that direction. The project is still in its early stages. The games work, but there is plenty left to improve: better animations, better sound effects, stronger visual feedback, and smarter AI opponents.
I plan to keep working on these in small iterations, improving one part at a time and letting what I learn along the way influence where the project goes next.
If you have suggestions, drop me a line at hello@notonlybits.com.