Please Note
The following is a personal study has no affiliation with Digital Extremes.
The following is a personal study has no affiliation with Digital Extremes.
Made in Photoshop in 2023.
The online multiplayer shooter game Warframe is typically known for its cooperative missions between players (PVE) as you traverse the in-game universe. However, it also contains an optional set of missions where you can battle other players (PVP) in four game modes called "Conclave" which are held in arenas and hosted by the samurai-inspired character Teshin Dax.
Despite the many visual and mechanical upgrades Warframe has experienced over its lifetime, the menu screens for Conclave have gone largely untouched since its launch in 2015.
Conclave's Current Menu Design:
Despite the many visual and mechanical upgrades Warframe has experienced over its lifetime, the menu screens for Conclave have gone largely untouched since its launch in 2015.
Conclave's Current Menu Design:
Current Screen - Default
Current Screen - Game Mode Hover
Current Screen - Loadout Hover
Research
To gain an understanding of Conclave's features and the typical player that engages with it, I participated in matches myself, analyzed online forum conversation, and watching YouTube video commentary and playthroughs.
I found Conclave players:
- Consisted of a small network of dedicated players
- Are invested in completing its unique missions in order to receive exclusive in-game rewards
- Enjoy getting to experience PVP with Warframe's unique movement system and battle mechanics
Player experiences included:
- Long match-making wait times due to lack of interest from the other Warframe players
- The PVE side of Warframe receiving prioritization over Conclave, leading to fewer updates and minimal attention brought to the game mode
This led me to conclude the best way to improve Conclave's UI was to cater to the existing PVP player-base while improving visuals to make participation enticing for potential new players.
Design Goals
Goal 1: Bring the basics of the font, color, and graphical styles up to standard with Warframe's other menus, such as these offerings and loadout screens.
Current Offerings Menu Screen
Current Loadout Menu Screen
Goal 2: Tie in imagery from Conclave's storyline, touchpoints, and themes, particularly the host character Teshin Dax and his surroundings, as seen here with my character visiting Conclave hall.
Goal 3: Design a new custom icon for Annihilation to better represent the mode, while reflecting Warframe's unique icon style. When you kill another player in Annihilation, they turn into a gem-like rhombus called an Oro, which you collect for points. I used this as the basis for my design.
Drafting the Design
Icon: Starting with the icon for Annihilation, I worked through my ideas on paper and brought the designs into Illustrator, eventually settling on the variant on the right.
Paper Sketches
Digital Exploration
Final Design
Low Fidelity Wireframes (Paper): Next I explored various layouts of the menu screen with paper wireframes. I considered button placement, the importance of Conclave's different features, Warframe's visual brand, and usability for the players.
Wireframes 1 and 2
Wireframes 3 and 4
Wireframes 5 and 6
Low Fidelity Wireframes (Digital): I decided wireframe #5 was the most successful.
It incorporated prominent visuals of Conclave's theming, a quicker view and selection of the player's loadout to save time, and game mode buttons reduced in size, but still large enough for quick selection and inclusion of mode descriptions.
The player's Conclave mission progression level and associated icon is added in center view to indicate its importance and function to new players, and to give a sense of accomplishment and progress to recurring players.
The player's Conclave mission progression level and associated icon is added in center view to indicate its importance and function to new players, and to give a sense of accomplishment and progress to recurring players.
Tenshin and other background elements would be dynamic, with set dialogues playing upon opening.
All other buttons remain in the same positions, consistent with other screens players see throughout Warframe's UI system.
All other buttons remain in the same positions, consistent with other screens players see throughout Warframe's UI system.
Default Screen
Game Mode Hover
Loadout Hover
Final Design
Made in Photoshop.
Default Screen
Game Mode Hover
Loadout Hover
Original screens again for comparison:
Current Screen - Default
Current Screen - Game Mode Hover
