top of page

UI Design for the #GGJ24

Writer: Charlotte WilkinsonCharlotte Wilkinson

I was recruited onto a team for the Global Game Jam this year, working alongside Fabi, Jack, and Robyn. These are some friends of mine, who are lovely to work with, and they let me focus my time onto UI Design for the jam. I also aided with 3D asset creation once the UI was complete.


For us, the jam began at 5:30pm on Friday 26th. So it was around half-five we got on call to brainstorm. Fabi put forward a really cute, simple idea involving a spicy wee cat. The game was you pet the cat & periodically it will cronch onto you. Using a mixture of 3D and 2D assets with a diorama of a room as our environment.


Above are the final UI scenes, I created a small suite of assets including a title-logo, header font & body font, a custom cursor shaped like a mitten with two states, some toggle-able settings, a text box and content containers.


While on call with the team, I began with some super sketchy wireframes, featuring some cat sketches from Fabi.

several sketchy wireframes for in-game and menu screens for The Pet Pet Project.
Wireframes for The Pet Pet Project. Our goal was a small, simple project, so we avoided having too many settings or different scenes.

Once discussed, we thought it'd be fun to change the sliders in the settings menu into some selectable options, all of which were yes, but having varying degrees of energy (shown with boldness and scale). This was an idea Fabi suggested, to further emphasise our use of the Forrest Gump diversifier from the narrative section.


I was sure to check the contrast regularly on the project's UI early on, including later on when a set colour pallet had been established. I did this by using a black rectangle covering each artboard which was set to the blending mode saturation.


Greyscale look at games GUI for various screens
Example of contrast checking method described above.

I also utilised the web colour contrast checker on each of our suggested colour pallets, ensuring that we met Level AAA for our text elements to ensure better accessibility.

WCAG Compliance Test Result is shown, direct snippet from the web colour contrast checker.
WCAG Compliance Test Result
Level AAA - Text. This image shows is a brief overview of criterion to meet this standard.
Our in-game text would be classed as Large sample text as the smallest text is larger than 24px.

We made a cute, simple game with a 2.5D feel, blending a 3D environment with 2D character and set-dressings and cute UI to tie it together. We had a lot of fun working together on call via discord, we developed the game from Friday evening and over Saturday. Meeting up on the Sunday for a relaxing catch-up in person before the closing ceremony and play party. So, this was a lovely wee project to work on over around 24 hours, with some wonderful collaborators! You can play The Pet Pet Project here.

bottom of page