Skills: Concept Development, Lo-fi and Hi-fi Mockups, Graphic Design
Tools: Adobe XD, Photoshop, Illustrator, After Effects, Miro, Unity, GitHub
Challenge
Craft UI for a unique puzzle platformer game.
Design HUD & menus.
Assist with UI implementation.
Assist with creating game art assets.
Create branding materials, e.g. a game logo.
Context
Third Power is a puzzle game created and published by the Plot Armor Studios team. We are a fully remote, distributed team of 15 with a passion for games.
In this game, the player must switch between playing as a human thief or a cube with mysterious powers to complete the game.
I began by facilitating a collaborative brainstorming session using Miro to ideate on the overall art direction of the game, including the UI. I shared tools like Coloors and the Game UI Database to help the team find inspiration.
I also assisted with visual concept development. Here are some of my sketches for the design of the two main characters (thief & cube), and a UI concept for a sneaking mechanic.
UI Design
I specifically used Adobe XD for creating mockups and documenting iterations & design decisions. For the actual design work, I juggled between XD, Photoshop, and Illustrator.
HUD Design
In Third Power, players need to frequently switch between two character modes (a human thief and a cube) to successfully navigate platforming elements and solve puzzles.
To remove the burden of remembering how to switch between the characters, I could design a persistent reminder element for the HUD.
Unfortunately, this idea came to me after production had already ended - thanks to reading Celia Hodent's "The Gamer's Brain" and the section on using persistent UI to reduce players' cognitive load. It's a lesson I'll carry forward in future situations!
I designed other visual cues for the HUD however, including:
a level progress cue
a visual countdown timer for timed puzzles
a reminder on how to rotate the cube (using the Q & E buttons, or shoulder buttons on a controller)
Watch these elements in action:
Menus & Dialogue Boxes
I hand-painted box elements in Photoshop and created icons in Illustrator and XD.
These were used for pop-up menus as well as "trigger hints" - tooltips that popped up in key moments of gameplay to remind players what to do.
A handful of UI elements required a glowing effect.
UI Implementation
Whenever possible, I worked collaboratively with the lead developer to implement the UI. Below is a brief clip of us working on the Main Menu. (No sound in video.)
Art & Branding
Game Art
I designed these stained glass windows, taking direction from our team's narrative designer, to assist with world building in the game environment. The team liked them so much, we ended up using them in the final cutscene of the game.
Watch a timelapse of me adding color to the green window (and see it in Unity):
Branding
I also designed the game's logo, in addition to other branding & marketing elements like the game trailer, social media posts, banners, and more.
Takeaways
What Went Right
Speed of Delivery: While this project was longer than a game jam, there was still a lot to deliver in a relatively short time frame. I was able to quickly produce UI for developers to implement and test out, even if that UI needed additional polish later.
Collaboration: This is one of my favorite aspects of working in game development - you never really design alone. I enjoyed seeking and implementing feedback from the team.
UI Style: With a few iterations, I was able to find a unique style for the UI. Given more time, I would've refined and added more fun hand-painted details.
Lessons Learned
The Value of UX: Although UI was my main responsibility for this project, if I could do it again, I would put additional effort into polishing the user experience.
With low UX maturity in the team, testing and iteration of the game experience was not made a top priority. The results of this can be seen in Third Power's Steam reviews, where players' expectations for the experience were not always met.
Now, I feel more confident about identifying and advocating for opportunities to apply UX methods, even in a lean game dev cycle.