Hyperion

Overview		Challenge		Role
This personal passion project stemmed from wanting to do something futuristic after the Ubisoft NEXT 2020 UI Challenge. I also wanted to delve further into futuristic UI as it was one of my interests and something I heavily looked into when I was working on my piece for the Ubisoft NEXT UI Challenge.		Futuristic UI has always been visually interesting from a design standpoint but also suffers from usability. Looking at FUI in movies, I saw a trend that FUI is designed to look good but not functionally great. This posed the question of how might we create an FUI suited for video games?		This was a personal project, which took two months.

Delving into the world of futuristic UI and HUDs

After the Ubisoft NEXT competition in May 2020, I wasn’t satisfied with my HUD mock-ups. I had ideas which never came to light. Although, I could use those ideas to create a concept HUD as a portfolio piece. I decided in July to work on this project, experimenting with futuristic UI and (more) After Effects.

My final HUD Mockup from the Ubisoft NEXT competition

My vision for this HUD was to use futuristic UI in a game setting. From doing a bit of visual research, I noticed that most FUI is generally unusable from a UX standpoint and used often in movies as more of a visual piece as to something functional. This was my goal for this project, to create a HUD that is functional while retaining the futuristic UI look.

The second idea was to base the HUD around a battle royale, as it was an area that I was interested in and wanting to do more FPS styled games. The concept for this is a sci-fi battle royale game based on multiple large ships type maps, rather than an open world.

Analyzing current battle royales and more

I started by looking into different battle royales such as Apex Legends, PUBG, Fortnite, Crucible, and Call of Duty: Warzone. I noticed that most of the UI in the games are quite boxed in rather than floating (Call of Duty was an exception). I was particularly interested in more diegetic aspects of the UI, as I saw that most battle royales had UI that was very functional but wasn’t too aesthetically pleasing. I feel that Apex Legends does this great with their UI, creating a unified look among different widgets of the HUD and making it functional.

As I started on the project, I kept in mind two things:



	Overall design of the entire UI		Functionality of each widget

My goals for this project was to create a design that would work in a battle royale, while keeping the widgets functional and easy to read. The idea is to keep things easy for the player, so they can easily identify certain areas of the UI quickly (in battle). Other goals that I had in mind was to experiment with certain aspects such as the party and hp/ammo widgets.

Experimenting with FUI

Since this was my first time delving into futuristic UI, I took a deeper look on how it is used in different forms of media, such as movies. As previously mentioned before, I noticed that FUI is generally unusable from a UX content and used as a visual aid than anything. I looked at a few movies such as Star Wars (the recent movies), Bladerunner 2049, and Pacific Rim (both movies), and saw that the FUI used is quite complicated.

Version 1 of HUD

My first version of the mock-up was based on a boxed look, I wanted to keep things clear and simple, although this didn’t look particularly great. It seemed to be more of a “frame” around a box, rather than a FUI HUD. I shifted gears and went for more of a “helmet” HUD style look and using lines to depict certain areas of the UI. I used radials to show the health and ammo bar, as a visual aid plus using numbers instead of bars, so that the player can read the information quickly and accurately.

Version 2 (line art only) of HUD

I was very inspired by Lone Echo, a VR game that I’ve played and loved. I really liked the overall aesthetic and the small details in the UI around the ship plus how it looked. I experimented with different ideas, but this proved a little bit challenging. My iterations involved simulating a helmet HUD, where information is primarily on the sides and the bottom. I realized that this initial design was a little too big, as it looked like it took too much space (since the UI had a lot of information). Later on, I realized that it was crowded because of the widgets that I’ve included.

Version 3 of HUD

After a few more experimentations, I softened the corners of the lines to give it more of a rounded angular look and minimized the overall UI by 10% - 15% so that it didn’t take up too much space. I was satisfied at this point, but I felt that the empty space in the bottom corners can be used in a better way, so back to the drawing board!

Version 4 of HUD

The final product

Overall, I’m very happy with the result. I overhauled the look by maximizing the space as much as possible, which involved moving to a horizonal look rather than diagonal (inverted triangle) from the previous iterations. After getting feedback from a critique, I corrected some changes such as adjusting the colour opacity to make some widgets more consistent with the overall HUD. Plus, adding a few effects such as chromatic aberration and an outer glow to soften things up.

My sketches/initial concepts…

Final mocks:

Motion concepts:

I was very happy on how the motion concepts turned out; I furthered my understanding of keyframes in After Effects and managed to create several things like animating the radials and creating a boot up sequence.

The takeaways

In the end, I achieved what I wanted to do: which was creating a HUD that was functional and visually appealing. Delving into FUI was fun and I found that sometimes making it simple really helps as some FUI I’ve seen can be very complicated. A few things that I’ve learned through this was:

Critiques can be scary sometimes

This was the first time that I got a critique from someone in the industry, rather than my peers. I was a bit nervous, but I learned quite a lot from the critique that I got! Even though it was a bit scary (I was super nervous), it was nothing but positive and constructive feedback, which I took to improve my piece further.

Motion is (still) king

Enforcing my designs with motion was something I finally understood, when I worked on my mock-ups from the Ubisoft NEXT challenge. I didn’t really focus on motion too much as I put it as a second priority than anything. In this project, the realized the importance of using motion to show what your UI is supposed to do and how you envision it.

Practice makes perfect!

Using After Effects was a bit daunting but after a bit of practice and tutorials, I started to understand how keyframes worked and how to use different effects to my advantage. I learned quite a bit of After Effects and even though I’m still a novice to it, I’m constantly learning new things every time that I use the program!