SMITE 2

My primary role was focused on improving experiences imported from SMITE 1, and in creating all-new experiences in SMITE 2. The vast majority of my work existed in different fidelity wireframe formats, or pitch decks to achieve the vision.

  • For the first 4+ months, I was the singular UI/UX Designer, setting up new processes

  • Created the UI/UX Architectural flows for several areas in the game.

  • Created new numerous User Experiences across the title to improve overall usability for both In-Game and Front End

  • Re-imagined and redesigned new experiences for many areas of SMITE 1

  • Redesigned the First-Time User Experience and generalized tutorials for all players

  • Created many UI/UX based surveys to gather critical data to assist the development team

  • Worked directly with countless community members for interviews and release discussions

  • Was the primary driver in the creation the Visual and Thematic Direction for the UI Art

  • Set and presented SMITE 2’s UI/UX Direction and pillars

  • Assisted in the creation of the UI Style Guide, and Global Visual Components

  • As the team grew, I became the primary UX Designer for the team responsible for wireframes, setting functionality and creating high-fidelity mocks.

  • Mentored and coached newer UX Designers to help elevate their skillset.

  • Worked closely with leadership and stakeholders to ensure we were focused on delivering the best experiences possible

  • Directed third-party vendors to create additional visual elements to polish the visual elements

  • Created motion mocks to provide a visual proof of concept on how certain interactions could function.

  • Worked with our 3D environment teams to ideate concepts for our front end experiences.

  • Created concepts for new in-game presentations and animation for intro and outro experiences.

 

Below is the UI/UX Direction deck I presented to leadership and the UI team. It outlines the key pillars and essential guidelines that were integrated into our development processes for the SMITE 2 dev cycle. I've revised the presentation for the website by incorporating my original talking points and speech notes, making it more text-heavy than the initial version.

 

Aside from the 2D illustrated art and 3D renders, I was responsible for all UI visual design, interaction design, and user experience functionality in the mocks below. These mocks were created in the weeks following my inclusion in a small wave of layoffs in a few weeks between late July and Early August. Unfortunately, these designs could not be explored due to release priorities and scheduling constraints.

 

ACCESSIBILITY

CONTRAST - Red & Blue (All-New)

  • Improved contrast visuals have been a feature in software for some time, but their integration into gaming is still in its early stages. SMITE, with its dense visual elements—ranging from characters and environments to VFX—can present challenges for players with low visibility or legal blindness. By adopting a high-contrast approach, we aim to remove potential barriers, making the game more accessible and enjoyable for all players.

CONTRAST - Black & White (All-New)

  • In addition to the Red & Blue visual, we would also include B&W version, with white being the color that identifies interact-able characters and props. We can include an icon above or in front of the element that indicates what actions could be performed with the target.

 

First-Time User Experience (FTUE)

Hospitality (All-New)

  • This hospitality screen would be setup to recognize if players had played SMITE 1 in the last 6 months, or participated at any point during the SMITE 2 Alpha releases. This is determined through account-linking and Divine Legacy data. If this data existed for the players, then the ‘I’m an Expert’ option would unlock to bypass the FTUE. Otherwise, there are two other options players could choose to play; ‘I’m new to MOBAs’ and ‘I’m new to SMITE’. These options would have certain settings On by default, and potentially locked from customization to ensure a player engages with specific Onboarding mechanics. I designed the entire UX Architecture and User-Journey on Figma, including heavy revisions to the Welcome Battle Pass designed to teach the gameplay loop of SMITE 2, and when certain front end mechanics would unlock with each Pass level earned.

