SHARKMOB x TENCENT

BLOODHUNT ™ - VAMPIRE THE MASQUARADE ®

 

⚬ Video Game
⚬ Visual identity / UI / Motion

\\ VIEW PROJECT 

PAUSEABLE x USTWO

PAUSE

 

⚬ Health  / Meditation product
⚬ Brand & visual identity

\\ VIEW PROJECT 

SHARKMOB x TENCENT

BLOODHUNT

 

⚬ AAA Game
⚬ UI, AD, Motion


\\ VIEW PROJECT 

BLOODHUNT ™

BLOODHUNT

This game is a modern Battle Royal based on the world famous universe of Vampire The Masquarade ®. 
A child's dream becoming reality, as I could be part of the creation of a video game. 
For this AAA title, I have been setting the UI visual language and art direction together with the game art director, building the user experience and I helped implementing interfaces I designed in Unreal. I aslo spent time creating a design system and guidelines, for an easier management and consistency of the UI, as it was meant to be a game as a service.

During this journey, I got to learn Unreal and did integrate a few features and worked a bit with VFX for the UI within the engine.

As a personal challenge & motivation, I ambitioned to design - as much as possible - a "free from boxes" game UI, as I have the intimate conviction that interfaces in games could benefits from moving away from framing ("boxing") every UI elements. A bit like the transformation web went through along the years and in which, I feel, video games interfaces are stuck into.
I also believe it helped us blending the UI even better to the game visual language for a more seamless experience. 
Of course, this while keeping in mind a console first design approach and prioritising accessibility to meet the standards.

This game is a modern Battle Royal based on the world famous universe of Vampire The Masquarade ®. 
I helped Sharkmob designing the visual language, experience and UI, along with building a design system and guidelines.

As a personal mission, challenge & motivation, I aim to design - as much as it is possible - a free from "boxes" game UI, as I believe that interfaces in games could benefits from moving away from framing ("boxing") every componenents. A bit like the transformation web went through along the years and in which I feel video game's UI are stuck into.

COMPLETEDAug. 2021 - Jan. 2023
ROLESSenior UI / UX Designer - AD
PLATFORMS•PC/PS5
CONTEXTSHARKMOB x TENCENT

COMPLETED  Aug. 2021 - Sept. 2022
ROLES • Senior UI & UX designer - AD
PLATFORMS • PC & Consoles
CONTEXT  Sharkmob x Tencent

BloodHunt_title

For starters

The game is based in Prague where different factions / clans of Vampires are trying to seize power to rule over the other clans. Each clans have various archetypes (playable character) with their own abilities.

We based our UI on 2 design principles:
• Blood (red), mature & HBO like for the visual language.
• Console first when it comes to accessibility and gameplay.

Everything needed to be accessible with a gamepad but also with mouse and keyboard, which is a very interesting challenge, in my opinion, for any designer. During this journey, I've learned a lot regarding accessibility standards to create an intuitive UI, accessible to most players both visually and from an usability perspective.

The Art Direction

Shortly after I joined the project, my first question was: who are we designing for? Who are the players who will play this game? So not only we could propose an interface that blends in with the game's visual identity but also speaks to our player base.

Then, together with the team, we started to define our target audience based on data we collected and our own assumptions.
Thanks to a bunch of players interviews, we decided to pivot towards a more mature audience than previously anticipated. Thus, we pushed a notch higher the visual language to reflect a more mature type of content.
Below lies a short selection of concept arts I produced and post produced, to nail down the mood for the Bloodhunt™ UI.
Bloodveins & fluids quickly appeared as main components, creating the missing link between all layers of the game. From Art to UI and motion.

(In the end we even decided to use those as loading screens as people really liked them).

Skull
Exploration03
Exploration02
Exploration01
Loading04
Loading03
Loading02
Loading01
Property 1=T_UI_BP_BRU_M_PIERCINGS_01 1
Property 1=Variant12

01 — Concept arts

The UI

The UI

We were grateful to have a well established visual identity for Vampire the Masquarade, but we also wanted to propose a revisited version of it to make it unique to our game. A modern and minimal take on Vampiric/Gothic symbols, composed of thin lines and ornaments, to create a clean and minimal UI.
We wanted the red colour and the veins to be the "red thread" (as we say in Sweden) of the UI. We tried to keep it as minimalistic as possible for our various components while using the red as our accent / active selection color. 

When I started working on the UI, I quickly came to realize that, like in any digital product, there are patterns which players are familiar and comfortable with. Patterns which are resulting from the different input methods available (Keyboard & Controller). Thus, I first focused on understanding the reasoning and logic behind such patterns, so that I could decide accordingly when it is appropriate to be creative and improve them or when we should stick with established patterns.

