Third Power

Details:

Time: 3 months, July - Sep 2022

Role: UI Design

Skills: Concept Development, Lo-fi and Hi-fi Mockups, Graphic Design

Tools: Adobe XD, Photoshop, Illustrator, After Effects, Miro, Unity, GitHub

A tiny icon of the main character's head from Third Power. She is wearing a black mask over the lower half of her face and a snazzy hat on top.

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.

View Third Power on Steam.

Ideation

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.

A screenshot from the browser app Miro. The label "Art Direction" is at the top. There are 3 sections beneath it, labeled "General Art Direction Notes," "Character/Enemy Design Moodboard," and "UI Design Moodboard." In each section are screenshots from games and notes.

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.

Screenshot from Miro showing a group of 3 sketches. One sketch features the design of the cube which became central to Third Power's game mechanics. Another sketch shows a feminine character design that looks gothic or harlequin like. The third shows a UI element like an eye opening and close over a player's head.

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.

A screenshot showing Irene's Adobe XD file with various screens and UIs for the game. There is a close up shown of one area, highlighting how Irene made annotations documenting a design decision about font colors and effects for text used on the Podium dialogue screen.

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.

A diagram. On the left we see the two player characters of the game, the human thief and the cube, with curved arrows drawn between them to imply transforming between them. On the right is the UI modal designed for the HUD with a similar concept: an icon for the cube and an icon representing the thief (showing just her head) with vector curved arrows pointing to and from each character. There is an adjacent icon depicting a computer mouse with the left mouse button highlighted in orange. Beneath this modal is the text "Transform."

A mockup screenshot of what the game would look like with the switch characters modal appearing in the lower right hand corner of the player's screen. We also see other UI / HUD elements on the screen, like text stating the player is on Level 12, and a modal reminding the player how to rotate the cube left and right using the Q and E keys.

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 UI hint box that looks like aged paper, with ragged edges and a subtle, pleasant geometric pattern printed on the paper. This hint box has the text "Jump" in the middle, along with an icon of a spacebar. An arrow points from the hint box to a close up image showing the paper texture in more detail. Another arrow points down to a screenshot from the game. In the screenshot, the player character is running while one of these hint boxes in the HUD displays "Run" with an icon of a shift key.

A UI modal for a Settings menu, with the same paper texture as the hint boxes seen earlier. We see sliders for Master Volume, SFX volume and other settings.

A UI modal showing credits which can be scrolled with a scrollbar.

A handful of UI elements required a glowing effect.

A button replicated 3 times to show its different interactive states (default, hover, and pressed.) The button is a diamond shape in grey with gently raised sides, and a geometric rune in the center that glows orange when pressed. We also see two text elements, stating "Game Saved" and a death feedback note for the player. Both texts are orange with an orange glow, and they're encapsulated with futuristic or cyber-like square designs.

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.

The sketches and final colored versions of 4 stained glass window designs. The 1st shows the cube from the game, with an eye watching over it and hands hovering above it. The 2nd shows the cube floating, with DNA like structures around it and many hands raised in praise. The 3rd shows the cube in the center of a swirling storm, with human-like figures being thrown around as in a tornado. The 4th shows the cube being watched by an eye, in front of a door, with spears pointing at it.

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

The cube character from Third Power, floating and casting a shadow beneath it.

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.

The thief character from Third Power, standing and looking at the viewer.

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.

Third Power

Puzzle Platformer on Steam | 2022

Challenge

Context