"Ponk! is a circular, customisable, competitive, fast-paced, colourful and high-tech tennis arcade game. With support of up to 8 players, split between 4 controllers, it's a hit at parties and sure to put friendships to the test. Designed to be easy to pick up and hard to put down!"
Since Ponk! was supposed to be a highly customisable experience, settings needed to be laid out in a way that made it super easy and straightforward for the user to understand and interact with.
Another major thing to consider is that our targeted platform was the AIE Arcade Machine. This meant that up to 8 players would be surrounding quite a small screen, and everyone had to be able to absorb the information.
Take a look at my process through some very early prototyping and idea generation in the Game Design Document:
I wanted there to be a scale to communicate visually to the player what the values they are selecting mean, as well as text value underneath to change depending on the value on the scale. Adjusting the values on a scale felt much more tactile and interactive than a simple drop-down, especially on a controller.
After a lot of thought, I realised that the best way to communicate to the player both their controller side and their player colour was using one image, which highlights in the game join stage.
The original prototype of the join game screen had the presets there already, to reduce the amount of clicks it would take to get into a game. This was eventually abandoned, and worked out much better on separate screens, even though it meant more clicks.
I experimented with slanting for contrast against the straight lines in the background, while still being readable, with different stroke weights to improve readability, and an outer glow to show which element is selected.
I had to keep in mind the background couldn't be too colourful, as the game itself relies on 8 different bright colours to differentiate between players. I chose a dark purple background to avoid taking away from the player colours, as well as fitting in with the spacey theme we were going for.
Experimenting with different layouts on the Game Over screen ended up dictating the entire game's menu layout, making it consistent and easy to read for multiple players all crowded around one screen.
A Unity Prototype suited this project a lot better than a Figma or XD Prototype - it worked a lot better if I was able to build a base version of the UI that myself and the programmers could build upon throughout the project. This version is the absolute barebones layout, and it went through many changes over the project.
At this point, Unity Prototypes are what I am most comfortable with. I'm learning how to use Figma right now, and I hope to bring all of my prototyping skills over to a different, more widely-used program.
After a lot of testing and various iterations, the UI was complete.
Laying out information in-game wasn't the only thing I thought about during this project - I also did a lot of work on communicating ideas in the Game Design Document, and I learned a lot during the process.