Sean McLaughlin UI/UX Artist and Designer
Improving the UX of the Hero Landing Page
The main issue with the Hero Page overall was burying information within the tabbed list. Majority of the time in the game is spent upgrading your heroes through Research (Level Gates), Empowering (Leveling), and Equip (Buff Bonuses). I set out to improve the page to allow players to see more high level information at a glance and making it smoother to jump between heroes during upgrading with shared inventory.
Layout and Flow Update
The final layout provided more information to the player without having to tab through multiple pages. I converted some of the more simple tabs from pages to modals and dedicated more space for the more complex systems.
Hero Landing 2.0
Hero Landing 2.0 Flow
Towards the end of the project we were starting to work with Proto.io for click flows that we could test on device compared to earlier flows that were created in Adobe Fireworks and tested in a browser. I felt very strongly that our prototypes should be tested on device to detect any issues with player input and readability of information.
Page Comparison
The slideshow below showsthe before and after for each element of the Hero Page
The right image shows how the page becomes a modal with two tabs instead of accordion list within a list.
Converting the profile page to become a modal that presents the player with an easier to read list of buffs and special combat info.
Modified so the player can view the currently collected and available for purchase abilities.
The right image shows how the page becomes a modal with two tabs instead of accordion list within a list.