UI/Game Designer

Portfolio
About Me & Contact
CV

GIGANTIC EXPERIENCES

Gigantic: Rampage Edition is an action packed, 5v5 MOBA Hero Shooter, where you battle against and alongside gigantic Guardians.

As a UI/UX Designer I was responsible for the design of various menu’s, skill description structure and UI animations. As well as the implementation of those descriptions and animations.

Character Builds

With the new builds feature, players are able to create and save builds before they jump into a game.

Builds are unique to their hero. They come with 2 pre-made builds and 3 slots for custom builds, allowing players to craft and name the build to fit their own playstyle.
Once the build does no longer suffice, it can get replaced, rearranged or completely removed.

The Design Process

OId Loading Screen — OId Build System (In-game Only)

Previous Issue: Too Complex

The game has a detailed skill upgrade system that allows players to tailor their heroes for the situation and playstyle. But the amount information that must be processed by the player, especially during fast paced combat, was too demanding especially for new users. Thus requiring a feature to ease the experience for casual and new players.

Build Editor

We re-used the same skill tree UX from the gameplay for a clear and familiar to use editor experience. It is accompanied by the info panel, providing details about the skill and the selected upgrade, to support informed decision making.

Selected upgrades slot into the upgrade timeline, filling each box from left to right. Players can undo their last selection, completely wipe the build, or swap the positions of upgrades on the timeline.

Build Overview

Players can access the build editor through the Builds tab on their selected Hero page, since builds are unique to their hero.

The tab provides a quick overview of the pre-made and custom builds, showcasing the order in which skills are upgraded, along with the type of upgrade. These skills and upgrade types are visualized through iconography.

Player Profile

The Player Profile, previously known as the Career’s Page, is a place where all personal data is accessed, ranging from personal achievements, to statistics, as well as profile customization.

With the rerelease, players can also view their match history, and have a dedicated tab about their rank progress.

The Design Process

Previous Issue: Clunky Flow

Gigantic has a lot of data, achievements and customization, which needs to be accessible to players.

The Profile Page, where all this info was stored, required a rework, since the previous flow was a bit clunky in use, had no hierarchy to follow, and there was more information to add, like:
Ranked info, Match History, and Game Stats (no web browser).

Overview Tab

We moved all player specific information to one location, which hosts multiple tabs for organization. It lands on the overview tab with the most important information to summ up an individual, since this is also the tab other players can view.

Players can customize their profile icon and choose which accomplishments they want to highlight through the overview tab as well.

Ranked Tab

The new Rank mode comes with its own overview page, highlighting the player’s journey and accomplishments. The information can get filtered per season, or showing data of the past 2 weeks.

This page also informs the player about important information, like the season duration or, for very skilled players, the countdown for their MMR Decay.

Badges Tab

With some changes to the spacing and the layout, we freed up more space on the side for a proper badge preview.

The enlarged badge preview draws in the player’s attention, making a change in information more apparent. The preview also acts as a connection to its information, showcasing which badge it belongs to.

Statistics Tab Mockup

We moved the statistics information from a web browser into the game.
This redesign comes with a graph to visualize the numbers of each category, making it easier to grasp someone’s playstyle. There is also an option to see either your full career stats, or the stats per game mode for more scenario based data.

Viewing another player’s stats reveals some arrows next to the numbers, comparing your stats with theirs. Green arrows mean that your stats are better, while red is worse.

Match History Tab

The match history data is also a new addition to Gigantic, providing a summary for each of their last 20 matches. Stating their game result, how long the game lasted, which hero they played, the game mode, and so on.
This data shows the player at a glance how well they’ve been playing.

Selecting a match additionally reveals the game’s statistics board, showcasing who you played with, and against, accompanied with everyone’s score.
This can be useful to find someone you had a good or bad experience with, to either add them as a friend or to report them for their bad behaviour.

Store & Cosmetics

