Guild Of Guardians

Guild of Guardians is a fantasy idle RPG where you assemble legendary Guardians into an unstoppable team. Craft powerful items, strategically summon new heroes, and conquer the ever-increasing difficulty of the dungeons. Guild of Guardians is built on Immutable zkEVM, allowing you to truly own your in-game assets as NFTs, trading, selling, and showcasing your treasures in a secure ecosystem.

The Challenge

Create a User friendly UI/UX for a Idle RPG game and website with a mobile first approach. Creating assets and templates to be used continuously by both Marketing and Developers.

 

Create a library of the 70+ Guardians to showcase the variety and advantages of each Guardian.

My Role

I was one of the Senior UI/UX designers on this project, working on the userflow, keeping the design library on brand and creating animations and assets as well as an easy to navigate website to teach users about the game.

Research and Review

Storyboarding

With a bare bones website, we started plotting what were the crucial elements of the site, what would be the “Nice to haves” and what pages would be no longer needed and could be removed.

 

We also needed to come up with a way to showcase a library of 70+ Guardians to help the user mold their perfect team before heading into the battlefield.

 

This was all done in a collaborative workshop using Miro.

Analytics and User Testing

Using Webflow’s built in tools, QA testing and User feedback. We were able to pin point where the site was succeeding and where the user was having difficulties finding their way and navigating the website.

Putting the Research to use.

Wireframes and Prototyping

Through in-depth research and exploration workshops, we began crafting wireframes informed by our findings. Prioritizing a mobile-first approach, we iterated designs within our team, refining the layout and overall user experience for the new website.

 

Using Figma, we developed wireframes to establish an intuitive, user-friendly structure that effectively presents information to our audience.

Development and Design

Guided by our Style Guide, we designed and refined elements that seamlessly aligned with the in-game aesthetic. Our goal was to make the website feel like a natural extension of the world of Elderym, ensuring a smooth and familiar transition between the game and its online presence.

Final Designs