Breathe
Converting a card game to digital.
The Idea
Breathe is a push your luck bag emptying game themed around mental health (which is only a clever subversion if you're familiar with the bag building genre). In the game, players have cubes of various colors in their bag (their "brain") and, drawing them one at a time, can either commit to that color's action or let the unused thoughts build up in their brainspace. If too many "negative thoughts" (the grey cubes) show up, or if they get three in a row of any color, they get "overwhelmed" and must place all their cubes back in the bag and gain another negative thought. The actions are on double sided cards, that get more powerful the more cubes you commit to them (effort you put into that action). For instance, the blue card representing air has an Inhale side, which puts the cubes on it back in your bag and draws in extra blue and yellow (energy) cubes. Then the card rotates, and the Exhale action becomes available. That action removes cubes from your bag but gets you orange (focus) cubes, then rotates back to the Inhale side.
The game is tactile and meditative, perfect while having a panic attack or feeling overwhelmed, or as a fun way to reflect on various actions one can take to improve their current mental well being. Converting this to digital form, specifically as a phone app, seemed like a way to bring the idea to a much wider audience than just physically publishing it would. Making it digital also makes it easier to test balance en masse, perhaps even with machine learning, to ensure it's actually balanced.
Figma
I used Figma to mock up the card design, making heavy use of the components feature. The icons came from Kenney's board game icon pack, as a placeholder. They aren't quite Race for the Galaxy level of cryptic at least:
Both color blind friendliness and readability of the icons are concerns. The colors seem to pass for most types, but definitely the orange and green are too close for those with protanopia and deuteranopia. Additional passes are necessary to address this.
In the meantime I proceeded to mock up the design for an iPhone, trying to get a sense of the overall mood and feeling from it.Â
Seems to fit okay, except, of course, that obtrusive camera cutout! But made a little smaller they would work great as a starting point.
I then brought them in to Rive to prototype interactivity and animation:
This is all that's happened in Breathe so far! But it shows how a design evolved from paper to interactive elements.