HUD
HUD
HUD
Dynamic HUD
The HUD in Divine Knockout was designed with a focus on gameplay clarity. There are minimal elements demanding player attention. The top widget of the in-match HUD is dynamic per game mode. The center icon and timer change per mode, while the team information and scoring remain consistent.
Dynamic HUD
The HUD in Divine Knockout was designed with a focus on gameplay clarity. There are minimal elements demanding player attention. The top widget of the in-match HUD is dynamic per game mode. The center icon and timer change per mode, while the team information and scoring remain consistent.
Dynamic HUD
The HUD in Divine Knockout was designed with a focus on gameplay clarity. There are minimal elements demanding player attention. The top widget of the in-match HUD is dynamic per game mode. The center icon and timer change per mode, while the team information and scoring remain consistent.
Oddball - Enemy in posession
Oddball - Ball dropped
Oddball - Enemy in posession
Oddball - Ball dropped
King of the Hill - Friendly team controlled
Match loading
King of the Hill - Friendly team controlled
Match loading
King of the Hill - Friendly team controlled
Match loading
Play Flow
Play Flow
Play Flow
Modes
The "Modes” menu is accessed via the play button on the lobby. This serves as the jumping off point for what mode the player wants to play. The queue blocks adapt to the party size and can display special events such as double XP weekends.
Modes
The "Modes” menu is accessed via the play button on the lobby. This serves as the jumping off point for what mode the player wants to play. The queue blocks adapt to the party size and can display special events such as double XP weekends.
Modes
The "Modes” menu is accessed via the play button on the lobby. This serves as the jumping off point for what mode the player wants to play. The queue blocks adapt to the party size and can display special events such as double XP weekends.
Prepare for Battle
Once a match is entered, players choose their god, talent loadout, and skin.
Prepare for Battle
Once a match is entered, players choose their god, talent loadout, and skin.
Prepare for Battle
Once a match is entered, players choose their god, talent loadout, and skin.
Prototyping
I utilized Figma and After Effects to prototype and visualize motion design on various aspects of DKO. Figma's support of controller keybinds greatly aided in helping stakeholders visualize flows.
Lobby
Lobby
Lobby
Lobby
The lobby serves as the central hub of DKO. Players can view quests, news, and more. Their current party of up to 3 members is represented dynamically in the lobby via their favorite god, account avatar, name, and title.
Lobby
The lobby serves as the central hub of DKO. Players can view quests, news, and more. Their current party of up to 3 members is represented dynamically in the lobby via their favorite god, account avatar, name, and title.
Lobby
The lobby serves as the central hub of DKO. Players can view quests, news, and more. Their current party of up to 3 members is represented dynamically in the lobby via their favorite god, account avatar, name, and title.
Get Social
Players can manage their party at any time outside of a match via the social panel.
Get Social
Players can manage their party at any time outside of a match via the social panel.
Get Social
Players can manage their party at any time outside of a match via the social panel.
Power of Figma
The social panel and corresponding context menu has numerous states that need to be accounted for. I utilized Figma's component system and variants to manage all the states.
Options
With components set up in Figma, mocking up a variety of scenarios becomes as easy as toggling options. I enjoy creating complex comprehensive components within Figma.
Options
With components set up in Figma, mocking up a variety of scenarios becomes as easy as toggling options. I enjoy creating complex comprehensive components within Figma.
Options
With components set up in Figma, mocking up a variety of scenarios becomes as easy as toggling options. I enjoy creating complex comprehensive components within Figma.
Gods
Gods
Gods
God Collection
There are a variety of gods available in DKO. Each has unique abilities, moves, talents, and visuals. The god collection provides an overview of a player’s owned gods, including which gods are currently in the free rotation and their respective god pass level.
God Collection
There are a variety of gods available in DKO. Each has unique abilities, moves, talents, and visuals. The god collection provides an overview of a player’s owned gods, including which gods are currently in the free rotation and their respective god pass level.
God Collection
There are a variety of gods available in DKO. Each has unique abilities, moves, talents, and visuals. The god collection provides an overview of a player’s owned gods, including which gods are currently in the free rotation and their respective god pass level.
God Summary
Diving down into a god from the god collection allows players to learn more about the god, including lore, attacks, abilities, talents, god pass, and cosmetics.
God Summary
Diving down into a god from the god collection allows players to learn more about the god, including lore, attacks, abilities, talents, god pass, and cosmetics.
God Summary
Diving down into a god from the god collection allows players to learn more about the god, including lore, attacks, abilities, talents, god pass, and cosmetics.
Mastering the Gods
The God Pass system allows players to master their favorite gods. XP is earned towards the God Pass of the god you played after each match. Each level earns the player rewards, including talents, which are used to customize a god’s abilities. Reaching the final level of the God Pass earns you a “Mastery Skin” for the god.
Mastering the Gods
The God Pass system allows players to master their favorite gods. XP is earned towards the God Pass of the god you played after each match. Each level earns the player rewards, including talents, which are used to customize a god’s abilities. Reaching the final level of the God Pass earns you a “Mastery Skin” for the god.
Mastering the Gods
The God Pass system allows players to master their favorite gods. XP is earned towards the God Pass of the god you played after each match. Each level earns the player rewards, including talents, which are used to customize a god’s abilities. Reaching the final level of the God Pass earns you a “Mastery Skin” for the god.
Talents
Talents give players the opportunity to customize their god’s abilities and attacks. Traits are specific to the god, while blessings can be used by any god once unlocked. Mixing and matching traits and blessings allows players to create unique builds and playstyles.
Talents
Talents give players the opportunity to customize their god’s abilities and attacks. Traits are specific to the god, while blessings can be used by any god once unlocked. Mixing and matching traits and blessings allows players to create unique builds and playstyles.
Talents
Talents give players the opportunity to customize their god’s abilities and attacks. Traits are specific to the god, while blessings can be used by any god once unlocked. Mixing and matching traits and blessings allows players to create unique builds and playstyles.
Making Changes
Players can quickly switch out a trait or blessing.
Making Changes
Players can quickly switch out a trait or blessing.
Making Changes
Players can quickly switch out a trait or blessing.
Live Service
Live Service
Live Service
Event Pass
Divine Knockout launched with a unique event pass. Upon visiting the pass for the first time, players are presented with an overview takeover.
Event Pass
Divine Knockout launched with a unique event pass. Upon visiting the pass for the first time, players are presented with an overview takeover.
Event Pass
Divine Knockout launched with a unique event pass. Upon visiting the pass for the first time, players are presented with an overview takeover.
Free Track
The event pass itself featured a track of rewards. Rewards were divided into 2 categories: free and premium.
Free Track
The event pass itself featured a track of rewards. Rewards were divided into 2 categories: free and premium.
Free Track
The event pass itself featured a track of rewards. Rewards were divided into 2 categories: free and premium.
Premium Track
Players who own the premium edition of the event pass have access to all rewards and other bonuses.
Premium Track
Players who own the premium edition of the event pass have access to all rewards and other bonuses.
Premium Track
Players who own the premium edition of the event pass have access to all rewards and other bonuses.
Rune Shop
Runes are Divine Knockout’s premium currency. The rune shop is where players can spend those runes. The rune shop is designed to accommodate a customizable layout grid with up to 8 items visible per “page”. Tags can be added for sales and special deals.
Rune Shop
Runes are Divine Knockout’s premium currency. The rune shop is where players can spend those runes. The rune shop is designed to accommodate a customizable layout grid with up to 8 items visible per “page”. Tags can be added for sales and special deals.
Rune Shop
Runes are Divine Knockout’s premium currency. The rune shop is where players can spend those runes. The rune shop is designed to accommodate a customizable layout grid with up to 8 items visible per “page”. Tags can be added for sales and special deals.
Unlocking a God
Gods are unlocked via one of two currencies: God Tokens or Runes. God Tokens are earned by leveling up gods.
Unlocking a God
Gods are unlocked via one of two currencies: God Tokens or Runes. God Tokens are earned by leveling up gods.
Unlocking a God
Gods are unlocked via one of two currencies: God Tokens or Runes. God Tokens are earned by leveling up gods.
Let’s Try Something On
When inspecting an item, it is displayed as a full takeover.
Let’s Try Something On
When inspecting an item, it is displayed as a full takeover.
Let’s Try Something On
When inspecting an item, it is displayed as a full takeover.
