Context
The Warframe website is the central hub for the game's 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 (still in development)!
For this project, I was tasked with redesigning the Referrals page, a key touchpoint for players to invite friends.
Problem
The referral page was underperforming, with low referral invite activity.
The referral flow was buried in a messy page with outdated information, inconsistent visuals, and a lack of alignment with the current brand system.
1 // Research Phase
Auditing the Existing Referral Page for UX Gaps
I met with the PMs to align on the page strategy and scope out our work for a 2-week timeline. I dropped my first batch of thoughts right onto the existing design, highlighting outdated copy and prioritizing the required changes so we can successfully meet our launch constraints.
Key Takeways
Unclear hierarchy and design system misalignment
Poor heading and section hierarchy made information difficult to scan, and outdated components no longer matched the current design system.
Lack of referral progress visibility
Users had no clear way to track their referral progress, reducing motivation and engagement with the feature.
Responsive design considerations
The design needed to be fully responsive, ensuring a usable experience across desktop, tablet, and mobile.
2 // Design Phase
Improving visual hierarchy
Using components from the design system, I designed lo-fi wireframes, grouping content into distinct sections and creating clear visual separation to improve readability.
How can we encourage users to keep inviting friends in an engaging way?
I explored an interactive progress display using the player’s Warframe character to visualize referral completion. My goal was to make progress visible and personal to increase a user's motivation to continue engaging with the referral system.
3 // Testing and Refinement Phase
Does the page clearly guide users through understanding the referral process and completing an invite?
This became the guiding question during our feedback sessions, where I presented interactive web prototypes and conducted A/B-style testing with internal stakeholders to evaluate different referral page layouts.
Each variation represented a different emphasis in the flow:
One prioritized rewards and referral progress to drive motivation and engagement
The other surfaced “How It Works” earlier to support understanding of the referral process before taking action
Key Takeway
Users understood the referral process more confidently when informational content appeared earlier in the experience
These findings informed the final page structure, leading us to move sections such as “How It Works” higher on the page while shifting visual progress indicators lower to create a clearer onboarding flow.
Is the design within scope?
During feedback review sessions, we decided to remove the interactive progress display due to timeline and development constraints. Instead, I adapted an existing table component from the design system to maintain referral progress visibility while staying within scope.
4 // Launch Phase
Developer Handoff
I made sure to work closely with the developer to ensure the implementation matched the design 1:1 and to clarify interactions and edge cases during development. We were able to successfully launch the page within 2 weeks!
View the deployed page here!
6 // Reflection
PM x Designer communication
Working closely with PMs helped me clarify priorities early on and make sure we were aligned with the business goals. From those discussions, we ended up restructuring sections of the page to improve flow and make the information easier to follow.
Not getting attached to initial ideas
I learned to stay flexible and not get too attached to my early design ideas. While I was initially excited about an interactive player stats concept, I stepped back once priorities and constraints became clearer. This helped me focus on what would have the most impact in the project instead of pushing a specific idea forward.