My Role:

Product Designer

Teammates:

3 Full Stack Engineers + 1 Audio Engineer

Duration:

3 months

Snap! Crackle! Pop! You sprint out of your cottage to investigate the ruckus outside and to your dismay, find not a Rice Krispy treat on your porch, but that your once-peaceful village has been set ablaze by treants, commandeered by the treacherous Treant King.

Forest Defenders is a medieval fantasy, 2D top-down dungeon crawler where up to two players must yield their weapons to save their village.

RPGs are my favorite genre when it comes to video games so I was really excited to get started on this project, especially being a novice UI / UX designer at the time. My teammates let me have a lot of creative direction, which allowed me to really hone my skills as I was learning to master user flows, mockups, and prototypes on Figma.

Initially, we wanted Forest Defenders to be a 3D, turn-based dungeon crawler that emphasized co-op gameplay with 4 unique class options. However, given our strict time constraints with this being a class project for my peers over at SFSU along with my own academic obligations at UCLA, we realized our ambitions were a little too high for completing a video game from scratch within 3 months and had to make some small tweaks. Nonetheless, we achieved the majority of our goals and only made a couple minor changes, as we switched the playstyle from turn-based to real-time to improve engagement and simplified our 3D atmosphere into a 2D one because the art style better complemented the type of gameplay we wanted.

Challenges for me:

  • Learning the ropes on Figma and fine-tuning my eye for UI design

  • Teaching myself about UX design and its laws, and applying my knowledge for the first time

  • Working asynchronously with peers from another school

Step 1: Creating the Flow

This project marked my first time collaborating cross-functionally with full stack and audio engineers as a UI / UX designer, and our remote workflow was very efficient as we set up video calls once or twice a week and also kept written communication on Discord to give each other project updates and assign new tasks.

In the beginning, I took it upon myself to sketch out the user flow of the game as the engineers and I were discussing it so that there would be a tangible record of the flow for the team, and also so that I could have a grasp of how many frames and buttons I needed to make. Here’s what I came up with:

Step 2: Forming the Base Layers

After running the flow by the engineers, I sketched low-fidelity mockups on Notability to map out the layout for each screen and then filled in the details to transform them from mid- to high-fidelity on Figma, as I designed graphics and buttons that were suitable for our medieval theme.

Step 3: Filling in the Details

Since our game was going to be for PC players, I learned about button states during this project and created 48 primary, secondary, and tertiary buttons in total to reflect when the player is static (i.e., not interacting with the button), hovering, or clicking on a button, respectively. I made sure to apply Fitts’ Law by making them large enough, as well as spaced-out enough, so that users could accurately select them with ease.

Creating the menu screens was the main bulk of my work; I had 6 in total: the Main Menu, Multiplayer Lobby, Character Selection (one for each of the Ranger and Warrior classes), Player Death, and Player Victory. In my flow I had 8 total which included the Pause Menu and In-Game screens, but given our time constraints the final prototypes were aimed to be part of our stretch goals instead.

Using Jakob’s Law to create familiar layouts, I was inspired by games like Diablo III and Fire Emblem Heroes when creating the prototypes because their interfaces are very simple in design yet intricate in detail, and also because our engineers took inspiration from the Divinity series for the overall gameplay. As different forms of RPGs and period pieces, those three games had overlapping similarities which made them all good references to keep in mind while creating ours since our expected audience would consist of fans of fantasy RPGs.

Overall, this was a super fun project to work on! I was really fortunate to have teammates that trusted me to take the reins on a lot of the creative direction despite it being my first project as a solo UI/UX designer, as being able to learn the ropes on my own early on allowed my skills and appreciation for UI/UX design to grow and blossom.

What the project could improve on:

In the case that we had more time to work on this project, I think we would have been able to achieve the initial aspects that we wanted to initially incorporate.

As for my role, looking back I would have liked to experiment more with shapes and textures on Figma because a lot of my designs kind of appeared flat despite having intentional shadows and highlights.

I would have also liked to design the high-fidelity prototype for the gameplay UI, but I knew that at the time it was best to leave it to the engineers because it was more of a priority to deliver a functional game over adding complex designs, which would have taken too much time given the deadlines we had.

Next Up:

Grim →

Previously:

← Joyn