Gigantic has various gameplay assets, and cosmetics for players to unlock and equip.

The store is the main location for the players to unlock any items, ranging from heroes, to in-game cosmetics, as well as profile cosmetics.
Missing cosmetics can also get bought on secondary locations for quick and easy access, like the pages where players equip those newly bought cosmetics.

The Design Process

Title

Text

Emote Wheel

Besides the chat and the ping wheel, the game also comes with an emote wheel now. This supports a more casual and easy to use communication system for all platforms.

The wheel is customizable with any emote a player owns, to match their personality.

The Design Process

Title

Text

Match Loading Screen

The Match Loading screen provides players with a quick overview of the match setup, while waiting for everyone to load into the match.

Besides the crucial information, this screen is also a place where players show off their accomplishments to other players, like earned titles or badges, completed fortunes, and their current rank.

The Design Process

Previous Issue: Lack of Space

The game lacked a place for players to show off their hard earned accomplishments, and the main opportunity to do so is right before a match, where you encounter lots of new players.

However, there is not much space for any new information like accomplishments or ones rank in the previous layout, thus requiring a redesign.

Redesign

After trying out many different shapes and styles, a basic rectangular style provided the most space to work with. This allows the accomplishments to overlap on top of the portrait, as it increased in size.
Titles are shown under the player’s chosen character and account name, with their rank used as a frame.

In cases where player’s do not want to show any accomplishments, their locations will remain empty, keeping a consistent layout with the other player cards.

Keyframe Animations

A couple of animations I designed and implemented are:

– The reward pop-ups, which briefly show the acquired achievement during the game.

– The death summary, which informs the player about the cause of their death, their respawn timer, and possible actions they can do now.

The Design Process

Title

Text

Skill Descriptions

Skill descriptions inform the player about the hero’s skill functionality, and their upgrades. It should provide the player with all the details to excel with their hero, yet easy enough to skim through during high pressure situations.

The skill descriptions can be split up into 3 variations; the full description, the upgrade description and the upgrade type preview.

The Design Process

Title

Text

GIGANTIC EXPERIENCES

Gigantic: Rampage Edition is an action packed, 5v5 MOBA Hero Shooter, where you battle against and alongside gigantic Guardians.

As a UI/UX Designer I was responsible for the design of various menu’s, skill description structure and UI animations. As well as the implementation of those descriptions and animations.

Character Builds

With the new builds feature, players are able to create and save builds before they jump into a game.

Builds are unique to their hero. They come with 2 pre-made builds and 3 slots for custom builds, allowing players to craft and name the build to fit their own playstyle.
Once the build does no longer suffice, it can get replaced, rearranged or completely removed.

The Design Process

Previous Issue: Too Complex

The game has a detailed skill upgrade system that allows players to tailor their heroes for the situation and playstyle. But the amount information that must be processed by the player, especially during fast paced combat, was too demanding especially for new users. Thus requiring a feature to ease the experience for casual and new players.

Build Editor

We re-used the same skill tree UX from the gameplay for a clear and familiar to use editor experience. It is accompanied by the info panel, providing details about the skill and the selected upgrade, to support informed decision making.

Selected upgrades slot into the upgrade timeline, filling each box from left to right. Players can undo their last selection, completely wipe the build, or swap the positions of upgrades on the timeline.

Build Overview

Players can access the build editor through the Builds tab on their selected Hero page, since builds are unique to their hero.

The tab provides a quick overview of the pre-made and custom builds, showcasing the order in which skills are upgraded, along with the type of upgrade. These skills and upgrade types are visualized through iconography.

Player Profile

The Player Profile, previously known as the Career’s Page, is a place where all personal data is accessed, ranging from personal achievements, to statistics, as well as profile customization.

With the rerelease, players can also view their match history, and have a dedicated tab about their rank progress.

The Design Process

Previous Issue: Clunky Flow

Gigantic has a lot of data, achievements and customization, which needs to be accessible to players.

