Spectre divide
mountaintop studios (2024) • UIUX director
First Person Tac Shooter
Spectre Divide is the genre-evolving, free-to-play 3v3 tactical shooter driven by Duality. Use Duality to control two bodies in real-time, letting you defend two sites at once, cover your own cross, or even trade yourself. Master tactical gunplay and an arsenal of future tech to achieve infamy.
tl;dr
uiux direction • uiux design • ui art • ui tech art
Nine months to completely re-imagine a UIUX from the ground up
this project involved developing a Full UX and UI design across all systems, end-to-end, including every surface area of both in-game and front end UI for an anime-inspired, tactical shooter multiplayer game. as uiux director, I managed, grew, and mentored a wonderful team of UX Designers, UI Artists, Technical Designers, and UI Engineers while also functioning as the team's principal uiux designer.
At the core, the first nine months of design work for Spectre Divide involved rebuilding every pixel of UI from the ground up in a brand new vision. Developing this vision and applying it across every surface area of the game while also building a new UIUX team has been an incredible journey and one of the highlights of my career. The video below depicts the UIUX before I joined the Mountaintop Studios team versus after, and gives a good taste of what that transformative first 9 months looked like from an inside, developer point of view.
buy menu
the season 2 buy menu for spectre represents a complex weapon pairing system wherein players need to purchase weapons for two bodies at the same time. this buy menu refresh takes player feedback and ux research learnings into consideration to deliver an experience that preserves the gunplay / skill curve depth while removing visual noise, increasing action clarity, and expanding upon how we honor player choice in the genre. this buy menu was widely celebrated in early prototyping through to release, bringing a previously high-friction feature into a space that allows players to think tactically, maneuver rapidly, and coordinate effectively.
suggested buys
when joining the team, the original buy menu stood out as one of the game's most complex and high friction experiences. at the time of the game's launch, the creative direction was set in stone regarding the weapon system design, leaving little room to adjust the underlying gameplay architecture. as a result, players would struggle to learn the menu, often feeling discouraged by the experience. to help mitigate this ux in the context of the gameplay design of the time, i took inspiration from league of legend's suggested purchases menu feature, and brought that design ethos to our buy menu. while the full menu is available for players who are comfortable and familiar with the gameplay of spectre, suggested loadouts allowed players who were either less comfortable or more casually minded to make conceptual selections for full, half, or save buys. this meant players were far less likely to forget an element of their gear, such as armor or abilities as they are bundled with the buy, and allowed the game itself to educate players on what a full, half, or save buy is at each round in spectre's specific context and balance. it also allowed us to steer new players away from weapons or decisions that often correlated with a poorer experience, such as an accidental burst weapon purchase. when released, this feature was highly successful, and data analytics suggested only a small portion of the player population continued to use the full buy menu, with nearly all new players using the suggested menu.
battle pass
the following battle pass design review provides insight into the design work of the battle pass feature as well as the way this work was documented for the team to action. most sections of the original spec have been made available below, and illustrates how i often approach designs that are complex and interdisciplinary so as to support asynchronous work, especially with a global team.
play menus
the following design selection provides insight into the iterations of the spectre play menus over the years. these menus supported the multiplayer free to play experience, giving players access to game modes, challenges, newsfeed updates, player / social information, endorsement track progress, and crew competition live updates. where possible, the ui intentionally takes a backseat to the characters themselves, allowing the unique artistry of the game's style to lead the composition.
crew
crews were a complex, automated clan system intended by systems design to encourage the formation of new social connections. players compete in their crew against other crews to climb leaderboards, earn special rewards, and build their crew's legacy.
customization & store
customization for spectre divide involved addressing the double body complexity where players have two individual bodies to trick out. paralleling this, the weapons menu also provides two sets of customization to suit the attackers / defenders structure of the genre where an attacker weapon can have a different skin from that same weapon's defensive appearance. paired with these customization designs is the store, where these design complexities and solves are mirrored.
career
the career menu includes a legacy (player stats) feature, a match history feature, and a leaderboards feature. match history takes a unique, vertical form in this design to mirror the end of match ui and give each match more presence, avoiding the mundaneness of a simple list. the stats page aims to provide players with extensive stats, removing the need for players to seek this information in out-of-game products. additionally, the stats page provides access to skill curve stats like kda, but also takes time and space to celebrate more accessible player stats like favorite weapons, or commonly used sponsors. This ensures the menu is exciting and interesting for a broad spectrum of players, as opposed to being a point of shame or negativity for players who do not have the in-game legacy or skill that the high skill stats require.
endorsements
endorsements and challenges appear throughout the player experience, providing the player with progression tracks, unique rewards / unlocks, and long-term completionist earnings. the systems design of endorsements includes two currencies, fans and fame, that the player earns through challenge completion and match outcomes.
general menus
the following represent miscellaneous screens and elements including social menus, modals / popups, and settings menus.
in-game menus
the following design selection illustrates a cross section of in-game menus, including sponsor select (spectre's hero selection), that the player experiences as they move through the core gameplay loop.
hud & general in-game ui
the following images display a subset of hud element breakdowns and implementation notes. if there are any hud elements not shown below that you'd like to see the widget breakdown for or get any additional context on, please reach out to me directly.
kit ui
kits for sponsors (spectre's heros) required ui support throughout development to bring the abilities and personality of a kit to life. some examples of kit ui are shown in the following. each kit includes a narrative-defined theme that helps drive the aesthetic of the ui and diegetics.
work in progress style guide
the selected sections of the work in progress style guide for spectre are browsable below. this style guide helps contextualize the ui aesthetic goals and also presents iconographic elements used in the project. this document was primarily used to onboard new uiux designers when joining the team, giving context to important pillars of our unique design ethos. these pillars included accessible-by-design thinking, player archetype-driven design methods, and more. of note, i personally developed all iconography contained in this document except the 8 icons on the sponsor logos sheet.
trailers
mountaintop studios (2024) • UIUX director

































































































































































































































































































