Select Page

Self Care Inventory Screen

 

Moodboard    Wireframes    Hi-Fi Mockups     Prototype

In July 2025 I became a Mental Health First Aider after completing a course with MHFA England®.

I strongly believe that video games are a force for good when it comes to mental health; from games like Celeste and Gris, to Tetris and so many more. One of the topics we covered in the MHFA course was the importance of self care, which inspired me to create a ‘Self Care Inventory’ screen – a set of ‘items’ that a player can use to top up their ‘Mental Health (MH) Meter’ within a fictional narrative-based game.

This concept uses self care activities as a game mechanic, but with a wider goal of promoting better mental health awareness in the player’s real life too.

All UI, artwork, and designs are my own.

Moodboard

I already had a rough style in mind for my design, so I fleshed this out by researching game UIs that had a similar look and feel (both artistically and structurally), as well as exploring artistic techniques and textures that fit the style I was aiming for.

Spider-Verse art moodboard

Wireframes

I initially started sketching out simple layout ideas. Having already established the key content that I needed (inventory list/overview and selected item details) the main purpose of these wireframes was to experiment with the wider framing and presentation of the content, as well as positioning of navigational UI elements.

Battle Pass Low fidelity wireframe
Battle Pass Wireframe

After narrowing down a sketch that I was happy with, I moved into Figma to block out a basic wireframe, using a grid to ensure consistent and accurate spacing between elements. I then refined the wireframe further and began defining each area of the screen in slightly more detail.

Battle Pass wireframe development
Battle Pass Wireframe Refinement

High Fidelity Mockups

Battle Pass Wireframe Refinement
Battle Pass Wireframe Refinement

Prototype

Despite its simple design, one of the key things that I wanted to explore in my prototype was UI motion. I was keen to establish animations that were friendly and upbeat, without distracting from the overall sense of calm that I intended with my initial design.

Colourblind Accessibility Test

Protanopia
Deuteranopia
Tritanopia
Achromatopsia

© Josie Baughan 2025