Warframe Year in Review
Role
Product Designer
Involvement
Product design
User research
Graphic design
Collaborators
1 Product Manager
1 Software Engineer
Background
Warframe is a free-to-play action role-playing third-person shooter developed by Digital Extremes.
Overview
Warframe Year in Review is an interactive web experience available on desktop, tablet and mobile that would display the statistics of in-game player accomplishments from the year of 2024.
Players could also download an image with all their statistics that they could share with friends.
In total, 20 metrics were collected. Some examples include: total hours played, most used weapons, and total missions played.
The goal of this project was to increase player engagement of new, active and returning players. In addition, players should be able to share their stats amongst the community, building excitement for the player base.
Launch status
Warframe Year in Review was officially launched in February 2025!
Here was my downloadable stats image I got after launch for my Warframe account!
Highlights
Some highlights of the project.
Some screens from the project
Player shareable export design
The challenge
Warframe Year in Review needed to account for all types of players. As a result, we needed to consider all possible states and edge cases when designing.
As a result, we needed to fully understand the game mechanics, community and players to produce a good design.
Problem statement
How can we design an interactive web experience where players can view and share their in-game statistics in an exciting way?
The solution
After Effects prototype
This prototype contains all the screens for the "Active player" user type. This video contains all the animations, and was also presented during developer handover,
The Figma file
This Figma file contains the design of all the screens created for this project in desktop, tablet and mobile.
Player shareable export
The design of the stat images that players could share with friends!
Research summary
The types of players
Based on statistics, there were three types of players as follows:
No stats
Created their account in 2025 or they didn't play in 2024.
New player
Have some stats but are missing some stats due to less game progression.
Active player
Have all 20 stats.
Out of the 20 stats, some were locked behind quests that the player needed to play. As a result, more cases needed to created under the "New player" type, as shown below:
Worst case
This player has only completed the tutorial. This means they only have 8/20 statistics
Missing quests
This player has progressed through some quests, but not all of them. Some stats must be hidden under a hidden state, to prevent spoilers.
Design process
Low-fidelity sketches
My first sketch had no limitations on the number of screens and animations. In many cases, I had only one stat on each screen.
This first sketch required a lot of movement and animation. This would be difficult for developers to implement.
After discussing with the project manager and the game data team, we decided that the best and easiest way to present the data would be to display multiple stats grouped in one screen.
Here, we set a limit of having only 5-6 total screens.
Determining the flow of the page
After determining how many screens would be present, we needed to group together the stats accordingly to show up on each screen.
The groupings and order were determined in collaboration with the community team.
From there, I created another sketch with the groupings. The overall feel of the experience was getting more defined.
Visual design brainstorming
One of my favourite parts of the project was determining the visual design. The project needed to align with Warframe's current design system for web, but I also aimed to incorporate in-game elements.
I was inspired by the following:
In-game elements: crafting items, exploring space, and other gameplay elements.
In-game scenes: for example, the Orbiter (place where player resides in).
In-game UI: gold linework, gold glows, and grain.
The following image shows some of the brainstorming I did for the visual design:
Designing all cases
Dealing with quest specific statistics
As mentioned earlier, some of the statistics should be hidden because some players may have not played the quest to unlock the statistic.
In some cases, multiple screens needed to be designed for one grouping. The grouping, "Helpful Pals" had 3 statistics that were hidden behind quests. This resulted in 5 different screens based on the player's progression:
Visual elements
Using the concepts developed from the ideation phase, I created all visual elements of the page using Adobe Illustrator and Figma.
Repeated elements
These were repeated graphics that were reused throughout the screens.
Missing data cards
If players didn't have a stat, these missing data cards would cover the area where the stat would otherwise appear.
Backgrounds
Starchart
This star chart graphic is inspired by the in-game star chart which serves as the navigation system for all players.
Arsenal
This graphic was inspired by the Arsenal, the place where players can equip their weapons and tools.
Foundry
This graphic is inspired by the Foundry, the machine in-game where players can craft items.
Reflections
Responsive design
For this project, all screens needed to be responsive for all screen sizes. I learned a lot through communicating with development about feasibility and accessibility. There were many revisions made to create the best experience for tablet/mobile users.
Before, I often prioritized the desktop user experience the most. As a result, my tablet/mobile designs lacked compared to desktop.
However, in this project, I found myself focusing and improving my design skills for the mobile/tablet experience as well. I started to think about more considerations. For example, the scrolling interactions through tablet/mobile instead of desktop.
Adding motion
While I had made Figma prototypes before, this was the most I had ever worked with making animated pieces. I learned a lot about motion graphics and design, and aim to incorporate animation into my future projects.
Special thanks
A special thanks to my Digital Extremes mentor Olha Tymoshchuk, the web team and specifically, the web design team at Digital Extremes: Taylor Miller, Mathew Hoy, and Ryan Wagget.
Thank you for all your support and encouragement!
