Punch Card is a card battle roguelike which combines elements from games like Slay the Spire and Inscryption. Instead of fighting monsters, the player uses different tactics to avoid actually doing various work tasks, which are represented as monsters. The game's objective is to get through an entire week of work without reaching 100 stress.
Punch Card was created during a game jam hosted by the Portland Indie Game (PIG) Squad. The jam had a "technical theme" of "boss battle" that helped shape the gameplay and a "creative theme" of "dreams and nightmares" that guided other gameplay elements. For this jam, we thought a literal interpretation of the theme—fighting your boss at work—might lend itself to a comedic and sometimes relatable experience.
To help me set the tone for the perfect soul-sucking office, I began assembling a mood board of images and media that best conveyed this theme. The main ideas I pulled from this research were:
As fate would have it, the two games I finished right before this jam happened to be Inscryption (a card battle rougelike) and The Black Book (a card battle RPG and absolute hidden gem). With my mind already in deck-building mode, I got to work looking for inspiration from those titles as well as other popular games such as Slay the Spire and Hearthstone. The main takeaways UX-wise from these games were:
Having just finished Inscryption and The Black Book, I knew that creating a card battle RPG meant that information architecture would be crucial to a satisfying battle experience.
Once we had settled on the basic theme of the game, I set up a virtual whiteboarding session with the team's gameplay designer. We chatted through his vision for how battles would work and iterated on the combat screen via rapid sketching sessions. The key mechanics that drove our decision making were:
While we initially started with showing the player and enemies from the side view, we scrapped that in favor of a first person view because it fit into the narrative of the main character imagining their work as monsters and, based on the game's mechanics, there wasn't an added benefit to showing the main character.
Below are a few low fidelity wireframe iterations on the combat screen:
A couple days into development, I received some concept art from our team's artist. Based on this, I adjusted the placement of some of the UI elements to fit more harmoniously into the scene.
Once I was happy with the layout, I began implementing the office-inspired color palette established by the team's artist and creating high fidelity assets for the interface and card frames (the actual card art was created by someone else on the team).
While creating these assets, I made sure to layer them onto the final artwork to make sure they felt cohesive with the environment and monsters.
Once the player is done battling, they enter a sleep sequence where they either have good dreams or nightmares depending on their performance in the previous battle. The twist here is that dreams and nightmares both have their benefits and drawbacks.
Given the complexity of the battle sequences, we wanted to keep this as a simple dialogue window with different choices for the player. In the event a player would add or remove a card from their deck, we would reuse the UI for that from the battle screen.
The dream and nightmare screens were pretty straightforward when it came to creating them in high fidelity. To add some extra personality, we animated some of the text ("hell" in the nightmare and "Dream Event" in the dream). We then added a portrait of the anime cat girl seen on the main character's body pillow to the dream window and created a variant for the nightmare window that had the boss dressed as the cat girl.
To welcome players into the cheaply-carpeted, beige depths of office hell, I wanted the start screen to look like an elevator. After some initial wireframing and a brief experiment with icon-only buttons, I finally settled on the final elevator button designs, complete with braille.
During the jam we were joined by a member of the Oregon Public Broadcasting (OPB) news staff who was doing a story about the game jam. In addition to interviewing some of the team and jam organizers, they also featured some early screenshots on the OPB website along with the news story. You can find it here.
