Overview

Hero Galaxy is a web3 game where players earn in-game currency and skins for their NFT characters. Hero Galaxy has amounted 2,000 NFT holders, a community of 10K discord members, and generated 4M in revenue in its first year.

Our team brought new developments to the web3 gaming space, including dynamically editing NFTs and swapping five tokens for a higher valued one. I was tasked to redesign the companion site to the game, where players can access and upgrade their character NFTs, as well as forge 5 items of the same rarity to get a rarer item.

Challenges and Goals

There were two main goals of the redesign:

Revamp the IA
This redesign was part of a bigger update to the current site, the team was adding and updating features such as on-site purchasing, forging items, and equipping heroes. The current IA needed to be improved so players can easily find the additional content.

Update the visuals
The current site’s visuals could be improved to be more exciting. Great visuals in game UI is crucial to bringing virtual worlds to life. The goal was to create UI that made players feel powerful and immersed in the game world.

Revamping the IA

With the additional content being added to the site, I wanted to regroup information so that our players and new users will have no problems finding what they needed.

‍I regrouped information into two main categories: marketplace, and user assets. This broke out the site for two different user types: non-Hero Galaxy players who may be curious as to what we're about, and Hero Galaxy players who want to manage their account. This initiative also gave clarity as to what was being sold, and what the user owned.

We also made changes to the Home page.The original home page was an asset management page, and everyone landed on it regardless if they're logged in. For those who weren't logged in or didn't have an account, they would land on an empty state. We fixed this issue by replacing the marketplace as the home page, so that curious users and our players can explore what we had in store immediately. For our loyal players, their assets were just a tab away.

User flows

I also worked with the team to define and prioritize user stories. I created a user flow to visualize the paths users would take to accomplish their goals. This helped ensure I had all the bases covered before moving on to the nitty gritty of designing Hifi screens.

Hi-fi 1.0

Below are the first iterations of the hi-fi designs. My priority when designing UI has always been to create clean, intuitive and functional interfaces. I reached out to our players to collect feedback on the preliminary hi-fis and flows. We got a lot of constructive feedback from the community, including the following one that pointed out a critical aspect of designing UI for games: the element of fun.

"This looks great, one thing I'd say is don't forget the fun...Gotta make it exciting rather than routine."

Hi-fi 2.0

I’ve since updated the designs with a more immersive visual theme. I wanted the UI to instil a sense of power, excitement, and awe within the players. I think this is most exemplified by the Forge, a feature where players take five items and craft them into an extraordinary artifact.

Animations

We wanted to build excitement and anticipation when players were creating a new item. I created an animation to illustrate to developers how it should look.

Conclusion

It was refreshing to be able to use more of my illustration and graphic design skills to build an immersive game world through UI, and I hope our players will have as much fun forging new items and equipping their characters as I had to design this.

I am currently working closely with developers to get this and other features out to our eager community members asap.