Warframe is a free-to-play online multiplayer game that blends action, RPG, and third-person shooting. In the game, players control members of the Tenno, ancient warriors awoken to a war-torn future, using Warframes and weapons to complete missions. With over 50 million registered players as of 2022, Warframe has become one of Digital Extremes' most successful titles.
Problem Statement
The game's HUD (Heads Up Display) is packed with information, and as a newcomer, I'm still getting the hang of it. I've observed similar concerns from fellow players on Reddit and Discord. I believe I can improve and streamline the HUD for a cleaner appearance, while also adjusting the aesthetic style to better suit a sci-fi theme.
Role
Visual Designer
Project Objectives
- Simplify the HUD to minimize visual clutter and enhance gameplay efficiency.
- Explore design options to capture a futuristic sci-fi ambiance in the game UI redesign.
Project Challenges
While abrupt changes may not resonate well with the fanbase, I aim to explore alternative designs to assess if a sci-fi theme aligns effectively with the game's identity during the UI redesign.
Process & Inspiration
I scoured the internet in search of inspiration for the redesign of the game's UI. My goal was to bring a strong sci-fi atmosphere to the design. After hours of research and consideration, I put together a moodboard to outline my ideas and began working on the actual designs. The project was a personal effort, giving me the freedom to fully express my creativity and bring my vision to life.
Colors and Font
When choosing a color palette for the redesign, I aimed for minimalism, using as few colors as possible to keep the UI simple. The primary color was inspired by the NASA orange space suits. For typography, I sourced a techy font from the Internet which was free for personal use and paired it with a plain sans-serif font for the body text.
Defining the HUD
Before I start creating my design, I wanted to take a closer look at how the heads-up display (HUD) works. I'm breaking down when and how it shows player info, messages, and level details. Imagine it like sorting puzzle pieces before putting them together. By doing this, I can figure out the best times to show important info and when to keep it less noticeable. This way, players won't feel overwhelmed with too much info or left in the dark about what's happening.
With this plan, I can make sure my design works well and doesn't disrupt the flow of the game. So, armed with this organized approach, I'm all set to dive into designing, making sure everything clicks together just right.
Design
Start up Screen
I removed the login screen in the startup as it was redundant to log in twice: the launcher and in-game.
HUD: Freeroam
After my analysis of HUD, I separated it into various states to cut down on the information being displayed at a time and only kept the things I felt were necessary for the player to know.
HUD: Mission
If you are playing a mission then you will be after the see the primary and secondary objectives and your squads health, if you are in one.
Rank up & NPC Notifications
In my new designs all the information was on the left side, so I pushed the NPC notifications on the right so that the player don't get an information overload when they look towards the left side.
Arsenal Screen
The new Arsenal screen shows the player stats and incorporates nicely with the new theme of the game and feels complete, rather than the old screen.
Upgrade Screen
Warframe allows a player to upgrade weapons, etc. using mods. New designs have increased the whitespace and feels more open and readable than the old screens.
Warframe uses unique patterns to show different variants of the mods, this is a great way of information visualization as shown.
Settings Screen
The New settings screens introduces a new interaction to the game. The idea of the screen was to make the player feel like they were in space. That was the inspiration for this screen.
Learnings & Reflection
Designing a video game was both thrilling and tough. I had to find the right balance between cool ideas and making things work well. At first, I struggled to make my designs look as polished as the games made by pros. The original design had lots of tiny details that overwhelmed me. I had to use what was there or create my own stuff, and I had to be flexible. As time went on, I learned that even if I couldn't be as fancy as the experts, I could still make the main idea and structure much better. I started appreciating how video game interfaces are made, showing important stuff clearly and fitting the game's style, even though it's not always easy to do both.
Although I know there's room for improving my redesigns, I'm pretty happy with how I balanced practicality and creativity. I'm really interested in how video games and design come together, and this project was a good way for me to try my own creative ideas. This experience has made me even more excited about future projects and exploring more in the world of video games.