Umbrawler (a combination of “Umbrella” and “Brawler”) is a fast-paced, 3D-action brawler game designed for my Senior Project. The player is given an umbrella (which acts like a parachute) to navigate in a propulsion-based, bird's-eye view volcanic environment. The player defends themselves with a shotgun. Shoot to kill or shoot to move. Last man falling wins!
Year built: 2018
Software used: Sketch, Photoshop, and Unity
Total team members: 13
An early prototype of the 2-player split screen:
Falling with the umbrella: The player is always falling. Open or close the umbrella to adjust the falling speed.
Weapon: Each player has a shotgun as the weapon. Shoot to move using the blast from the shotgun to increase momentum or shoot to kill the opponents.
Game Type: Third-person shooter. Couch Co-op. Split Screen supports up to 4 players.
My Role: Game UI/UX Designer. Responsible for the game UI and navigation experience
My teammates - the character and environment artists were aiming for a theme that is "on the future Earth with humanoid aliens fighting each other”
As the game UI/UX designer, my ultimate goal was to take advantage of the big TV screen to design an immersive and beautiful game interface yet simple to interact with. From the beginning, I knew there were some challenges:
I looked at big gaming platforms like the Microsoft Xbox and Sony PlayStation for inspirations and found these general principles of UI Design in modern video games:
1. Usability: easy to navigate and easy to learn. A simple, consistent UI with large and bold typography will allow more players to enjoy the content.
2. Playability: easy to interact and keep track. The game should feel responsive and immersive. Universal interactions on the controllers such as:
3. Aesthetic: Clear, beautiful UI and high-resolution artworks improve the general playing experience. The combination of sound effects and visual cues is also important to draw attention
Game User Interface is different from other applications. I believe a well-designed UI allows players to interact with the game effectively with the game controller and enhances the immersiveness on the TV display. A game is made up of many components. We have the game environment, the narrative, the characters and the user interface. My ultimate goal for the game was to design a UI that allows players to enter the gameplay experience with excitement and ease and stay enthusiastic throughout the experience.
There are 4 common types of UI design in modern video games:
1. Diegetic UI: A user interface that is within the game environment itself. The UI is made to look like it is part of the game’s narrative that the character could interact with. A good example of diegetic UI is in Dead Space where the game designer had a great idea of implementing the Health Meter into the back of the character’s suit. Since Dead Space is a third-person shooting game, the player is always able to see the character’s back and keep track of the Health Meter
2. Non-diegetic UI: A user interface that is not within the game environment and story and unknown to the character. It only exists in 2D plane. In Fortnite, the game embraces non-diegetic, flat design. The character is unaware of the UI on the screen (timer, resources, the compass, etc) The flat design is minimal and clean with bright colors and icons.
3. Spatial UI: Spatial UI components exist in a game's 3D space but characters don't see them. Spacial UI is typically used in conjunction with other UI types. The components are meant to help players take more control of the game. Spatial UI components work as visual cues to help identify objects, statuses, directions, etc. In "Need for Speed Payback", the flashing left turn arrows are telling the player to make a tight turn. It's a visual cue to get the player ready for an action. The arrows are not seen by the character who is driving the car.
4. Meta UI: The components of this UI type exist within the game's story but only on the 2D plane (an overlay). Meta UI is only visible to players. For example, in "Call of Duty", the blood splash indicates the player has taken damage against the opponent.
Non-diegetic UI for Umbrawler:
We analyzed the design choices used in these popular games, identified the reasons behind it as well as the strengths and weaknesses for each design. This analysis enabled us to have a perspective and select the right UI in our game.
For Umbrawler, our direction was to go with flat design, non-diegetic UI because flat design is easy to design and be implemented in Unity by the game developers. Flat design delivers a modern, minimalist interface that loads fast on computers and less graphically demanding. With non-diegetic UI, the UI itself is not obstructed by the gameplay. Therefore, more legibility. With split screens, flat design reduces clutter and provides players with a more optimal user experience.
TVs come in different sizes and the UI needs to look great in a variety of screen sizes. During my research, I learned that unintended cropping can occur due to overscanning behaviors on older TVs. This could happen regardless of which platform the app is released on (Xbox, Apple TV, or on the TV itself). We can fix this cropping problem by simply adding margins to the TV screens.
One of the very interesting books I came across during my research was “The Art of Game Design” by Jesse Schell about something called the interest curves. In chapter 14, he described “the quality of an entertainment experience can be measured by the extent to which its unfolding sequences of events is able to hold a guest’s interest”. Compelling, successful entertainment experiences often have a similar pattern:
From the beginning (point A), the guest comes into the experience with some level of interest with high expectations. These expectations are influenced by different factors such as good marketing, eye-catching packaging or advice from friends, etc.
Then the experience starts, the guest’s interest quickly comes to point B, also called “the hook”. This is something that really grabs the guest’s attention and gets them excited about the experience. According to Jesse Schell, having a good hook is important because it gives the audience a hint of what is to come and provides a nice interest spike which will help sustain focus over the less interesting parts in the future (point C and D). If the experience is well crafted, the guest’s interest will continue to rise (point E) and occasionally dropping down (point F) only in anticipation of rising again.
Finally, at point G, there’s a climax of some sort, a grand finale to really surprise the guest. At the end (point H) the guest exits the experience with some interest left over that higher than the beginning.
So I wanted to create something similar for our game. The onboarding experience or configuration stage should have something interesting that would make players want to dive deeper into. Maybe a beautiful intro filled with sound effects and animation. We, as a team asked ourselves how to create an attractive experience for our game:
With my research findings, I started designing the very first screens that players get to see. I wanted to keep the Main Menu small and manageable at first:
The Intro Screen is the very first screen the player gets to see. For a more continuous interaction, the player would press “A” from the Intro Screen to enter the game experience.
An early version of the sound effect to be put on the Intro Screen. (by Jason Pierre-Louis):
People want to get to the gameplay as quickly as possible so by placing the highlighted "Play" button right up top and pre-selected (Screen #2) and with the player's thumb is already rested on button A on the controller, the interaction has become smoother.
A HUD (Head-up display) is an in-game user interface that allows players to navigate, find information, and accomplish goals right from the gameplay. In Umbawler, there are 3 major in-game visual elements:
The Ultimate Meter is a user interface element which displays the percentage of the character’s superpower progress the player has achieved. When the Ultimate Meter reaches 100%, the player can activate it to gain a superpower determined during customization.
The Ultimate Meter will slowly fill over time, without any interactions and it is located at the bottom centre of the in-game display.
I created different design concepts. My goal was to just create as many designs as possible then put legibility and simplicity into consideration.
The character’s health bar indicates the remaining health of the player’s character. The character loses its health when it is shot by the opponents. The same idea applied to the umbrella when it gets shot to make the character lose altitude.
The shotgun ammo indicator shows the remaining ammo of the character has. There’s a waiting period (recharge period) before the shotgun can be reloaded.
We designed Umbrawler to be played by multiple people gathered around the same screen to compete with each other. The more players join the game, the smaller screen real estate gets. Therefore, finding the appropriate split screen layouts for the game is important. But there are many split screen types and in game design, I wanted to make sure all players have the same screen real estate to make it fair.
I looked at other popular games to see their approach on the split-screen designs as well as people's opinions on discussion forums and social media such as Reddit and Youtube. The most 2 common split screens are horizontal and vertical. Each type has its pros and cons and really depends on the game itself that players prefer one over the other.
For example, Horizon Chase Turbo uses horizontal Split Screen because players needs to see the road in landscape to track the opponents. Horiozntal Split Screen also allows more HUD elements to be displayed on the split screen.
I brought up the split screen discussion with our game developers and showed them the pros and cons of each design.
Pros:
Cons:
Pros:
Cons:
For Umbrawler, we choose vertical split screen for these reasons:
Though we wanted to playtest the split screen design in the near future to see how players react to the vertical design. We also discussed the option of letting the player choose either vertical or horizontal split screen in settings, but this feature would be implemented in phase 2 if more players refer horizontal split screen during playtesting.
The rough sketches of the early split screen designs:
At this point, game developers have created a minimum viable product (MVP) that is playable to test the early design ideas.
Playtesting was to get valuable feedback from real players and to validate my design decisions. My role was to observe the players navigating the game and to figure out where the game worked and where it didn't. I conducted Unmoderated Playtesting where I let players play the game by themselves without help or instructions. This led to unique observations, helping me understand how players interact with the UI and the controller.
I split the playtesting into 2 smaller sessions:
Playtesters were asked to rate the experience from 1 to 10 with open-ended questions that are based on 3 separate topics:
1. Simplicity:
2. Efficiency:
3. Design:
Playtesters reported that navigating the UI was simple and straightforward. Some playtesters said the in-game UI elements needs more work on the arrangement and spacing especially in the split screen designs. Playtesters wanted more room for gameplay and that the team should focus on redesigning the Ultimate Meter and health bars arrangement.
The Ultimate Meter was placed on it own in the early prototype that caused obstruction to players' view especially in 3-player split screen. By combining the Ultimate Meter with the Health Bar, we freed up some space.
Color Coded Character Customization:
High-Fidelity Mockup (in order):
Closing thoughts:
Thanks for reading. Our Senior project was the result of collaboration and hard work. This 9-month project was a challenge for each of us. In the beginning, we came together in hopes of creating something fun and I joined the team with no game design experience. I didn’t have a clear direction or process but I wanted to challenge myself. As a UI/UX designer, I knew simplicity and easy-to-use products was my top priority and thanks to my advisor that I got to make my vision come to life. I also appreciate my teammates for working alongside me. This extensive project was a good design exercise and I'm thankful to be part of it.
Credits:
.svg)