Hero Roster.

Learning heroes without the pressure

The project involved designing the game's Hero Roster screen to improve the user experience as well as the overall look and feel. In creating a roster screen outside of a match, players would be able to learn about heroes without the pressure of only being able to do so once in a team.

Down the line, this screen would allow for expansion into other screens and functionality, such as unlocking heroes, equipping skins and other forms of personalisation (e.g. an emote wheel).

Benchmarking hero rosters

Before designing this screen, I wanted insight into what competitor games are doing and which layouts and design patterns they use, while maintaining familiarity so players aren't faced with a non-conventional screen that is difficult to interact with.

A variety of hero roster screens were examined, from games in the same genre as Evercore Heroes and from other genres, selected because they resembled the vision I and other product owners had for the game. This research showed which solutions worked for players and what to avoid or improve.

What worked elsewhere

• Selecting a character via a portrait (rather than just text) allows easier recognition; grids are common.
• Some games use part of the screen for large previews of the character.
• Some games split the roster flow into two screens, a gallery that leads to a detailed individual character screen.

Daily in-house playtests

Research also included feedback from other employees after daily in-house playtesting, using a playable build in Unreal Engine, video recordings and feedback threads. This gave in-depth qualitative data on player tendencies, what players might want from this screen, and pain points of the current design.

Early versions of Project-V did not include a Hero Roster screen; the closest was the lobby scene (also later redesigned by me), which let players view the different heroes.

What players said

Design implications

• Hero selection should be portrait-based and laid out for easy navigation (a grid rather than a carousel).
• Information should be categorised for easier navigation (e.g. heroes grouped into archetypes).

Affinity mapping in Miro

Identifying user goals, behaviours and pain points helped build an affinity diagram, organising important information into themes and patterns, and keeping key insights constantly visible throughout the UX process as I tackled each problem.

Sketches to mockups to engine

With research and analysis complete, I sketched low- and medium-fidelity mockups of the roster screen, exploring different layouts and user flows. This allowed me to test approaches quickly and refine them during the visual design phase.

The layouts were discussed with product owners and other employees, and a direction was decided before recreating them in colour at higher fidelity and readying assets for initial implementation and testing in Unreal Engine. 2D animations and sounds gave the screen that extra touch.

High-fidelity design & implementation

Constant feedback from players inside and outside the company allowed for improvements and iterations, alongside a major change in the game's visual style, leading to the current design of the hero roster screen.

The current roster flow

The current state of the hero roster flow in Evercore Heroes, in action.

Two changes that mattered

Between the initial and latest versions, I made a number of changes based on feedback, changes to the visual style guide, the growing roster and new functionality requirements.

• The one-screen-fits-all approach no longer worked as the roster grew, so the grid moved from an expandable tab to a screen of its own, a two-screen flow where players click a portrait to enter a hero details screen. The screen feels less cluttered, matches the cleaner style of the game, and information is broken into stages to reduce cognitive overload.
• As customisation options grew, the information hierarchy was revisited: key information (hero name, skills, skin thumbnails) stays on-screen, while secondary information (e.g. talent icons) moved into buttons accessible in one click, again reducing cognitive overload.

Learnings

• Hiding and revealing certain features until a player reaches a certain level ensures the player isn't overwhelmed by the amount of information presented at once.
• Keeping interactions low matters, but some creative liberties are worth taking if they improve flow, accessibility, clarity and reduction of cognitive overload.
• Future content needs to be kept in mind when designing UI, a large set of features can arrive within months and demand dramatic UX/UI changes if not planned in advance.