HUD
HUD
HUD
One of the main features of SMITE 2 that I contributed to was the in-game HUD. I was involved during the early iteration phases through the implementation released for the free-to-play launch.
We had several goals for the SMITE 2 HUD:
Single, unified HUD across input types to reduce maintenance needs.
Support the "active" item system. Active items have on-demand gameplay effects, requiring unique key binds for each.
Contemporary visual design with fewer container elements to keep focus on gameplay.
One of the main features of SMITE 2 that I contributed to was the in-game HUD. I was involved during the early iteration phases through the implementation released for the free-to-play launch.
We had several goals for the SMITE 2 HUD:
Single, unified HUD across input types to reduce maintenance needs.
Support the "active" item system. Active items have on-demand gameplay effects, requiring unique key binds for each.
Contemporary visual design with fewer container elements to keep focus on gameplay.
One of the main features of SMITE 2 that I contributed to was the in-game HUD. I was involved during the early iteration phases through the implementation released for the free-to-play launch.
We had several goals for the SMITE 2 HUD:
Single, unified HUD across input types to reduce maintenance needs.
Support the "active" item system. Active items have on-demand gameplay effects, requiring unique key binds for each.
Contemporary visual design with fewer container elements to keep focus on gameplay.
Iterations
The ability bar contains a lot of vital gameplay elements. I wireframed numerous solutions, trying to create a balanced, usable layout. Many of the early wireframes moved the inventory near the abilities, keeping everything in the center of the HUD. Having items in this cluster also solved the active item challenge but did result in a more visually complex layout.
Iterations
The ability bar contains a lot of vital gameplay elements. I wireframed numerous solutions, trying to create a balanced, usable layout. Many of the early wireframes moved the inventory near the abilities, keeping everything in the center of the HUD. Having items in this cluster also solved the active item challenge but did result in a more visually complex layout.
Iterations
The ability bar contains a lot of vital gameplay elements. I wireframed numerous solutions, trying to create a balanced, usable layout. Many of the early wireframes moved the inventory near the abilities, keeping everything in the center of the HUD. Having items in this cluster also solved the active item challenge but did result in a more visually complex layout.
"Legacy" HUD during Alpha playtests
"Novus" HUD during Alpha playtests
Feedback Loop
The layout wireframes I created were reviewed internally by stakeholders. Once we agreed on a viable option, I would create a new HUD variation within Unreal, and we would allow alpha test players to choose their preferred layout via in-game settings. We created specific questions in post-playtest surveys and evaluated pros and cons for layouts directly from the players.
"Legacy" HUD during Alpha playtests
"Novus" HUD during Alpha playtests
Feedback Loop
The layout wireframes I created were reviewed internally by stakeholders. Once we agreed on a viable option, I would create a new HUD variation within Unreal, and we would allow alpha test players to choose their preferred layout via in-game settings. We created specific questions in post-playtest surveys and evaluated pros and cons for layouts directly from the players.
"Legacy" HUD during Alpha playtests
"Novus" HUD during Alpha playtests
Feedback Loop
The layout wireframes I created were reviewed internally by stakeholders. Once we agreed on a viable option, I would create a new HUD variation within Unreal, and we would allow alpha test players to choose their preferred layout via in-game settings. We created specific questions in post-playtest surveys and evaluated pros and cons for layouts directly from the players.
One HUD to Rule Them All
This layout is the result of iteration and player feedback. Ultimately, we went in a direction more familiar to SMITE players, opting to have the inventory remain separated from the abilities. However, active items players purchase are displayed dynamically to the right of the center cluster, treating them as another "ability". This solved the active item challenge. The HUD does not change between input types, which is more maintainable over time.
One HUD to Rule Them All
This layout is the result of iteration and player feedback. Ultimately, we went in a direction more familiar to SMITE players, opting to have the inventory remain separated from the abilities. However, active items players purchase are displayed dynamically to the right of the center cluster, treating them as another "ability". This solved the active item challenge. The HUD does not change between input types, which is more maintainable over time.
One HUD to Rule Them All
This layout is the result of iteration and player feedback. Ultimately, we went in a direction more familiar to SMITE players, opting to have the inventory remain separated from the abilities. However, active items players purchase are displayed dynamically to the right of the center cluster, treating them as another "ability". This solved the active item challenge. The HUD does not change between input types, which is more maintainable over time.
Death Recap
Continuing our effort around clarity, we wanted players to have more insight into moment-to-moment gameplay. Death recap was an effort to capture a brief "what happened to me?" list of damage sources leading to the player's elimination. Sources were differentiated by god and damage type. The panel on the HUD displays automatically on player elimination.
Death Recap
Continuing our effort around clarity, we wanted players to have more insight into moment-to-moment gameplay. Death recap was an effort to capture a brief "what happened to me?" list of damage sources leading to the player's elimination. Sources were differentiated by god and damage type. The panel on the HUD displays automatically on player elimination.
Death Recap
Continuing our effort around clarity, we wanted players to have more insight into moment-to-moment gameplay. Death recap was an effort to capture a brief "what happened to me?" list of damage sources leading to the player's elimination. Sources were differentiated by god and damage type. The panel on the HUD displays automatically on player elimination.
Item Store
Item Store
Item Store
Item builds and store are crucial systems in any MOBA. For SMITE 2, we approached the item store with the learnings of 10+ years of SMITE. We had the following goals:
Modernize the item store, borrowing success from other MOBAs to better transition players into SMITE 2.
Unified store across input types, requiring less maintenance.
Support SMITE 2's new component building system, a change from SMITE's more strict item trees.
I was the primary UI designer working on the item store experience. The process involved many prototypes and rounds of player feedback to land on what was shipped in the free-to-play launch.
Item builds and store are crucial systems in any MOBA. For SMITE 2, we approached the item store with the learnings of 10+ years of SMITE. We had the following goals:
Modernize the item store, borrowing success from other MOBAs to better transition players into SMITE 2.
Unified store across input types, requiring less maintenance.
Support SMITE 2's new component building system, a change from SMITE's more strict item trees.
I was the primary UI designer working on the item store experience. The process involved many prototypes and rounds of player feedback to land on what was shipped in the free-to-play launch.
Item builds and store are crucial systems in any MOBA. For SMITE 2, we approached the item store with the learnings of 10+ years of SMITE. We had the following goals:
Modernize the item store, borrowing success from other MOBAs to better transition players into SMITE 2.
Unified store across input types, requiring less maintenance.
Support SMITE 2's new component building system, a change from SMITE's more strict item trees.
I was the primary UI designer working on the item store experience. The process involved many prototypes and rounds of player feedback to land on what was shipped in the free-to-play launch.
Prototyping
Many early iterations of the SMITE 2 item store were prototyped within Figma. This helped stakeholders visualize the new ideas more easily. Figma's ability to map controller inputs was valuable and utilized heavily, as the controller store experience is a unique challenge to solve.
Customization
Our initial focus was a single store layout, displayed in the left half of the HUD. While we did accomplish this, we found internal and external players wanting different things. We decided to give players options in the item store so they can cater the experience to their preferences. The item store ended up with these options:
3 layout choices: Left Aligned, Centered, and Split. Centered became the default for keyboard and mouse and split the default for controller.
Descriptive or simplified grid. Descriptive grid displayed short blurbs on each item, helping newer players at a glance.
While layouts may be more comfortable for one input type or the other, we supported all input types across all layouts.
Customization
Our initial focus was a single store layout, displayed in the left half of the HUD. While we did accomplish this, we found internal and external players wanting different things. We decided to give players options in the item store so they can cater the experience to their preferences. The item store ended up with these options:
3 layout choices: Left Aligned, Centered, and Split. Centered became the default for keyboard and mouse and split the default for controller.
Descriptive or simplified grid. Descriptive grid displayed short blurbs on each item, helping newer players at a glance.
While layouts may be more comfortable for one input type or the other, we supported all input types across all layouts.
Customization
Our initial focus was a single store layout, displayed in the left half of the HUD. While we did accomplish this, we found internal and external players wanting different things. We decided to give players options in the item store so they can cater the experience to their preferences. The item store ended up with these options:
3 layout choices: Left Aligned, Centered, and Split. Centered became the default for keyboard and mouse and split the default for controller.
Descriptive or simplified grid. Descriptive grid displayed short blurbs on each item, helping newer players at a glance.
While layouts may be more comfortable for one input type or the other, we supported all input types across all layouts.
Split
Split layout has unique navigation that console SMITE players are familiar with.
Split
Split layout has unique navigation that console SMITE players are familiar with.
Split
Split layout has unique navigation that console SMITE players are familiar with.
Left Aligned
Left aligned layout is more compact, keeping the store mostly within the left half of the HUD.
Left Aligned
Left aligned layout is more compact, keeping the store mostly within the left half of the HUD.
Left Aligned
Left aligned layout is more compact, keeping the store mostly within the left half of the HUD.
Notifications
Another feature I contributed to was item purchase and level-up notifications. Players can customize the level of detail for their notifications or turn them off completely. This feature is especially useful for new players taking advantage of auto item building and auto skill leveling. The most detailed notification helps players learn about items.
Notifications
Another feature I contributed to was item purchase and level-up notifications. Players can customize the level of detail for their notifications or turn them off completely. This feature is especially useful for new players taking advantage of auto item building and auto skill leveling. The most detailed notification helps players learn about items.
Notifications
Another feature I contributed to was item purchase and level-up notifications. Players can customize the level of detail for their notifications or turn them off completely. This feature is especially useful for new players taking advantage of auto item building and auto skill leveling. The most detailed notification helps players learn about items.
Detail Levels
Players can choose a detail level between completely off, minimal, default, and descriptive.
God Overview
God Overview
God Overview
While most of my contributions on SMITE 2 were in-game, I also worked on some out-of-game UI. The god overview, abilities, and loadout pages required some new visual design with the addition of an environmental background. I executed the visual design, as well as all updates within Unreal. My goal was to not rely on container elements and let the environment and god models be the focus.
While most of my contributions on SMITE 2 were in-game, I also worked on some out-of-game UI. The god overview, abilities, and loadout pages required some new visual design with the addition of an environmental background. I executed the visual design, as well as all updates within Unreal. My goal was to not rely on container elements and let the environment and god models be the focus.
While most of my contributions on SMITE 2 were in-game, I also worked on some out-of-game UI. The god overview, abilities, and loadout pages required some new visual design with the addition of an environmental background. I executed the visual design, as well as all updates within Unreal. My goal was to not rely on container elements and let the environment and god models be the focus.
God abilities
Players can view god abilities, including aspect. A toggleable detail panel revealed more information about the ability, including all relevant scaling, nuances, etc.
God abilities
Players can view god abilities, including aspect. A toggleable detail panel revealed more information about the ability, including all relevant scaling, nuances, etc.
God abilities
Players can view god abilities, including aspect. A toggleable detail panel revealed more information about the ability, including all relevant scaling, nuances, etc.
God Loadout
God loadout is where players customize their god's appearance as well as their loading card.
God Loadout
God loadout is where players customize their god's appearance as well as their loading card.
God Loadout
God loadout is where players customize their god's appearance as well as their loading card.
Design System
Design System
Design System
While contributing to SMITE 2, I maintained consistent styles and components within Figma. This is a process I employ on all projects I'm involved in. I enjoy creating complex and encompassing reusable components, as well as color and font styles that are 1:1 with in-engine implementation.
