Redesigning the Referrals Page for Warframe.com 🕹️
Timeline
Timeline
2 Weeks
Team
Team
2 Product Managers
1 Product Designer
1 Developer
Overview: Warframe is an online game with a global community of 80M+ players. During my Product Design Internship at Digital Extremes, the studio behind Warframe, I contributed to modernizing its web presence and also led a large-scale project to redesign their entire Forums platform (under NDA).
Goal: For this project, I was tasked with redesigning the Referrals page, a key touchpoint for players to invite friends, ensuring it aligns with Warframe’s updated design system and accessibility standards.
Overview: Warframe is an online game with a global community of 80M+ players. During my Product Design Internship at Digital Extremes, the studio behind Warframe, I contributed to modernizing its web presence and also led a large-scale project to redesign their entire Forums platform (under NDA).
Goal: For this project, I was tasked with redesigning the Referrals page, a key touchpoint for players to invite friends, ensuring it aligns with Warframe’s updated design system and accessibility standards.
Timeline
Timeline
2 Weeks
Team
Team
2 Product Managers
1 Product Designer
1 Developer
Research 🔍
Identifying Pain Points
I met with the team to understand their goals for the page, prioritizing changes to ensure a timely launch.
I identified areas of improvement such as the lack of visual hierarchy, making it harder to scan through information, and started grabbing inspiration from similar websites.
I met with the team to understand their goals for the page, prioritizing changes to ensure a timely launch.
I identified areas of improvement such as the lack of visual hierarchy, making it harder to scan through information, and started grabbing inspiration from similar websites.
Experimenting 🧪
Lo-Fi Wireframing
I began to play around with page layouts, reusing components from the design system to streamline implementation for the web developers.
I began to play around with page layouts, reusing components from the design system to streamline implementation for the web developers.
Design Process 🎨
Hi-Fi Mockups & Prototyping
While designing, I had to account for different viewing states such as if the user was/wasn't logged in. I prototyped elements to create a functional design that was clear for developers.
While designing, I had to account for different viewing states such as if the user was/wasn't logged in. I prototyped elements to create a functional design that was clear for developers.
Feedback 🔎
Design Iterations
After completing the first version of the design, I collaborated with product managers to ensure the design aligned with their goals for the page.
I designed with responsiveness in mind, ensuring the layout seamlessly adapted to tablet and mobile screens as well.
Incorporating stakeholders' feedback, I reorganized key sections to create a smoother user flow and rapidly iterated to refine the experience.
After completing the first version of the design, I collaborated with product managers to ensure the design aligned with their goals for the page.
I designed with responsiveness in mind, ensuring the layout seamlessly adapted to tablet and mobile screens as well.
Incorporating stakeholders' feedback, I reorganized key sections to create a smoother user flow and rapidly iterated to refine the experience.
Final Design
Final Design
View the developed website here! warframe.com/referral
View the developed website here! warframe.com/referral
Next Steps 💭
Next Steps 💭
If given more time, I would have incorporated an interactive display of user statistics to encourage visitors to engage with the page longer.
One concept I envisioned for that section was showcasing a player’s character, where clicking on it would reveal key statistics in a pop-up view. Ultimately, this idea was set aside to keep the project focused and within scope.
If given more time, I would have incorporated an interactive display of user statistics to encourage visitors to engage with the page longer.
One concept I envisioned for that section was showcasing a player’s character, where clicking on it would reveal key statistics in a pop-up view. Ultimately, this idea was set aside to keep the project focused and within scope.
