180-Seconds: A Firefigher's Call

Context

180-Seconds is all about choices and consequences. Arriving at the scene of a fire, you will have only 3-5 minutes to rescue people from a burning building. You must decide what to prioritize once inside. Can you save everyone or will your choices seal the fate of those depending on you?

Roles

  • UI Design
  • UX Design
  • Programmer
  • Gameplay Design

Project Duration

May 2024 – July 2024

Tools

Unreal Engine 5    Figma

Adobe Illustrator    Adobe Photoshop

Adobe Audition   Gencraft   Elevenlabs.io

Summary

This action game emphasizes arcade-style gameplay, focusing on making quick decisions and their consequences. Spending too much time on a single task could jeopardize the overall goal of rescuing people. Players often face choices like saving one person while risking the lives of three others. Thus, the interface is designed to provide essential information instantly. It features a modern, engaging design inspired by the Iron Man in-suit HUD, with animated transitions and dynamic data feeds displaying current room conditions and objectives.

How do I create an interface that feels like it has depth and response to your gameplay?

To answer question study was required. And playing Iron Man HUD scene in slow motion to analyze each piece of their unqiue display process.

The final solution is shown below – read on for more in depth look at the process.

Final Design

Project Goals
Design a spacious, open view for players while providing essential information.
Enhance team interaction through on-screen notifications.
Display the player’s progress clearly and succinctly to promote replayability.

Project Process

To accomlish our goals, we used an iterative design process.

Planning and Requirements: Initially, the requirements lacked clarity, with certain information presumed necessary but ultimately overlooked by players during gameplay. Consequently, we conducted testing sessions to gauge actual usage during casual play.

Analysis and Design: We devised interfaces we deemed essential or aesthetically appealing, drawing inspiration from established conventions in classic and contemporary shooters.

Implementation: The new interfaces were integrated alongside major updates, allowing for ample feedback periods between iterations.

Testing: Through announced testing sessions on Discord, we assembled small groups comprising individuals who had provided valuable feedback previously, as well as new players for fresh insights. Session recordings facilitated subsequent evaluation and review.

Evaluation and Review: While many iterations yielded positive responses, some changes proved insufficient or went unnoticed, shedding light on players’ focal points during gameplay versus interface feedback. Adopting a strategy of incremental adjustments, we tested various interface setups over weeks, sometimes opting for removal to streamline the experience and prevent information overload—from excess to just the right amount.

User Play Testing the UI

We sought input from players early in the development process. However, since the game hadn’t been released yet, we needed to actively recruit testers. After analyzing Steam charts and conducting third-party genre research, we targeted PC gamers aged 30-50 who play shooter games at least twice a week, have a preference for realism and military themes, and are active in other gaming communities.

To find these players, we searched through existing Call of Duty, America’s Army, and SOCOM gaming groups. After obtaining permission from group leaders, we reached out to offer the opportunity to participate in the Portable Ops beta testing phase.

Recruits were invited to join the Portable Ops Discord Channel, where they received an introduction to the game, and individual and group testing sessions were scheduled. During these sessions, my brother and I observed as the players engaged in matches, providing vocal feedback via Discord. We also recorded numerous sessions for later evaluation, focusing on details and transitional actions.

UI Research

We categorized elements based on two standards: “Immediately” and “Eventually.” This classification distinguishes between information crucial for the current moment or else the player risks losing out, versus information that the player may want to access but has the luxury of time to search for.

Immediately Necessary

Damage Inflicted: Players requested instant feedback regarding the damage dealt to enemies.

Action Required: Players appeared to lose track of crucial issues like running out of ammo. Initially, we aimed for immersive gameplay by providing minimal information. However, this led to the opposite effect, as players struggled to keep track of their ammo and weapon status. To address this, we positioned the information off to the side but ensured it remained constantly visible.

Generative Brainstorm

We utilized online collaboration through Discord sessions to efficiently share our thoughts and suggestions regarding interface changes. Throughout numerous iterations, we primarily focused on implementing subtle adjustments in each version.

User Interface – Streamlining

In the end, we opted for an incredibly streamlined interface that facilitated smoother gameplay immersion for the players. They appreciated feeling a greater sense of purpose in their in-game roles. It was a win-win situation!

Version 3

Final Version

Impact

After countless iterations and revisions, I’m confident that our ultimate interface effectively communicates crucial information in a seamless and polished manner. The complaints and troubleshooting concerns raised by our playtesters vanished once they were able to easily access the information that had previously been unclear.

A surprising revelation for me was that the majority of players were not interested in intricate details. They simply wanted assurance of their progress and clear instructions on accessing their unlocks. The specifics of how or why seemed irrelevant to them. With this insight, our playtesters began spending the majority of their test game time actually playing!

Design elements in this FPS game

. . .

Mobile Casino style game in Mario Style

. . .

Classic UI for Card collection game

. . .