Training Mini-Games (All-New)

  • The hardest aspect of learning how to play a MOBA is understanding all of the tribal knowledge has been learned and experienced by the player base. Anyone entering an existing MOBA is in an immediate disadvantage. These Training Mini-Games are meant to help resolve that issue. The best way to learn a game is through gameplay repetition of the mode you enjoy, or want to learn. The problem is each match of Conquest takes about ~25 minutes to complete. That’s a big commitment. So these games are designed to focus on specific events, playstyles, and aspects of the game in smaller chunks that you can play until you feel confident enough to play.

    • One such example is a Rogue-like mode that teaches both Conquest basics for each Role, AND how to use the Item Shop. As a Solo Role, you would have 5 stages to complete:

      • 1. Kill Minions

      • 2. Kill a God and Tower 1

      • 3. Kill a God, Minions and Tower 2.

      • 4. Kill a Phoenix

      • 5. Kill a Titan

    • Each stage completion will reward you with gold, and present you with curated list of items in the Item Shop, and information about the next stage. It’ll be up to you to purchase the items best suited for the upcoming event to progress faster.

  • There are a myriad of other events including Role Playing Games! These are focused on teaching you how to play all Roles in Conquest, Joust and Dual. For example, as a Carry, protect your Support as you march down the Duo line to reach the Titan.

  • There’s also a Jungle Time Trial in which all camps on your side will spawn at the same time. You are tasked to clear out each spawn in whatever order you want, utilizing the buffs that drop and items you purchase. You must clear out 25 total spawns as fast as possible to get added to a leaderboard. You can also assign Camp buffs to appropriate Role teammates. Assign it to the correct Role, and they’ll help you for 5 seconds.

INTRO EXPERIENCE

MESSAGE OF THE DAY (All-New)

  • Upon loading into the game, players are greeted with a navigable Message of the Day (MOTD) UI screen. The advertisements displayed on this screen are server-side configured and can be accessed from anywhere in the Front End.

HOME SCREEN (All-New)

  • After advancing past the MOTD screen, players arrive at the new Home screen. The menu on the left is streamlined to a maximum of five categories to ensure a straightforward initial experience. Below the menu, there is a control for the skins being showcased in the 3D space in the background. On the right side, a compact JSON version of the MOTD screen is available, allowing players to revisit the advertisements that may have caught their interest.

JUMP MENU (All-New)

  • In SMITE 1 PC, players could jump to the Main Menu at any point in the front end by clicking on the SMITE logo on the top left. Unfortunately, this function didn’t exist on console versions, but I want to fix that. So the intent here is to provide players with this same functionality, on PC and Console, but I want to take that a step further. Players can use this menu in order to jump to other screens without having to repeatedly back out of one screen, and then click through several more to reach another. Deep tn the Store, Trials, or Player Profile screens, and want to jump to Gods? Click on the button attached to the player profile, and pick ‘Gods’.

MAIN MENU

From the Home screen, players can easily access any of the tabs listed below. The goal was to establish a consistent set of tabs that always present the most relevant information. In previous SMITE Main Menus, the abundance of conflicting elements often created friction and overwhelmed players. The vertical list on the left varied monthly, sometimes offering up to 12 options, contributing to a cluttered experience.

GODS

  • The presentation of Owned, Unowned, and Rotation gods has been enhanced for clarity. By leveraging color theory and introducing new icon sets, we've reduced potential confusion and improved overall user experience.

EVENTS (All-New)

  • SMITE frequently hosts multiple events simultaneously, which can be overwhelming. By dedicating a separate screen to Events, we reduce the initial clutter on the Main Menu, allowing players to focus on specific events more easily. This screen provides a high-level overview of event progress, enabling players to see their progression at a glance. Simply highlighting an event displays relevant information, and selecting it provides more detailed insights.

PLAY (Redesigned)

  • The Play screen has been refined to focus exclusively on gameplay. Highlighting any of the tiles surfaces relevant information for each section. For instance, if there are events that can only be completed in specific match types, this information is clearly shown. Ranked players can easily view their current rank by highlighting the 'Competitive' tab, with no need to navigate to their Profiles or enter the Ranked screen to view as was required in SMITE.

STORE (Redesigned)

  • The Store has been redesigned from the ground up to simplify the shopping experience. The latest additions to the Store are featured at the top, while cosmetic items of interest are highlighted throughout the landing screen. As SMITE continues to expand its inventory, players will have the ability to browse items at a more granular level, which will be covered in the next section.