later on, together with the UX designers, we decided to focus on a console first approach, as it would be easier to scale it to PC. We made sure to evaluate the accessibility levels of our UI to make sure it was at least matching AA standards on each screens. Finally, we also tested our designs regularly on different screens and resolution to make sure it was scaling properly.

A modern and minimal take on Vampiric/Gothic symbols, composed of thin lines and ornaments, to create a clean and minimal UI.

We wanted the red colour and the veins to be the "red thread" (as we say in Sweden) of the UI. We tried to keep it as minimalistic as possible for our various components while using the red as our accent / active selection color. 

When I started to design the UI, I quickly came to realize that, like in any digital product, there are patterns which players are familiar and comfortable with. Patterns which are resulting from the different input methods available (Keyboard & Controller). Thus, I first focused on understanding the reasoning and logic behind such patterns, so that I could decide accordingly when it is appropriate to be creative and improve them or when we should stick with established patterns.

01-Character selection
03-Perks selection
01.Customization-(Head)
TDM – Defeat 4
GameMode
TDM – Scoreboard 29

Iconography VS illustration

Keeping engaged yet relaxing

I was also tasked to create quite a few of the icons for the game.
Iconography in game is something else than in traditional product design. Somewhat a lot more fun, as it can be closer to illustration, but also more complex, as we sometimes need to create icons for unconventional features or interactions.


In video games, I have felt even stronger the need to imagine your UI in motion. If you don't your UI will feel stale and will cause a lot of accessibility issues.

For each feature, I have thus developped a Figma prototype or a motion concept with After effects if it required more advanced VFX / interactions so that we would be sure it validating our accpetance criterias and understandble by our players. 


Bloodhunt_illustration
03. Perk unlocked (lvl3)
B.Ranked Mode 13

Creating usability with motion

Keeping engaged yet relaxing

In games, I strongly felt the necessity to always imagine the UI in motion. Much more than in classic product design. 
If you don't, your UI will feel stale and will very much likely leads to a lot of accessibility issues (i.e: various states, transitions...). As a motion enthusiast, I also believe it adds this extra flare players like and which elevate your game standard. 

For each feature I worked on, I developped a Figma prototype or a motion concept with After effects - if it required more advanced VFX / interactions - so that we would make sure we met our acceptance criterias and that it is clear for our players what is expected from them. I always try to get out an early prototype as it always is a great way to test your user journey and quickly apprehend most issues with navigation or controls.
It also helped us communicating our work to game directors and developers and validate our assumptions early enough so we could pivot if necessary.

It was a lot of fun to think about how we could re-create effects or motion in the game engine and how it impacted our design work. For example, it was really interesting to play with depth (or giving the illusion of it thanks to blur) in order to create interesting transitions and feedback.


In video games, I have felt even stronger the need to imagine your UI in motion. If you don't your UI will feel stale and will cause a lot of accessibility issues.

For each feature, I have thus developped a Figma prototype or a motion concept with After effects if it required more advanced VFX / interactions so that we would be sure it validating our accpetance criterias and understandble by our players. 


Below some of the final concepts made to illustrate and validate the players journey from queuing to joining a game.

• In game HUD shortcut to queue for a game. 
• Character selection screen from "Match found" to the "Battlefield".

02 — Game queue HUD

03 — Character selection

MoreInfo

Buttons and interactive component states & behaviours

Keeping engaged yet relaxing

As we are not designing for touch screen,  I had to pay an extra attention to the various buttons states needed, to avoid any unecessary confusion, while remaining consitent with other elements and states in the UI (What's glow for? What's "Bloody"? etc.). It was a quite complex but great exercise. In the end, we decided to use glow for hovered states, and kept the veins to emphasis your selection.

By documenting our intentions, we could easily share it with the devs and keep consistency when building new components.

Buttons – CTA
Consumable Wheel – 2 – Available items
Perks – CTA
Consumable Wheel – 3 – Highlight Syringe

All in VFX :)

Keeping engaged yet relaxing

VFX - as well as motion - is of tremendous help in games and UI, when you need to convey an idea or even to notify players. Even if caught by the corner of an eye. 

Below is some VFX I did for the resonnances (additional powers) incremental system, first in AE then built in Unreal.
For these ones, we took an extra care about accessibility regarding the colors and we made sure that they would be quite different from each others for our visually impaired players.

Resonance—Melancholic
Resonance—Choleric
Resonance—Phlegmatic
Resonance—Sanguine
Rarity—Weapons-+-Collectibles

Bonus

Bonus section with various animated screen made for the game, design system snapshot, prototypes...

Season1
Season3
Season4

Thirsty for more?
↳  to projects