The Profile Page, where all this info was stored, required a rework, since the previous flow was a bit clunky in use, had no hierarchy to follow, and there was more information to add, like:
Ranked info, Match History, and Game Stats (no web browser).

Overview Tab

We moved all player specific information to one location, which hosts multiple tabs for organization. It lands on the overview tab with the most important information to summ up an individual, since this is also the tab other players can view.

Players can customize their profile icon and choose which accomplishments they want to highlight through the overview tab as well.

Ranked Tab

The new Rank mode comes with its own overview page, highlighting the player’s journey and accomplishments. The information can get filtered per season, or showing data of the past 2 weeks.

This page also informs the player about important information, like the season duration or, for very skilled players, the countdown for their MMR Decay.

Badges Tab

With some changes to the spacing and the layout, we freed up more space on the side for a proper badge preview.

The enlarged badge preview draws in the player’s attention, making a change in information more apparent. The preview also acts as a connection to its information, showcasing which badge it belongs to.

Statistics Tab Mockup

We moved the statistics information from a web browser into the game.
This redesign comes with a graph to visualize the numbers of each category, making it easier to grasp someone’s playstyle. There is also an option to see either your full career stats, or the stats per game mode for more scenario based data.

Viewing another player’s stats reveals some arrows next to the numbers, comparing your stats with theirs. Green arrows mean that your stats are better, while red is worse.

Match History Tab

The match history data is also a new addition to Gigantic, providing a summary for each of their last 20 matches. Stating their game result, how long the game lasted, which hero they played, the game mode, and so on.
This data shows the player at a glance how well they’ve been playing.

Selecting a match additionally reveals the game’s statistics board, showcasing who you played with, and against, accompanied with everyone’s score.
This can be useful to find someone you had a good or bad experience with, to either add them as a friend or to report them for their bad behaviour.

Store & Cosmetics

Gigantic has various gameplay assets, and cosmetics for players to unlock and equip.

The store is the main location for the players to unlock any items, ranging from heroes, to in-game cosmetics, as well as profile cosmetics.
Missing cosmetics can also get bought on secondary locations for quick and easy access, like the pages where players equip those newly bought cosmetics.

The Design Process

Title

Text

Emote Wheel

Besides the chat and the ping wheel, the game also comes with an emote wheel now. This supports a more casual and easy to use communication system for all platforms.

The wheel is customizable with any emote a player owns, to match their personality.

The Design Process

Title

Text

Match Loading Screen

The Match Loading screen provides players with a quick overview of the match setup, while waiting for everyone to load into the match.

Besides the crucial information, this screen is also a place where players show off their accomplishments to other players, like earned titles or badges, completed fortunes, and their current rank.

The Design Process

Previous Issue: Lack of Space

The game lacked a place for players to show off their hard earned accomplishments, and the main opportunity to do so is right before a match, where you encounter lots of new players.

However, there is not much space for any new information like accomplishments or ones rank in the previous layout, thus requiring a redesign.

Redesign

After trying out many different shapes and styles, a basic rectangular style provided the most space to work with. This allows the accomplishments to overlap on top of the portrait, as it increased in size.
Titles are shown under the player’s chosen character and account name, with their rank used as a frame.

In cases where player’s do not want to show any accomplishments, their locations will remain empty, keeping a consistent layout with the other player cards.

Keyframe Animations

A couple of animations I designed and implemented are:

– The reward pop-ups, which briefly show the acquired achievement during the game.

– The death summary, which informs the player about the cause of their death, their respawn timer, and possible actions they can do now.

The Design Process

Title

Text

Skill Descriptions

Skill descriptions inform the player about the hero’s skill functionality, and their upgrades. It should provide the player with all the details to excel with their hero, yet easy enough to skim through during high pressure situations.

The skill descriptions can be split up into 3 variations; the full description, the upgrade description and the upgrade type preview.

The Design Process

Title

Text