TRIALS (Quests Re-imagined)

  • Quests in SMITE were previously scattered across multiple layouts and interactions, often feeling like a scavenger hunt. With the introduction of the new Trials feature, all SMITE 2 quests are centralized in a single HUB. While quests can still be found in their traditional locations—such as Event quests within their respective events—they can now also be accessed from the Trials screen, providing a convenient, one-stop shop for players.

STORE

The Store in SMITE can be confusing at times. This is primarily due to the number of items that are available at any given moment. So, the primary goal here is organization. At the highest level, items of interest of several categories are displayed; DLCs, Bundles, Chests, Skins, Miscellaneous, etc.

Sections (All-New)

  • As started earlier, each section focuses on top items, but players need a way to view everything in each category. The addition of ‘View ALL…” gives players this ability. Simply interacting with these buttons displays every available item in the desired section.

VIEW ALL (All-New)

  • Shown in the ‘View All Skins’ screen, players have a new, and improved interactive experience with these items. Highlighting any item on the left, will update the screen be previewing the item and providing viewers with important information. You’ll now know which skins have unique attributes like VFX, and Animations. Additionally, I want players to seamlessly jump into Practice from anywhere in the game. So, while viewing items, you’re able to test drive these skins before committing to a purchase.

CHESTS (Redesigned)

  • The Chest screen in SMITE 1 isn’t organized in the best layout. The focus here is to simplify the experience, and put the focus on the item without so many competing elements on the screen. Players can easily navigate to the other chests through the drop down menu above the Chest UI for quicker interactions.

 

PRESENTATION CONCEPT

 

PLAYER PROFILE CONCEPT

I was not the primary designer of the Player Profile. The wonderful Amanda Tullis was the design lead for that feature, but I wanted to iterate on the design as I had envisioned it when I first proposed the layout last year.

Pantheon-based Environment (All-New)

  • First and foremost, creating a scene that is appropriate to the pantheon of the god. In SMITE Q, all gods are placed in a primarily Greco-Roman themed setting which is large disconnect for all other pantheons, so I want to tie it all together so these Pantheons feel more complete, and aren’t just a label, but a location. In this example, the background environment for Ymir is Nordic. The background visual itself is AI generated as I am not an illustrated artist, but I did composite the different Ymirs into the setting.

TAB MENU (All-New)

  • In SMITE 1, all 10 options for the god are displayed as a vertical list on the left. Here, I’ve split the organization into 4 primary tabs; Overview, Combat, Progression, and Collection. Without the ability to run any card sorting testing, I’ve split up each of the current SMITE 1 categories into the tabs, and included the addition a few more sections. This more organized design allows for a better representation of the god, and all of the data associated with them as well.

    • Overview covers a simple, high-level breakdown of the god to entice players to try a god. This includes new data in the form of Playstyle, High-Level Stats, Ability Aptitude and Ability Roles

    • Combat has Abilities, God Builder and Stats as the different pages using the Sidebar menu on the left.

      • Two mocks, the first depicts the base description of the highlighted ability, and the second mock shows an optional panel that provides more detail about the ability. This is intentionally designed this way to not inundate the viewer with walls of text that could end up being very confusing. Keep it simple, with the option learn more if they so choose.

    • Progression covers Mastery (Ascension), Competitive Ranks, Match History, Achievements, and Lore

      • There are two mocks below that covers base Mastery progressing towards Rank 5, and a second with version at the max Rank of 10, with Ascension unlocked.

    • Collection is a new front-end system I designed that is shared across the entire client, and it covers every cosmetic slot an individual god has available to customize. This includes Skins, Jump Stamps, Global Emotes, Animations, etc. The final version of this design is included in the Store wires above,

      • Of the two Collection mocks, the first carousel style layout was a concept that focused entirely on a 3D interaction and presentation. The second uses the global design of the Collection system where the layout and interactions are exactly the same across the board, with certain functionalities becoming available when needed.