Return to homepage

World of Warcraft Support Portal


My Role

Visual Design, User Testing, Icon Design, Animation, Prototyping, Development

World of Warcraft Support
Objective

This in-game interface was designed to assist World of Warcraft players in quickly solving their issues to get them back to their game.

World of Warcraft Support - Redesign

A ground-up overhaul was required to bring the interface to modern design standards. The experience offers useful resources such as self-service automations and knowledge-base and community driven articles with regards to account, technical, and gameplay related issues. Should these solutions not help, escalating the issue to a customer service representative should be simple and straight forward.

World of Warcraft Support - Expanded UI

This redesign coincided with an of an influx of players from the release of the “Shadowlands” expansion. This launch became the fastest-selling PC game of all time, with 3.7 million sales in a single day.

Style Tiles

The previous rendition of the World of Warcraft Support portal did not adhere closely to the game’s brand guidelines. It previously had the look and feel of an agnostic Blizzard site that caters to all Blizzard game titles.

Instead, this interface should integrate more closely with the surrounding game interfaces. To address this, the first exercise was to create style tiles to illustrate various design directions we could apply to the whole experience.

World of Warcraft Support - Style Tile Version 1
World of Warcraft Support - Style Tile Version 2
World of Warcraft Support - Style Tile Version 3
Component Libraries

The next step was to start building component libraries and style guides for other designers and developers to use as patterns. This ensures consistency across the site which is critical.

World of Warcraft Support - Components
Prototyping and Animation

Next, these UI components were applied to low fidelity flows created in collaboration with UX designers to transition them into high fidelity mockups.

Micro interactions and animations were then created between screens to build out a working prototype. This helps illustrate the design flow to various stakeholders.

Design Specs

In order to reach the level of fidelity the design team was seeking on the final product, detailed design specs were provided to the engineering team.

Reporting

Looking at the transformation to the newly redesigned game experience, several key goals were reached. Reports show an increased success rate for customer self-services, resulting in less contacts. This resulted in drastic company cost savings.

Localization

Establishing a close collaboration with regional stakeholders across the globe early in the development process was critical to meet specific player needs. Unique functionality was introduced for various regions / languages while being mindful of constraints and feasibility.

World of Warcraft Support - Localization
Prototype

Being able to showcase screen to screen flows and convey desired microinteractions and animations is helpful for developers to understand implentation.

Next Steps

There are more ongoing initiatives for the website today. This includes designing improved recommendation systems with machine learning algorithms and updating component libraries on the design to code environment to assist developers. There is also a growing effort into making the site compliant with regards to accessibility and catering to those that require assistive devices.


View final product