Redesigning Cassette Beast’s UI
As a UI/UX designer, I always look for ways to grow and learn. I’ve been designing websites and apps for over a decade now. While I still enjoy doing this, variety is the spice of life. I wanted to challenge myself and try redesigning Cassette Beast’s UI.
I have nothing but the utmost respect for the designers and developers of this game.
This article is in no way, shape, or form meant as a criticism towards Bytten Studios. I’m well aware that they are a small studio and creating a game is always a tug of war regarding resources and priorities. I have nothing but the utmost respect for the designers and developers of this game. This is merely my opinion about where I feel the UI has room for improvement, as well as a thought experiment about which design choices I would make if I were in charge of the UI.
I’ve been a big fan of creature-collecting games ever since the moment I got my hands on Pokémon Red. I’m quite certain that it’s a form of nostalgia. Trying to chase back the feeling I got when I first played the first and second generation of Pokémon. It was on that quest for nostalgic dopamine, that I stumbled upon Cassette Beast.
After playing a couple of hours, I found that the UI was a bit inconsistent and I pondered on how it could be improved.
The game got glaringly positive reviews and I particularly liked the 2,5D pixel art style. Needless to say, I bought the game in a heartbeat. But after playing a couple of hours, I found that the UI was a bit inconsistent and I pondered on how it could be improved.
So I opened up Figma and started taking screenshots from the game. I wanted to get as much documented as possible as that would inform me on how to move forward.
It was clear immediately that there was some room for improvement. I started working on some starting blocks for an improved UI: Colour Palette, Typography, and Iconography.
Preparation
1. Color
During my gameplay, I noticed insufficient color contrast at certain points. An example of this can be found in the title screen. The active color is shown on a black background. Why is this important? Having a high contrast improves the legibility of your text for everyone, including users with colorblindness.
I opted for the 60–30–10 rule for the new color palette.
I always use the Contrast Checker Tool or Color Review to see if we have sufficient contrast. As you can see below, the purple color is fine for WCAG AA, which means it can be used for large text. However, it fails for WCAG AAA and shouldn’t be used for small text.
I opted for the 60–30–10 rule for the new color palette. This rule states that the color usage in the user interface should be easily divided in 60% — 30% — 10%. It intuitively acknowledges the natural hierarchy, with the dominant color (60%) capturing initial attention, the secondary color (30%) guiding users, and accent colors (10%) pinpointing interactive elements. This resulted in something like this:
As you can see, I changed a lot. The main colors are dark gray with a hint of purple and off-white. I also simulated how default and active text would look with these backgrounds. Both comply with WCAG AA and AAA.
In a normal 60–30–10 rule, you would only find 1 extra color but I opted to change that 10% and divide it in 4 different colors. This gives us more leeway when adding elements that grab the user's attention. These colors are inspired by those currently in use.
2. Typography
I couldn’t find what fonts Cassette Beast’s UI uses at the moment, so I set out to search for a worthy alternative while still honoring their design choice.
I love that they use a condensed sans-serif for text but I feel we can improve legibility and overall cleanliness by changing it a bit. During my search, I fell in love with Barlow Condensed. It’s an expansive font family (weights from Thin to Black) and I loved the curvature.
To increase legibility even more, I’ll be using this font with a stroke and drop shadow if needed. This will add depth to our design.
Cassette Beast uses a fantastic marker font in their logo. It’s a reference to writing in marker on audiocassettes. However, this font is never used in the UI. I get why. It’s hard to incorporate this into the design without it attracting too much attention. That shouldn’t stop us, though. That’s why I’ve chosen to add Atomic Marker. It’s a fun marker font that I’ll be using for certain titles. It’s an eye-catcher so I’ll be using it sparingly.
3. Iconography
I felt like we had the biggest inconsistencies here. Icons for types had a white background, icons for status ailments had a big stroke. I’m not sure why this design choice was made but I felt like I could improve the most here.
Status ailments weren’t really clear as well. So I tried to improve on this by simplifying it a bit.
4. Pattern
I wanted to create a pattern inspired by the audio cassettes and found this one black cassette with a grid of dots on the bottom.
I’ve played around with thickness of the dots and spacing and ended op settling for an thin dot grid with sufficient spacing:
Redesigning Screens
Homescreen
Personally I would change the navigation and remove the black background & sharp corner. This shape is only used here so I would just remove it for the sake of consistency.
I already talked about the lack of contrast, but I wanted to take a moment and talk about the icons used here. It’s clear they want to draw inspiration from the buttons on a cassette player but that’s setting yourself up for even more inconsistency as you can see with “Language”. It’s the only item with an icon not visible on a cassette player because there’s no icon that can represent it.
Using the forward icon “Credits” is also a bit of a stretch so I would remove this as well. I changed the start screen to this:
I’m still using the play button, but only to highlight the active item. The grid background adds a depth to the screen to show the navigation in a clear and concise way.
Settings
There’s a couple of things that come to mind when I see this screen. I’m not sure why they ask the users to use a button to change to audio settings. There’s not a lot of settings so dividing it seems a bit redundant. The settings continue down as well but there’s no indication or scrollbar.
I was also a bit confused that “Back” is positioned at the utmost right position while “Apply & Save Changes”, which actually submit the settings, is positioned to the left. It felt really counterintuitive.
Keeping all this in mind, this was the endresult:
Game Select
There’s a lack of depth regarding the cassettes and background. I also feel like the cassettes are a bit to basic in comparison to the rest of the artwork. I personally find it weird that I have to use “Tab” to go back. “Esc” seems more appriopriate.
This might be because of something I don’t know. If someone has an explanation why this might be, I’m willing to change my mind. Overall, I also think that the layout is a bit basic and can be improved by playing around.
This is what I came up with:
In-Game
I really wanted to remove the redudancy in the designs, that’s why I changed the shape in which the map is shown. There are also 2 health bars shown, but it’s unclear which one belongs to which character.
Keeping these points in mind, I opted for this design:
Battle
I feel like there’s a missed opportunity to show the type here. Yes, the icon is visible but by adding the text, you decrease the time people need to link an icon to a text.
The blocks underneath the healthbar has a shine, which is odd because it’s something that’s not used in any other element for as far as I know.
Personally, I would put the information of the Cassette Beast closer to the monster.
I used the icon as a watermark, while showing the type as text. The blocks underneath the healthbar now has ‘AP’ before, just to clarify what these blocks represent.
Move Select
I really love the idea that the move list is like a track list. There’s only two things I would change here. Add bigger contrast for active and finetune the design.
Here it is:
Other Screens
For the sake of brevity, I’ll onlyshare the before and after. I’m open for discussion and feedback. So, please, don’t hesitate to comment or ask questions.
Obtained Items
Menu — Map
Bestiary
Quest Log
Conclusion
I had a ton of fun redesigning the User Interface for such a lovely game. Ofcourse, this is just my opinion on how to improve the UI and add some consistency across the line. I would love to hear some feedback from users, fellow UI/UX designers or anyone in the game industry.
I will continue to sink my teeth into Game Design and UI in Videogames. It’s fun and a change of pace for me. So I might be writing some other blogposts soon. I’ll make sure to share it on social media but if you’d like to follow my journey, don’t hesitate to follow me on Medium.
