CELL 
SHOCKED

Game Jam | 2022

A blurred copy of Irene's map illustration, with the Minecraft Dungeons game logo overlaid on top.
Details:
Time: 1.5 weeks, March 2022
Role: UI Designer, Branding
Skills/Methods: UI Design, Graphic Design, Mockups, Hi-Fi Prototypes, Affinity Mapping, Agile Project Management
Tools: Adobe Suite (including Adobe XD), Miro, GitHub, Unity
A small Minecraft-style cubic emerald icon.

Challenge

Create UI for a tower defense game.
  • Responsible for all UI/HUD Design
  • Create graphics (such as logos) and branding, for the game and itch.io page
  • Assist with creating game art as needed

Context

Cell Shocked was created for Games Jobs Live's Game Parade Spring 2022 game jam, with the theme "Every Life Counts." I worked with a fully remote, globally distributed team of 11.
Planning
On the first day, our team hopped into Miro to begin brainstorming ideas.
‍
I suggested we do a time-boxed affinity mapping session: putting every wild idea down in post-its, then organizing the notes by theme. This helped us vote on which concept to move forward with.
A screen capture of the player journey diagram, along with close ups of key sections.
Task Prioritization
After deciding on a concept and assigning roles and tasks, we went over the plan for our agile process, prepared our project board in GitHub, and established our Unity-GitHub production cycle.
Screenshots of the current screen designs for the Level Card in Minecraft Dungeons.
UI Design
Designing the HUD
To understand the art direction for the game, I stayed in tune with the team's work over Discord and drew inspiration from the visual assets the 2D and 3D team members created.

I incorporated their work into my process whenever possible, like using 3D renders of the game environment in my mockups for the HUD (Heads Up Display).
Screenshot from Adobe XD, showing Iterations on the HUD (heads up display, or the UI the player sees at all times during gameplay.)
Previewing the HUD
Artboard from Adobe XD showing the final HUD mockup. We see a variety of assets, including health bars, ammo counters, turret counters, and more.
Above: Artboard in Adobe XD showing the final HUD mockup.

Below: Previewing the UI elements imported into Unity.
Previewing the UI elements in Unity. We see a turret with a health bar above it.
Below: A peek at my Adobe XD file. I always keep things organized while working through design iterations.
A cropped screenshot showing Irene's Adobe XD file for Cell Shocked. We see iterations of several screen designs, including the main menu, the pause menu, a death screen, and more. The whole file is highly organized and well labeled.
Art & Branding
Illustrations & Icons
I used Illustrator to create graphics like the game controls and the game launch icon.
The game launch icon and the controls diagram. The launch icon shows the protagonist's head wearing eye goggles and a mask. The controls show key mapping for mouse and keyboard.
Dialogue & Game Art
While working on the UI design of the dialogue boxes, I discovered our team needed help finalizing some background art for a cutscene.
The top image shows the low fidelity working version of the cutscene in Adobe XD. We see the characters are illustrated in flat colors, the background is a low opacity exported screenshot of the 3D environment, and the dialogue boxes are in greyscale. The scene looks like two characters casually sitting across from each other and facing each other.
I took a character illustration created earlier by our 2D artist and gave it some cell shading in Photoshop.

Then I vectorized a stock photo in Illustrator and painted details in Photoshop to create a background image.
The bottom image shows the final cutscene. The characters have cell shading that makes it look like there is a glow or warm light between them. The background looks vaguely like the inside of a van or truck. The dialogue boxes have orange and purple coloring.
I then exported the assets out, imported them into Unity, and helped implement them.
A screenshot from Unity, showing the exported UI and game art assets (such as the characters, speech boxes, buttons, etc) in the assets panel. The viewfinder is focused on a close up of one of the characters as he says a line of dialogue.
Branding & Itch.io
I extended the art style of the game into the Itch.io page design to give it a cohesive and polished look.
In the top left, we see the logo for Cell Shocked. It looks like a cross between hand writing and grafitti, and is in orange and blue with a dark purple glow. On the right is an illustration of what looks like a gloopy green germ; it's one of the enemies from the game, vectorized to make an icon. At the bottom is a screenshot of the Itch.io game page for Cell Shocked, showing screenshots from the game, the credits list, a game description, and more.
Final Screens
A left arrow in dark purple.
A right arrow in dark purple.
Gameplay
A peek at the gameplay:
Takeaways
A heart shape with a dark grey 3D border in the blocky Minecraft style.
What Went Right
  • Design wins:  It was an honor to see that the user interface was scored a #2 overall by the community voting on the game jam submission page (along with so much awesome feedback!) Throughout the process, I received compliments from the team on the speed and quality of my design work (and also on how eager I was to help with any part of the project I could, haha!) I recall our 3D artist saying, "I've never had such a polished Itch.io page for a game jam before!"
  • Collaboration: I enjoyed sharing my work in progress and giving and receiving feedback from the team via Discord. It was a natural process for me, as I firmly believe in the idea that "we design better together."
An illustration of a block chest that has opened. A book is lifting up from inside and is glowing, with sparks shooting out of the chest.
Lessons Learned
  • A new experience gained: This was the first game jam I've ever participated in, so the frantic pace (and really, the whole process) was new to me. I found myself focusing on just getting tasks done as best as I could. Next time, there are a few things I would do differently:
  • Identify UX Opportunities: I noticed an important criticism in the community comments: several players couldn't tell whether their actions in-game were working or not. This is critical feedback. The right kind of feedback at the right time greatly enhances user experience. In future game jams, I would work closer with the game designers/developers as the advocate for UX; helping determine the game vision, how to communicate with players, and testing and iterating as leanly as possible.
  • Active Tutorial/FTUE: Instead of making the player read a tutorial, I would work closely with the developers from the beginning to design a proper FTUE that teaches the player in an actively engaging way. I think nailing the FTUE is important, no matter how brief a game jam is.
  • Set an Art Style: Although our team did a great job with the visuals overall, I think we would have benefitted from a Style Guide to inform our work. Next time, I would have the team spend 30-60 minutes collaboratively sourcing inspiration for the UI, 2D, and 3D aesthetics, culminating in a Style Guide everyone could refer to.
*Note: sketches in the "Takeaways" section are by our 2D artist, Caednis (aka Julia Mirae Nin.)
IntroPlanningUI DesignArt & BrandingFinal ScreensTakeaways
About
‍Projects
‍
© 2023 Irene Geller. All rights reserved.