Umbrawler is a 3D-action brawler game developed in 2018 as a Senior Project by a team of 13 members. The game features a unique mechanic where players use an umbrella, functioning as a parachute, to navigate a bird’s-eye view volcanic environment. Armed with shotguns, players can shoot to eliminate opponents or to propel themselves, with the objective of being the last person falling.
• Continuous Descent: Players are in a constant state of free fall. The umbrella can be opened or closed to adjust falling speed, adding a strategic layer to movement.
• Shotgun Utility: Each player wields a shotgun that serves dual purposes: attacking opponents and using the recoil to maneuver in mid-air.
• Multiplayer Experience: Designed as a third-person shooter, Umbrawler supports couch co-op with split-screen functionality for up to four players.
The artistic direction aimed to depict a futuristic Earth where humanoid aliens engage in combat. Early character rigging and environment renders showcase volcanic landscapes with floating rocks serving as observation decks. Mood boards were created to align the team’s vision and aesthetic goals.
Designing the game’s UI/UX for television screens presented several challenges:
• Variable Screen Sizes and Ratios: TVs come in diverse sizes and aspect ratios, necessitating a responsive design adaptable to various displays.
• Concise Instructions: Players prefer minimal on-screen text, requiring intuitive interfaces that communicate effectively without lengthy prompts.
• Player Engagement: Maintaining excitement and immersion throughout the gaming experience is crucial.
• Split-Screen Limitations: As more players join, individual screen real estate decreases, complicating UI design.
• Controller Navigation: Designing interfaces navigable via game controllers, rather than mice or touch inputs, demands fluid and intuitive UI elements.
Drawing inspiration from platforms like Microsoft Xbox and Sony PlayStation, the following UI design principles were identified:
1. Usability: Ensure ease of navigation and learning through simple, consistent interfaces with large, bold typography.
2. Playability: Create responsive and immersive experiences by implementing universal controller interactions, such as:
3. Aesthetics: Develop clear, visually appealing interfaces with high-resolution artwork, complemented by sound effects and visual cues to draw attention.
Game UI differs significantly from traditional applications. A well-designed game interface should not only be functional but also enhance immersion, especially on large TV displays. Unlike standard apps, game UIs must support controller-based interactions, complement the game’s narrative, and seamlessly integrate with the overall experience. A game consists of multiple components: the environment, story, characters, and user interface. My goal for Umbrawler was to design a UI that feels natural, intuitive, and engaging, allowing players to immerse themselves in the action without distraction.
Diegetic UI exists within the game environment itself and is perceived by both the player and the in-game character. This type of UI seamlessly blends into the world, making interactions feel more immersive.
Example: Dead Space
• The health meter is displayed on the character’s suit, rather than as an external HUD element.
• Players naturally track their health without breaking immersion in the game world.
Non-diegetic UI exists outside the game world, appearing as an overlay that only the player can see. This is the most common UI type in modern games, as it provides clear, immediate feedback without requiring in-game integration.
Example: Fortnite
• The game’s HUD displays timers, resources, and compass information, which the character does not acknowledge.
• This flat, minimal design ensures important game information is always visible to the player.
Spatial UI exists within the game’s 3D space but is not visible to the character. It functions as visual cues that help players navigate and interact with the environment
Example: Need for Speed Payback
• Flashing arrows on the road indicate where to turn, guiding the player without using a traditional HUD.
• These cues improve gameplay flow while maintaining an immersive driving experience.
Meta UI exists within the game’s narrative but only as an overlay. Unlike diegetic UI, it is not physically part of the world, yet it conveys in-game status changes in a way that feels organic to the experience.
Example: Call of Duty
• The blood splatter effect on the screen when a player takes damage makes the UI feel like a natural extension of the gameplay.
• It signals danger and urgency without disrupting immersion.
To determine the best UI approach for Umbrawler, we analyzed various games and their design philosophies. We considered:
TVs come in various sizes and resolutions, which means the UI must remain clear and accessible across different screen formats. During my research, I discovered that overscanning—a common behavior in older TVs—can cause unintended cropping of on-screen elements. This issue can occur regardless of the platform, whether it’s Xbox, Apple TV, or the TV’s built-in software. To prevent important UI elements from being cut off, designers follow the safe zone principle, which involves adding margins around the screen to ensure that critical information remains visible on all displays. By keeping key UI components within the safe zone, we can deliver a seamless and frustration-free gaming experience across various TV setups.
During my research, I came across Jesse Schell’s book, The Art of Game Design, which introduces the concept of interest curves in Chapter 14. He describes it as:
“The quality of an entertainment experience can be measured by the extent to which its unfolding sequences of events hold a guest’s interest.”
In other words, successful entertainment experiences follow a pattern that keeps audiences engaged through carefully planned peaks and dips in interest.
At the start of an experience (Point A), a player enters with a certain level of expectation—this is influenced by factors like marketing, visual appeal, or recommendations from friends. As soon as the game begins, interest spikes rapidly to Point B—also known as “the hook”. This is a moment designed to immediately grab the player’s attention, whether it’s through a stunning intro, an exciting mechanic, or a compelling narrative element.
From there, interest naturally fluctuates. It may dip slightly (Points C & D) as the experience unfolds, but a well-crafted game will introduce new challenges and surprises (Point E) to keep players engaged. Occasional slow moments (Point F) help build anticipation, leading to a climactic event (Point G)—a major twist, boss fight, or grand reveal.
Finally, the experience concludes at Point H, ideally leaving players with a sense of satisfaction and excitement that exceeds their initial expectations.
To create a compelling experience for our game, we needed to design a journey that maintains player engagement from start to finish. As a team, we asked ourselves:
The HUD (Head-Up Display) is a critical part of the in-game UI, providing players with real-time information they need to navigate the game, make decisions, and accomplish objectives—without breaking immersion.
In Umbrawler, we focused on three key visual elements to support gameplay clarity and responsiveness:
1. Ultimate Meter – Tracks a player’s progress toward unleashing their ultimate ability.
2. Character & Umbrella Health Bar – Displays the player’s remaining health and the durability of their umbrella.
3. Shotgun Ammo – Shows the number of available shots, helping players manage both offense and movement strategy.
I created different design concepts. My goal was to just create as many designs as possible then put legibility and simplicity into consideration.
In Umbrawler, the health bar provides real-time feedback on two crucial elements: the player’s character and their umbrella. This dual-bar system gives players immediate visual cues about both survival and mobility, encouraging quick decisions during intense free-fall combat.
• The character’s health (green bar) represents the player’s remaining life. When the character takes damage from opponents, this bar decreases.
• The umbrella’s health (blue bar) indicates how much durability the umbrella has left. When shot, the umbrella loses integrity, causing the character to descend faster.
The shotgun ammo indicator displays the remaining ammunition available to the player. Since the shotgun plays a dual role—as both a weapon and a movement tool—ammo visibility is critical for decision-making during gameplay.
• The numeric counter shows the current vs. maximum ammo (e.g., 6/6).
• A recharge bar visually represents the cooldown period before the shotgun is ready to reload.
• The silhouette of the shotgun provides an instantly recognizable cue for quick reference during fast-paced combat.
Umbrawler was built with local multiplayer in mind—encouraging friends to gather around a single screen and compete in real time. But as more players join, the available screen space becomes more limited, making split-screen layout decisions critical to fairness and usability.
To ensure all players had equal screen real estate, we explored various split-screen configurations, carefully balancing layout, orientation, and aspect ratios. With options like vertical splits, horizontal splits, and balanced three- or four-player arrangements, the goal was to maintain visual clarity and an even playing field—no matter how many players were sharing the screen.
I researched how other popular games approached split-screen design by exploring discussion forums and social platforms like Reddit and YouTube. Two layout styles emerged as the most common: horizontal and vertical split screens. Each has its own set of advantages and drawbacks, and the preferred choice often depends on the nature of the game. Some games benefit from a wider field of view horizontally, while others play better with a taller, vertical layout. Ultimately, understanding these trade-offs helped us design a split-screen experience in Umbrawler that felt fair and comfortable for all players.
A great example of horizontal split-screen usage is Horizon Chase Turbo. The game opts for a horizontal layout to match the landscape orientation of racing tracks, allowing players to better anticipate turns, track opponents, and navigate the road ahead. Additionally, a horizontal split provides ample space for HUD elements like speedometers, lap counters, and item indicators—without cluttering the screen or obscuring gameplay. This setup supports a more immersive and visually balanced experience, especially for fast-paced racing games.
Horizontal vs. Vertical Split Screen: Weighing the Options
To determine the best layout for Umbrawler’s multiplayer mode, I collaborated with our game developers and evaluated the pros and cons of horizontal and vertical split screens.
Pros:
• Wider peripheral view, great for spotting action on both sides.
• More space to display HUD elements side-by-side.
• Ideal for racing games and first-person shooters.
Cons:
• Limited vertical visibility, making it harder to see above or below.
• Performs poorly on ultrawide screens.
Pros:
• Offers a more balanced visual experience on 16:9 screens.
• Better suited for third-person games, where character movement is more central.
Cons:
• Narrower side views, which can affect awareness in some game types.
We ultimately went with vertical split screen for a few key reasons:
• Verticality is essential in Umbrawler—players are constantly falling from top to bottom. A vertical split lets players track their descent and surroundings more effectively.
• Umbrawler is a third-person shooter, and this layout aligns better with the character’s body orientation on screen.
• It promotes fair screen distribution and feels more natural when two players are sitting side-by-side—left player controls the left screen, and right player gets the right side.
We also explored the possibility of giving players the option to toggle between horizontal and vertical splits in future builds. Depending on feedback from playtesting, this feature could be added in a later phase to ensure the layout works for everyone’s preferences.
At this stage of development, the team built a minimum viable product (MVP) in Unity—a playable prototype used to test early UI concepts and design decisions in a live environment.
Playtesting was essential for gathering real feedback from players and validating key design decisions. My primary role during this phase was to observe how players interacted with the game organically—identifying what worked, what confused them, and where the design could be improved.
To keep observations unbiased, I conducted unmoderated playtesting, allowing players to explore the game freely without guidance or instructions. This approach gave me authentic insights into how intuitive the UI and controller interactions truly were.
I divided the playtesting into two focused sessions:
1. General Playtesting
Players went through the full game flow—from navigating the main menu and customizing characters to pausing and exiting gameplay. This helped assess the overall usability and cohesion of the experience.
2. Targeted Playtesting
I zoomed in on specific areas where design felt less confident or required refinement. These included moments like 2-player split-screen interactions or activating the Ultimate Meter, where player behavior could reveal edge cases or friction points.
To evaluate the effectiveness of the UI, we asked playtesters to rate their experience on a scale of 1 to 10, along with open-ended feedback in three key categories:
1. Simplicity
• Was the navigation easy to understand on first use?
• How intuitive did the interactions feel?
2. Efficiency
• How well could players track important in-game stats from the HUD?
• Was it easy to follow the gameplay, especially in split-screen mode?
3. Visual Design
• What did players think of the colors, layout, and visual hierarchy?
• Did the UI elements feel well-integrated into the game experience?
Key Takeaways:
Playtesters generally found the navigation simple and straightforward. However, several noted that the HUD layout in split-screen mode felt cramped—particularly the Ultimate Meter. There was a strong consensus that UI spacing needed refinement to make room for gameplay clarity and reduce visual clutter.
Combining the Health Bars and the Ultimate Meter
In the early prototype, the Ultimate Meter was positioned separately, which blocked part of the screen—especially noticeable during 3-player split screen.
To address this, we merged the Ultimate Meter with the Health Bar into a single compact visual unit. This updated layout helped us:
• Free up valuable screen space
• Improve UI legibility
• Streamline the player’s focus during intense gameplay
The new design not only saved space but also created a clearer and more cohesive visual structure for quick-glance information.
Color Coded Character Customization:
.svg)