Hey, I'm Liam

Avengers Academy Tracker

Tackling UI problems in Avengers Academy with a streamlined tracker

Whilst playing Avengers Academy, I had some issues with the game’s UI for events. A player had to jump back and forth through a number of menus to find out how many collectables they had, and how many were needed to earn the next character or building.

My solution was to build a responsive, web-based tracker, allowing players to tick off what collectables they had, and find out how many more they needed.

The full capacity v1 Materials list on desktop.

The first release aimed to match the in-game UI for viewing remaining materials. This worked well, however by the end of the event, there were nearly 40 collectibles to be gathered. The result of this was a very long scrolling page for users to navigate, with remaining material totals being inaccessible at a glance.

To remedy this for the next event, I switched to a card-based system, and added a fixed sidebar containing all remaining totals.

The rejuvenated v2 of the Tracker.

The new sidebar could be quickly toggled on a mobile display, granting the user instant access to all their remaining materials. Options were also added to track certain cards, allowing all non-tracked cards to be hidden. The v2 experience was far more user friendly, and took less effort to find relevant information.

More work