BLIZZARD / HEROES OF THE STORM
Heroes Select
& Profiles
Legendary heroes and villains from Warcraft, StarCraft, Diablo, and Overwatch are summoned to the Nexus. Choose your hero and prepare to fight in Heroes of the Storm!
CLIENT
Blizzard Entertainment
PRODUCT
Website Features
ROLE
UI/UX Designer
TIME
Jan 2018 - Jan 2019
“Epic heroes and relentless action on Nexus battlegrounds”
OVERVIEW
Spotlighting Heroes
Heroes of the Storm is an online battle arena game where legendary characters from the Blizzard multiverse are summoned to fight in the Nexus. The characters play a huge part of the game with their powerful abilities. My team and I took on the challenge of improving how Heroes displayed on the web in order to help players learn more and improve their gameplay.
Goals
Redesign the hero select and profile pages to provide more value for players
Highlight the diverse cast of heroes and their unique gameplay abilities
Improve discovery of heroes, and make it easier for browsing
Challenges
Appeal to players who want to discover more about heroes and abilities
Identify the strengths and pitfalls of the old pages and redesign a better solution
Collaborate with the game devs to better understand hero mechanics
My Role
UI/UX and Visual Designer
Created interactive prototypes, components, visuals, and participated in research and brainstorming sessions
Collaborated with a team of other designers, and PMs and engineers
DISCOVER
Understanding Heroes
Problem Statement
The hero pages on the official Heroes of the Storm website should make browsing and discovery easy for players who are interested in learning more about the heroes.
The hero information on the index and profile pages should be accurate, consistent, and appealing to players as a source of truth, as well as a tool for user acquisition and engagement.
Questions
We had many questions right off the bat…
What do players want to know about heroes?
Is what we are currently showing on the hero pages valuable?
Will players use the hero pages more if we improve them?
Do the current pages allow for effective browsing or discovery?
DEFINE
Identifying Users & Features
User Interviews
We conducted a study where we interviewed users about the previous site and had them test out new prototypes. From our research, we knew that hero pages have the most potential with newer players, therefore we recruited participants from that group.
We asked the participants questions about how they searched for hero information, what they felt was lacking from the current site, and if they found the new prototypes more useful.
We gained a better understanding of user behaviors and how they consumed content. Overall sentiment was overwhelmingly positive when shown the prototypes, and 100% of participants preferred the new design. They enjoyed that it had everything they needed to understand the game better, as it felt like a “one stop shop”.
Key Features & User Goals
Based on our user research, we identified the key features for Hero information and had to figure out how to tactfully package it all into the website. We wanted to create impact and value for the users visiting the site in search for details about the heroes.
Basic Hero Information
Show users the hero’s name, description, trailer, and main strengths and weaknesses
Hero Role & Difficulty
Show users the hero’s class, playstyle, and difficulty of control in-game
Hero Lore
Show users the world in which the hero originated from within the Blizzard universe
Hero Artwork
Show users the hero’s keyart, in-game models, collectible skins, and wallpapers
Hero Abilities
Show users the hero’s abilities and traits, along with key bindings and video examples
Related Heroes
Show users the related heroes for synergies, counters, and connection to lore
EXPLORE
Redesigning a Solution
New Prototypes
With our goals, user needs, and features defined, we were ready to create wireframes. Building off of the previous site, we needed to find opportunities to improve the information hierarchy and visual representation of heroes for the new design.
We designed a new solution that gave a clearer understanding of the range of heroes, improved the visual hierarchy and elevation of high-level hero information, and suggested more additions for hero data.
MATERIALIZE
Developing the Visual Identity
UI
The visual language of Heroes of the Storm utilizes gradients, textures, and colorful hero art. For the Heroes pages, we wanted to reflect that identity and bring the theme to life. I created global web styles for colors, typography, UI, and reusable components.
With the Heroes 2.0 rebrand, it gave us a good foundation to base our visual designs off of. The updated colors and UI gave the game a fresh new look and feeling. We wanted to make sure we celebrated the heroes on the web as awesome as they are in game.
Visuals
We worked closely with the Heroes UI and Art team to produce beautiful assets for the hero pages. We wanted to celebrate the unique hero themes and new branding of the game by creating visually cohesive pages that displayed a mix of screenshots and character models. I had a lot of fun working with the galaxy art and overlaying clean UI to bring it all together.
Heroes Select Page
Heroes Profile Page
DELIVER
Launching Success
Results
We successfully launched the new and improved hero select page for players around the world to browse and discover the wide cast of Blizzard heroes. Some highlights:
Increased player conversion and engagement
Page was well received by audience, with the new changes equipping players with better knowledge of the game and heroes
Accomplished our goal to answer user needs, providing an easily scannable list of heroes and a convenient snapshot of hero info
Proud team members and excited stakeholders!
Takeaways
It was a great experience working with a group of strong UX designers and collaborating with the Heroes of the Storm dev team.
I learned a lot from working on this project.
Conducting a user study with interviews and prototype testing
Identifying the key parts of a successful redesign
Communicating ideas and design process
Creating visually stunning experiences and interactions
Thanks for reading!
Tools used:
Axure RP
Adobe CC Photoshop, Illustrator, and After Effects
Special thanks to:
UX Designer and Researcher Julia Marsh
Heroes of the Storm artists and developers
Our players and fans
Check out the
Heroes Select Page!
More Projects
Heroes Orphea Announcement
Website · UI/UX · Visuals
Overwatch 2 Announcement
Website · UI/UX · Visuals
Overwatch Seasonal Events
Website · UI/UX · Visuals