Tools: Adobe Suite (including Adobe XD), Miro, GitHub, Unity
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.
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.
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.
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).
Previewing the HUD
Above: Artboard in Adobe XD showing the final HUD mockup.
Below: Previewing the UI elements imported into Unity.
Below: A peek at my Adobe XD file. I always keep things organized while working through design iterations.
Art & Branding
Illustrations & Icons
I used Illustrator to create graphics like the game controls and the game launch icon.
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.
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.
I then exported the assets out, imported them into Unity, and helped implement them.
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.
Final Screens
Gameplay
A peek at the gameplay:
Takeaways
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."
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.)