Guild Of Guardians Site
Senior Product Designer
The Project
This project focused on designing the website for Guild of Guardians, an idle RPG and the largest title at the time to be released by Immutable. The site’s initial role was to support pre-registrations, including integration with Immutable Passport to allow players to link their accounts to a web3 wallet.
I was responsible for the end-to-end design of the site, including user research and ongoing iteration. From the outset, the platform needed to be built with growth in mind. Beyond pre-registration, it would expand to include core game information and a detailed library featuring over 70 Guardians, each with their own page showcasing stats, artwork, and abilities.
Because the game itself was still in active development, the site had to be designed in stages. Early versions focused on basic pre-registration, with scope and content expanding over time as characters, systems, and gameplay details became finalised. This required an agile approach, allowing the site to evolve alongside the product without requiring redesign at each phase.
The site continues to be actively maintained today, growing alongside the game with new Guardians, updated information, and additional features introduced with each release.
The Key Challenges
- Designing a mobile-first experience that delivered a clear, intuitive UI for an idle RPG while scaling effectively to larger screen sizes.
- Creating reusable assets and templates that could be continuously used by both marketing and development teams without introducing inconsistency or rework.
- Designing a scalable Guardian library capable of supporting 70+ characters, each with distinct stats, abilities, and visual identity, while remaining easy to browse and compare.
- Managing evolving and incomplete art assets, ensuring the site could be updated seamlessly as higher-quality artwork and final assets became available without requiring redesign.
- Building for scale from the outset, allowing new pages, content types, and game information to be added as the product approached launch.
The Objectives
- Define and align on core website requirements through workshops with stakeholders, ensuring early clarity on scope, priorities, and constraints.
- Identify and prioritise core functionality versus secondary features, mapping “nice to haves” against launch needs to avoid unnecessary complexity while leaving room for future expansion.
- Design and validate responsive wireframes with a mobile-first approach, ensuring usability and performance across devices.
- Design for asset volatility, creating layouts and components that could accommodate placeholder or evolving artwork without breaking visual hierarchy or usability.
- Collaborate closely with the Art Director to select and evolve key art, Guardians, and visual moments that represented the game’s identity as assets became available.
- Build a scalable Guardian library, initially supporting 70+ Guardians, with a structure that allowed new characters to be added without redesign or content debt.
- Introduce motion, animation, and visual detail where appropriate to enhance engagement while maintaining performance and accessibility.
- Establish and maintain a shared design library, adding reusable components, assets, and patterns to support consistency across marketing, design, and development.
- Enable non-design teams to scale the site independently, ensuring templates and systems could be reused without ongoing design intervention.
- Future-proof the platform so additional content, pages, and features could be introduced smoothly as the game progressed toward launch and beyond.
-
The Process and Testing
The work began with in-depth research and exploration workshops to understand player needs, product goals, and technical constraints. Insights from this phase informed early wireframes, with a strong focus on a mobile-first experience. Designs were iterated collaboratively within the team, refining layout, hierarchy, and overall usability before moving into higher fidelity work.
Using Figma, I developed responsive wireframes that established a clear and intuitive structure for presenting game information. These wireframes served as a shared reference point for design and development, helping align on functionality and content before visual polish was introduced.
Visual design was guided by the existing style guide, ensuring the site felt like a natural extension of the world of Elderym. UI elements were designed and refined to match the in-game aesthetic, creating familiarity and continuity between the game and its web presence.
A key focus of the project was the Guardian library. The system was designed to scale from the outset, allowing players to explore and compare Guardians through clear presentation of stats, roles, affiliations, and skills. This helped support team-building decisions while showcasing the depth of the roster.
As new key art and higher-quality assets became available, I worked closely with the Art Director to integrate them into the site. In some cases, this required small layout adjustments to ensure the artwork was presented effectively without disrupting the overall structure.
As the project progressed, additional requirements emerged from stakeholders beyond the original scope. These included an online store for in-game items, reusable templates for banners and promotions, a system for converting assets into in-game currency or other items, and a referral code page. Because the site was built on modular and flexible foundations, these features could be incorporated without compromising existing work.
The Results
Despite working with incomplete and evolving art assets, the site launched successfully due to early planning and a flexible design approach. From the outset, the site was built with the expectation that artwork, imagery, and character portraits would be replaced over time. By designing layouts around wireframes and first-pass visual placeholders, we were able to seamlessly swap in final assets as they became available without reworking the underlying structure.
This approach allowed the site to launch early using approved placeholder artwork, enabling pre-registration efforts to begin as planned. The launch delivered strong results, driving significant pre-registration interest while also giving marketing the tools they needed to operate independently. A reusable blog template was introduced, allowing the team to publish updates and announcements without additional design or development support.
The website also supported monetisation from an early stage. An integrated web store enabled players to purchase in-game items, while modal-based promotions highlighted upcoming and limited-time events. These event-driven offers were heavily used, frequently selling out and becoming a reliable channel for driving engagement and conversion.
As the game continued to grow, the site scaled alongside it. New Guardians, events, and content were added regularly, with much of the website content directly supporting in-game features and live events. Over time, the game reached more than one million downloads and over 143,000 monthly active users.
While the early stages of development came with resource constraints, the decision to design for flexibility and scale proved critical. The site’s future-proof foundation allowed it to adapt quickly as assets, features, and content matured, turning early limitations into long-term advantages.
Gallery
.svg)
