BLIZZARD / HEROES OF THE STORM

Orphea BlizzCon Announcement

Heroes of the Storm introduces its first Nexus-born Hero, Orphea, a mischievous and highly mobile assassin. She vows to protect the innocent and fight against her evil father, the Raven Lord.

CLIENT
Blizzard Entertainment

PRODUCT
Marketing Website

ROLE
UI/UX Designer

TIME
Jun 2018 - Nov 2018

Frame 21.png

 "You really don't want to know what's in the box.”

01-header.png
02-lore.png
03-keyart.png
04-gameplay.png
05-skins.png
06-mounts.png
 

OVERVIEW

Announcing the First
Nexus-born Hero

Heroes of the Storm is a multiplayer online battle arena game where legendary characters from the Blizzard multiverse are summoned to fight in the Nexus. With the announcement of its first nexus-born hero, Orphea, my team and I took on the challenge of creating an immersive web experience to help excite and inform players of all things special with the new hero. For the reveal at BlizzCon 2018, we had to make a good impression with our players.

 

Goals

  • Create an announcement website that informs and excites players about the new hero

  • Highlight the rich and diverse lore of the Nexus universe

  • Drive users to install and play the game

  • Reveal the new hero announcement at BlizzCon 2018 and build player hype

Challenges

  • Appeal to players for the first time with an original character from the Nexus

  • Connect the existing story and lore

  • Collaborate with concept artists to produce painted background art while building a web-friendly experience

My Role

  • Main UI/UX and Visual Designer

  • Created wireframes, interactive prototypes, visuals, and conducted brainstorming sessions

  • Collaborated with a team of product managers and software engineers

  • Worked closely with engineers and paired during development

DISCOVER

Understanding Orphea

 

Problem Statement

The new hero Orphea and her announcement should appeal to players who are interested in original story-driven narratives and the addition of her unique gameplay abilities.

At the same time, it should not alienate the current Heroes of the Storm player base and should still keep players excited for future heroes that will continue to be inspired from Blizzard characters.

Questions

We had many questions right off the bat…

  • Who is Orphea and how does she work?

  • How does Orphea fit into the lore of Heroes of the Storm?

  • What type of content and features do users want to see?

  • How can we make this announcement special?

DEFINE

Identifying Users & Features

 

Player Personas

We worked closely with our internal research team to define and prioritize the player segments for the Heroes audience. Our goal was to depict the “who” of our audience, describe the similarities of customers within a market segment, and highlight the differences.

We gained a clear understanding of the website user demographic and behaviors. This helped us focus on each group’s needs, motivations, and pain-points, as well as capture how they think, feel, and act in particular situations or scenarios.

 
 

Key Features & User Goals

We identified the key features for Orphea and had to figure out how to tactfully package it all into the announcement website. With the player personas in mind, our goal was to create impact and value for the different users visiting the site in search for what’s new.

 

Hero Spotlight Trailer

Show users the new hero’s gameplay trailer to help summarize abilities and playstyle in a neatly packaged video with voiceovers

Hero Cinematic Trailer

Show users the expanding universe of Heroes of the Storm and highlight the backstory of Orphea with a cinematic

Lore & Comics

Show users the story comics that connects Orphea’s lore to the Heroes of the Storm universe and other characters

Hero Abilities

Show users the powerful and unique abilities that Orphea channels in-game and supplement with editorial and video content

Hero Cosmetics

Show users the skins available for Orphea to equip in-game and highlight the collectibles that can be earned from playing

General Updates

Show users the extra updates coming to Heroes of the Storm with other related content, promotions, and features.

EXPLORE

Designing a Solution

 

Structure

With our goals, users, and features defined, we were ready to create wireframes. We needed to determine what users would see during the announcement, and which features were the highest priority.

I mapped out a page that provided users a simple yet engaging way for them to discover everything about Orphea. It also provided a clear path of content priority in the order that seemed intuitive for users learning more about the new hero and lore.

MATERIALIZE

Developing the Visual Identity

 

UI

The visual language of Heroes of the Storm utilizes gradients, textures, and warm hues. For the Orphea announcement site, we wanted to reflect that identity and bring the theme to life. I created web styles for colors, typography, UI, and iconography.

I had some fun with the Orphea branding. I took inspiration from gothic-style borders and decorative elements. The color palette elevated the gold accents as seen on her coffin weapon and purple tones from her overall hero theming.

 

Visuals

We worked closely with the Heroes Art and Video team to produce beautiful art and assets for the announcement. We wanted to celebrate the unique new hero announcement by creating visually stunning pages that displayed a mix of in-game screenshots, model renders, and cinematic stills.

I had the honor of collaborating with concept artist Peter Lee to nail down the pieces for the background art to help build the immersive world of Orphea in Heroes of the Storm.

 

Animated Polish

With the beautifully crafted background pieces for the page, we saw a great opportunity to implement simple parallax to help draw users down the page.

My engineering peer also found a great way to add some more motion polish by building infinite firefly effects using Canvas.

I collaborated closely with our engineers to help bring the page to life by supporting development with assets and animations.

DELIVER

Launching Success

 

Results

At BlizzCon 2018, we successfully launched the Orphea site right when she was announced to the world. The thousands of attendees and millions of players around the globe were able to experience and learn more about the first nexus-born hero. Some highlights:

  • Smooth launch with no leaks! Thousands of clicks and views

  • Increased player conversion

  • Site was well received by audience, and the Heroes dev team featured the website at their live BlizzCon deep dive panel!

  • Proud team members and excited stakeholders!

 

Takeaways

Working on the website for Orphea’s announcement was very rewarding. I got to be a part of a big celebration that impacts the enjoyment and excitement of players around the world. I also had the honor of working with such an excellent team of talented people at Blizzard who helped bring this all to life.

I learned a lot from working on this project.

  • Operating as the main UI/UX designer involved in the entire process, from ideation to execution

  • Collaborating closely with concept artists to achieve same goals

  • 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:

  • Concept Artist Peter Lee

  • Blizzard producers, artists, and developers

  • Our players and fans

Check out the Orphea Announcement Site!

More Projects

ft-OW2.jpg

Overwatch 2 Announcement

Website · UI/UX · Visuals

ft-owevents.jpg

Overwatch Seasonal Events

Website · UI/UX · Visuals

ft-hotsheroselect.jpg

Heroes Select & Profiles

Website · UI/UX · Visuals