Together with an incredible team of visual and game designers, I designed a new online game for The Puzzle Society.
Switch Spots Game Design
2022-2023
Product Design • Branding • Game Design
Background
This puzzle game was designed for The Puzzle Society, an exclusive online gaming website that houses games such as The USA TODAY Crossword, Sudoku, Jumble, and more. In 2022, The Puzzle Society began concept-ing and creating in-house games, one of which was Switch Spots. I worked alongside the creative director, games director, and external game-developing team to design the product.
Rules of the game: Flip specific dots on the board so that only one color remains—but be strategic, you can only flip rows of dots at a time and you only have a certain number of moves to get the job done. There are three levels per game and each level increases in difficulty as you progress.
The Goal
The goal was to create an intuitive game with a seamless UI experience.
I began by creating lofi designs for the game. My main goal here was to explore the functionality of the game and begin to narrow down the UX. How do users flip a row of dots? How do they know which direction they are flipping? Once I had the basics narrowed down, I started to play with the look and feel of the game.
Styling and Design
The game’s design consists of a soft gradient color palate, rounded buttons and elements, and a rounded geometric sans serif typeface, all of which help to create a modern, accessible design.
UX & UI
The game's core elements consist of a carefully crafted "status bar" positioned at the top of a users screen (image below, left), a central game board occupying the middle (image below, middle), and a menu bar situated at the bottom of a users screen (image below, right). Each component serves a specific purpose, contributing to a seamless user experience.
Status Bar: The status bar serves as an informative visual aid to reflect the user's progress within the game. Designed to remain non-interactive, it showcases the user's advancement through various stages, tracking metrics such as the number of attempts made, total moves executed, and the current stage the user is engaged in.
Game Board: The game board, occupying the central area of the interface, serves as the primary play area for users. Users actively participate in gameplay by strategically flipping dots. By prioritizing usability and intuitive design principles, the game board facilitates seamless user interaction, ensuring players can fully focus on the gameplay without distractions or confusion.
Menu Bar: Situated at the bottom of the interface, the menu bar offers users access to a range of essential functions that allow them to navigate the game's additional features. The menu bar incorporates settings, info/help, reset stage, and skip stage. These thoughtfully designed elements empower users with control and flexibility, enabling them to tailor their gameplay experience and seek assistance when needed.
Messaging
The game incorporates a variety of modals and popovers strategically designed to relay essential information to the user at different stages in the game. By using the '“visibility of design status” rule of Usability Heuristics, we implemented messaging with appropriate consistency and timing, creating predictability and trust within the game.
Accessibility
Because this game heavily relies on color, I made sure to design a colorblind version for accessibility. This version of the game keeps the colored dots and adds high contrast shapes on top. A user can enter or exit this mode through the settings.
Want to try out the game for yourself?
Takeaways
Don’t be afraid to design outside of the boundaries! I ended up designing a game board that was styled quite differently than how the game designers sketched it out in their brief. This resulted in the game designers rethinking the mechanics of the game, which gave the game more complexity.