Product Designer, Web
User Research
Interface Design
Graphic Design
THE TEAM
1 Product Manager
1 Engineer
1 Designer
BACKGROUND
Warframe is a free-to-play action role-playing third-person shooter developed by Digital Extremes. During my co-op at Digital Extremes, I got the chance to design Warframe’s year in review for new, current and returning players
During my time working at Digital Extremes, The Warframe marketing team began a new project; “Warframe Your Year in Review”, a web project available on desktop, tablet and mobile that would showcase the statistics of various feats players would accomplish in the game in the year of 2024. 20 statistics were collected from statistics ranging from “total hours played” to “most used weapons”.
The primary goal of this project was to increase the engagement of new, active and returning players; as well as fostering shareability of these stats amongst the community, building excitement for the player base.
Types of Players
One of the challenges that came with designing for this player base was to create an experience where all these players would be satisfied and happy with their year in review.
These were the 3 primary player bases, however the “new player” bucket had further “edge cases” that needed to be addressed.
Initial low-fidelity sketches
These sketches were created to help decide the flow of the page, and in what order the user the user would see their stats. I first created one variation with no screen count limitations. However, after receiving the constraint of having 5-6 screens and the confirmed 20 stats, I created V2.
V1 Initial sketch
V2 sketch after given constraints and confirmation of statistics
The Flow of the Page
Visual Design
In addition to that, I wanted to give the user a very “premium” feel when opening their personal stats, almost as if they were opening a treasure chest. I really wanted to emphasis that feeling of excitement. As a result, I decided to focus on using gold linework as key touchpoints in the design, This also tied in nicely with the overall Warframe brand, as it was something that was starting to become incorporated more onto the website and already existing in the game’s user interface.
The Components
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 elements that would be repeated throughout the experience.
MISSING DATA
These were cards that would replace areas of missing stats for players who don’t have them.
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.
4
The Solution
Animated Desktop Prototype
I used Adobe After Effects to create a short video to prototype the desktop user experience.
The Figma
This Figma file contains a view of all the screens created for this project in desktop, tablet and mobile views!
Responsive Design
At Digital Extremes, all web projects were designed to be responsive to all screen sizes. I learned a lot through talking to development about feasibility and accessibility. There were many revisions that were made to create the best experience for tablet/mobile users.
I often find that I prioritize the desktop user experience the most, and the tablet/mobile designs lack compare to the desktop, but in this project, I found myself focusing and improving my design skills for mobile/tablet experience as well. Thinking about scrolling interactions through tablet/mobile versus desktop was something I needed to consider.
The Valuable Users
This project also taught me the importance of creating a product for a very specific user base. In this case, the people accessing the product would most likely be very dedicated Warframe players, who were generally big fans of the game.
I got to experience the community, and players everyday at Digital Extremes. I wanted to create a design that would genuinely resonate with the players. Creating this design really made me realize how important understanding the users were. In addition to understanding the community, there were many statistics that some users may have that others do not. As shown throughout the design, I learned that there are many different cases and screens that need to be created to include all possible cases and states.
Building Animated Prototypes
While I had made Figma prototypes before, this was the most I had ever worked with making moving animated pieces onto a page. I learned a lot about motion graphics and design, and hope to keep on using and improving this skill!
