PROJECT
Hall of Heroes
YEAR
MID 2025 - END OF 2025 
SCOPE OF WORK
UX Design
TOOLS
Figma
Hall of Heroes (Herodex) is a system where players can work on leveling up specific heroes within hero collections. Depending on how much the player advances the heroes with those collections, they will be rewarded with stat buffs that will help them improve in many areas involving combat and utility-base gameplay needs.

Hall of Heroes

Goals

Research & Origin

To incentivize players to invest in advancing their hero collections.

Understanding the Problem

We needed to figure out a way to get players to advance their collections as well as introduce a new concept. This could be a problem because players will have to experience a learning curve, and we’ll need a plan on how to maintain this feature. Furthermore, the new season of House of Dragon will be released so we need the investment from players.

Requirements & Constraints

Discovery

  • New button to access the Hall of Heroes at the bottom of the main screen in the Tower of Hand

  • New panel to show the Hallo of Heroes with all the collections where the players can scroll through to view each collection available.

  • Collection Panels will:

    • Have a drop down arrow button that shows each collection details

    • Display the collection theme name

    • Icons showing the reward buffs offered

    • Player will be able to see their collection level

    • Attack power icon of buffs earned in the collection

    • See how many stars they’ve unlocked

  • Collection Details will: Display more information about what progress that player has made, and what specific heroes are in the collection.

    • Show the full hero cards. Cards must be tappable and bring the player to the card details

    • The collection level

    • The collection points acquired in a progress bar

    • The chart button which will bring the player to another page and it outlines all the stats they’ll get

Assumptions

Process

Firstly, I’ll need to make sure this new panel will look familiar to players visually. There’s nothing that would be more striking than having our regular players see a panel that looks completely different than what’s in the game. So I took inspiration from assets that we already have. In this instance, there’s no need to reinvent the wheel. I’ll assume players would want to see similar assets, buttons, borders, etc.

User Flow chart

The flowchart begins with the user going into the Tower of Hand building, and clicking the “Hall of Heroes” tab. The hero collections, filter button, sorting button and info button are shown. I thought of different users that would interact with this new feature. A new player would more than likely go to the info button to learn more. A more experience player would observe the collections, details and stats. While designing the experience for this I wanted to keep both players in mind and “hold their hands” when needed.

INITIAL USER FLOW iN FIGMA.

Ideation

Now that the team is aligned with using our assets, now is the time for me to think of a few layout options that would provide the best experience.

Two options were presented and one option was more liked than the other. The team liked option A more, but suggested a few tweaks. Option A is closest to what we have in game within our armory. Although option B provided a fresh look, I thought familiarity paired with a new concept is a better way to go.

Feedback

The stakeholders were engineers, a community manager, a producer, and game designer. The few tweaks were to display the hero rarity in a different way, add a favorite button, and a details button.

Final High Fidelty Wireframes

Solution

I designed an experience that would be familiar, increase investment in hero collections while thinking about potential risks players could experience.

Understanding the Problem

It’s expected having players invest in the hero collection might be a potential “turn-off",” but with logical hypothetical guesses I expect for “competitive” players to be more invested because of the stat increases and reward buffs they can receive.

Key Lessons

Reflection

I’ve enjoyed this project so much. There’s nothing I love more than creating something from scratch and shipping it off to the world. I expect for there to be problems, but the entire point of UX is to minimize that as much as possible, but also realize you cannot “fool-proof” everything. As a team we agreed to make a V2 of this feature because we want to expand on this by adding milestones and an additional stat.

I learned more about auto layouts in Figma and how important they are. Not only that, but I contributed more to the design library. Design libraries are significant because they made your process more efficient. This project also reinforced the greatness that is collaboration. I enjoy brainstorming with peers because everyone has something to contribute and is valuable. We think of many ways to accomplish one thing and it’s great because I never want to shut out an idea. Being open minded while designing brings out the best designs.

SCREENRECORDING OF THE FINAL DESIGN.